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
3.1 KiB

  1. /*!
  2. * # Semantic UI 2.0.0 - Shape
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 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. vertical-align: top;
  17. display: inline-block;
  18. -webkit-perspective: 2000px;
  19. perspective: 2000px;
  20. -webkit-transition: -webkit-transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 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. }
  23. .ui.shape .sides {
  24. -webkit-transform-style: preserve-3d;
  25. transform-style: preserve-3d;
  26. }
  27. .ui.shape .side {
  28. opacity: 1;
  29. width: 100%;
  30. margin: 0em !important;
  31. -webkit-backface-visibility: hidden;
  32. backface-visibility: hidden;
  33. }
  34. .ui.shape .side {
  35. display: none;
  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. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  51. }
  52. .ui.cube.shape .side > .content {
  53. width: 100%;
  54. height: 100%;
  55. display: table;
  56. text-align: center;
  57. -webkit-user-select: text;
  58. -moz-user-select: text;
  59. -ms-user-select: text;
  60. user-select: text;
  61. }
  62. .ui.cube.shape .side > .content > div {
  63. display: table-cell;
  64. vertical-align: middle;
  65. font-size: 2em;
  66. }
  67. /*******************************
  68. Variations
  69. *******************************/
  70. .ui.text.shape.animating .sides {
  71. position: static;
  72. }
  73. .ui.text.shape .side {
  74. white-space: nowrap;
  75. }
  76. .ui.text.shape .side > * {
  77. white-space: normal;
  78. }
  79. /*******************************
  80. States
  81. *******************************/
  82. /*--------------
  83. Loading
  84. ---------------*/
  85. .ui.loading.shape {
  86. position: absolute;
  87. top: -9999px;
  88. left: -9999px;
  89. }
  90. /*--------------
  91. Animating
  92. ---------------*/
  93. .ui.shape .animating.side {
  94. position: absolute;
  95. top: 0px;
  96. left: 0px;
  97. display: block;
  98. z-index: 100;
  99. }
  100. .ui.shape .hidden.side {
  101. opacity: 0.6;
  102. }
  103. /*--------------
  104. CSS
  105. ---------------*/
  106. .ui.shape.animating .sides {
  107. position: absolute;
  108. }
  109. .ui.shape.animating .sides {
  110. -webkit-transition: -webkit-transform 0.6s ease-in-out, left 0.6s ease-in-out, width 0.6s ease-in-out, height 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. }
  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. *******************************/