shape.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. /*!
  2. * # Semantic UI 2.4.2 - Shape
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Shape
  12. *******************************/
  13. .ui.shape {
  14. position: relative;
  15. vertical-align: top;
  16. display: inline-block;
  17. -webkit-perspective: 2000px;
  18. perspective: 2000px;
  19. -webkit-transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  20. transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  21. transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out;
  22. transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  23. }
  24. .ui.shape .sides {
  25. -webkit-transform-style: preserve-3d;
  26. transform-style: preserve-3d;
  27. }
  28. .ui.shape .side {
  29. opacity: 1;
  30. width: 100%;
  31. margin: 0em !important;
  32. -webkit-backface-visibility: hidden;
  33. backface-visibility: hidden;
  34. }
  35. .ui.shape .side {
  36. display: none;
  37. }
  38. .ui.shape .side * {
  39. -webkit-backface-visibility: visible !important;
  40. backface-visibility: visible !important;
  41. }
  42. /*******************************
  43. Types
  44. *******************************/
  45. .ui.cube.shape .side {
  46. min-width: 15em;
  47. height: 15em;
  48. padding: 2em;
  49. background-color: #E6E6E6;
  50. color: rgba(0, 0, 0, 0.87);
  51. -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  52. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  53. }
  54. .ui.cube.shape .side > .content {
  55. width: 100%;
  56. height: 100%;
  57. display: table;
  58. text-align: center;
  59. -webkit-user-select: text;
  60. -moz-user-select: text;
  61. -ms-user-select: text;
  62. user-select: text;
  63. }
  64. .ui.cube.shape .side > .content > div {
  65. display: table-cell;
  66. vertical-align: middle;
  67. font-size: 2em;
  68. }
  69. /*******************************
  70. Variations
  71. *******************************/
  72. .ui.text.shape.animating .sides {
  73. position: static;
  74. }
  75. .ui.text.shape .side {
  76. white-space: nowrap;
  77. }
  78. .ui.text.shape .side > * {
  79. white-space: normal;
  80. }
  81. /*******************************
  82. States
  83. *******************************/
  84. /*--------------
  85. Loading
  86. ---------------*/
  87. .ui.loading.shape {
  88. position: absolute;
  89. top: -9999px;
  90. left: -9999px;
  91. }
  92. /*--------------
  93. Animating
  94. ---------------*/
  95. .ui.shape .animating.side {
  96. position: absolute;
  97. top: 0px;
  98. left: 0px;
  99. display: block;
  100. z-index: 100;
  101. }
  102. .ui.shape .hidden.side {
  103. opacity: 0.6;
  104. }
  105. /*--------------
  106. CSS
  107. ---------------*/
  108. .ui.shape.animating .sides {
  109. position: absolute;
  110. }
  111. .ui.shape.animating .sides {
  112. -webkit-transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  113. transition: left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  114. transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out;
  115. transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  116. }
  117. .ui.shape.animating .side {
  118. -webkit-transition: opacity 0.6s ease-in-out;
  119. transition: opacity 0.6s ease-in-out;
  120. }
  121. /*--------------
  122. Active
  123. ---------------*/
  124. .ui.shape .active.side {
  125. display: block;
  126. }
  127. /*******************************
  128. Theme Overrides
  129. *******************************/
  130. /*******************************
  131. User Overrides
  132. *******************************/