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

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  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. }