shape.css 3.7 KB

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