You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

154 lines
2.7 KiB

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