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. /*
  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. position: relative;
  16. -webkit-perspective: 2000px;
  17. -moz-perspective: 2000px;
  18. -ms-perspective: 2000px;
  19. perspective: 2000px;
  20. }
  21. .ui.shape .sides {
  22. -webkit-transform-style: preserve-3d;
  23. -moz-transform-style: preserve-3d;
  24. -ms-transform-style: preserve-3d;
  25. transform-style: preserve-3d;
  26. }
  27. .ui.shape .side {
  28. opacity: 1;
  29. width: 100%;
  30. -webkit-backface-visibility: hidden;
  31. -moz-backface-visibility: hidden;
  32. -ms-backface-visibility: hidden;
  33. backface-visibility: hidden;
  34. }
  35. .ui.shape .side {
  36. display: none;
  37. }
  38. /*******************************
  39. States
  40. *******************************/
  41. /*--------------
  42. Animating
  43. ---------------*/
  44. .ui.shape.animating .sides {
  45. position: absolute;
  46. }
  47. .ui.shape .animating.side {
  48. position: absolute;
  49. width: 100%;
  50. top: 0px;
  51. right: 0px;
  52. z-index: 100;
  53. }
  54. .ui.shape .hidden.side {
  55. opacity: 0.4;
  56. }
  57. /*--------------
  58. CSS
  59. ---------------*/
  60. .ui.shape.css {
  61. -webkit-transition:
  62. all 0.6s ease-in-out;
  63. ;
  64. -moz-transition:
  65. all 0.6s ease-in-out;
  66. ;
  67. -o-transition:
  68. all 0.6s ease-in-out;
  69. ;
  70. -ms-transition:
  71. all 0.6s ease-in-out;
  72. ;
  73. transition:
  74. all 0.6s ease-in-out;
  75. ;
  76. }
  77. .ui.shape.css .sides {
  78. -webkit-transition: all 0.6s ease-in-out;
  79. -moz-transition: all 0.6s ease-in-out;
  80. -o-transition: all 0.6s ease-in-out;
  81. -ms-transition: all 0.6s ease-in-out;
  82. transition: all 0.6s ease-in-out;
  83. }
  84. .ui.shape.css .side {
  85. -webkit-transition: opacity 0.6s ease-in-out;
  86. -moz-transition: opacity 0.6s ease-in-out;
  87. -o-transition: opacity 0.6s ease-in-out;
  88. -ms-transition: opacity 0.6s ease-in-out;
  89. transition: opacity 0.6s ease-in-out;
  90. }
  91. /*--------------
  92. Active
  93. ---------------*/
  94. .ui.shape .active.side {
  95. display: block;
  96. }