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.

112 lines
2.0 KiB

  1. .ui.shape {
  2. display: inline-block;
  3. position: relative;
  4. -webkit-perspective: 2000px;
  5. -ms-perspective: 2000px;
  6. perspective: 2000px;
  7. -webkit-box-sizing: border-box;
  8. -moz-box-sizing: border-box;
  9. -ms-box-sizing: border-box;
  10. box-sizing: border-box;
  11. }
  12. .ui.shape .sides {
  13. -webkit-transform-style: preserve-3d;
  14. -ms-transform-style: preserve-3d;
  15. transform-style: preserve-3d;
  16. }
  17. .ui.shape .side {
  18. opacity: 1;
  19. width: 100%;
  20. margin: 0!important;
  21. -webkit-backface-visibility: hidden;
  22. -ms-backface-visibility: hidden;
  23. backface-visibility: hidden;
  24. -webkit-box-sizing: border-box;
  25. -moz-box-sizing: border-box;
  26. -ms-box-sizing: border-box;
  27. box-sizing: border-box;
  28. }
  29. .ui.shape .side {
  30. display: none;
  31. }
  32. .ui.cube.shape .side {
  33. min-width: 15em;
  34. height: 15em;
  35. padding: 2em;
  36. background-color: #E6E6E6;
  37. color: rgba(0,0,0,.6);
  38. -webkit-box-shadow: 0 0 2px rgba(0,0,0,.3);
  39. box-shadow: 0 0 2px rgba(0,0,0,.3);
  40. }
  41. .ui.cube.shape .side>.content {
  42. width: 100%;
  43. height: 100%;
  44. display: table;
  45. text-align: center;
  46. -webkit-user-select: text;
  47. -moz-user-select: text;
  48. -ms-user-select: text;
  49. user-select: text;
  50. }
  51. .ui.cube.shape .side>.content>div {
  52. display: table-cell;
  53. vertical-align: middle;
  54. font-size: 2em;
  55. }
  56. .ui.text.shape.animating .sides {
  57. position: static;
  58. }
  59. .ui.text.shape .side {
  60. white-space: nowrap;
  61. }
  62. .ui.text.shape .side>* {
  63. white-space: normal;
  64. }
  65. .ui.loading.shape {
  66. position: absolute;
  67. top: -9999px;
  68. right: -9999px;
  69. }
  70. .ui.shape .animating.side {
  71. position: absolute;
  72. top: 0;
  73. right: 0;
  74. z-index: 100;
  75. }
  76. .ui.shape .hidden.side {
  77. opacity: .4;
  78. }
  79. .ui.shape.animating {
  80. -webkit-transition: all .6s ease-in-out;
  81. transition: all .6s ease-in-out;
  82. }
  83. .ui.shape.animating .sides {
  84. position: absolute;
  85. }
  86. .ui.shape.animating .sides {
  87. -webkit-transition: all .6s ease-in-out;
  88. transition: all .6s ease-in-out;
  89. }
  90. .ui.shape.animating .side {
  91. -webkit-transition: opacity .6s ease-in-out;
  92. transition: opacity .6s ease-in-out;
  93. }
  94. .ui.shape .active.side {
  95. display: block;
  96. }