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.

87 lines
1.9 KiB

  1. /*
  2. * # Semantic Button
  3. * http://github.com/quirkyinc/semantic
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. * Released: April 17 2013
  11. */
  12. /*******************************
  13. Shape
  14. *******************************/
  15. .ui.shape {
  16. position: relative;
  17. -webkit-perspective: 2000px;
  18. -moz-perspective: 2000px;
  19. -ms-perspective: 2000px;
  20. perspective: 2000px;
  21. }
  22. .ui.shape .sides {
  23. -webkit-transform-style: preserve-3d;
  24. -moz-transform-style: preserve-3d;
  25. -ms-transform-style: preserve-3d;
  26. transform-style: preserve-3d;
  27. }
  28. .ui.shape .side {
  29. opacity: 1;
  30. width: 100%;
  31. -webkit-backface-visibility: hidden;
  32. -moz-backface-visibility: hidden;
  33. -ms-backface-visibility: hidden;
  34. backface-visibility: hidden;
  35. }
  36. .ui.shape .side {
  37. display: none;
  38. }
  39. /*******************************
  40. States
  41. *******************************/
  42. /*--------------
  43. Animating
  44. ---------------*/
  45. .ui.shape.animating .sides {
  46. position: absolute;
  47. }
  48. .ui.shape .animating.side {
  49. position: absolute;
  50. width: 100%;
  51. top: 0px;
  52. left: 0px;
  53. z-index: 100;
  54. }
  55. .ui.shape .hidden.side {
  56. opacity: 0.7;
  57. }
  58. /*--------------
  59. CSS
  60. ---------------*/
  61. .ui.shape.css {
  62. -webkit-transition: all 0.6s ease-in-out;
  63. -moz-transition: all 0.6s ease-in-out;
  64. -o-transition: all 0.6s ease-in-out;
  65. -ms-transition: all 0.6s ease-in-out;
  66. transition: all 0.6s ease-in-out;
  67. }
  68. .ui.shape.css .sides {
  69. -webkit-transition: all 0.6s ease-in-out;
  70. -moz-transition: all 0.6s ease-in-out;
  71. -o-transition: all 0.6s ease-in-out;
  72. -ms-transition: all 0.6s ease-in-out;
  73. transition: all 0.6s ease-in-out;
  74. }
  75. .ui.shape.css .side {
  76. -webkit-transition: opacity 0.6s ease-in-out;
  77. -moz-transition: opacity 0.6s ease-in-out;
  78. -o-transition: opacity 0.6s ease-in-out;
  79. -ms-transition: opacity 0.6s ease-in-out;
  80. transition: opacity 0.6s ease-in-out;
  81. }
  82. /*--------------
  83. Active
  84. ---------------*/
  85. .ui.shape .active.side {
  86. display: block;
  87. }