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.

109 lines
1.9 KiB

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