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.

86 lines
1.9 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. left: 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: all 0.6s ease-in-out;
  62. -moz-transition: all 0.6s ease-in-out;
  63. -o-transition: all 0.6s ease-in-out;
  64. -ms-transition: all 0.6s ease-in-out;
  65. transition: all 0.6s ease-in-out;
  66. }
  67. .ui.shape.css .sides {
  68. -webkit-transition: all 0.6s ease-in-out;
  69. -moz-transition: all 0.6s ease-in-out;
  70. -o-transition: all 0.6s ease-in-out;
  71. -ms-transition: all 0.6s ease-in-out;
  72. transition: all 0.6s ease-in-out;
  73. }
  74. .ui.shape.css .side {
  75. -webkit-transition: opacity 0.6s ease-in-out;
  76. -moz-transition: opacity 0.6s ease-in-out;
  77. -o-transition: opacity 0.6s ease-in-out;
  78. -ms-transition: opacity 0.6s ease-in-out;
  79. transition: opacity 0.6s ease-in-out;
  80. }
  81. /*--------------
  82. Active
  83. ---------------*/
  84. .ui.shape .active.side {
  85. display: block;
  86. }