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.

155 lines
2.8 KiB

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