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.

267 lines
6.8 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic - Shape
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Theme
  13. *******************************/
  14. /*
  15. */
  16. /*******************************
  17. Folders
  18. *******************************/
  19. /* Path to theme packages */
  20. /* Path to site override folder */
  21. /*******************************
  22. Themes
  23. *******************************/
  24. /* To override a theme for an individual element
  25. specify theme name below
  26. Be sure to update the user folder name (see README)
  27. */
  28. /* Global */
  29. /* Elements */
  30. /* Collections */
  31. /* Modules */
  32. /* Views */
  33. /*******************************
  34. Import Directives
  35. *******************************/
  36. /*------------------
  37. Load Default
  38. -------------------*/
  39. /*******************************
  40. Site Variables
  41. *******************************/
  42. /*-------------------
  43. Paths
  44. --------------------*/
  45. /*-------------------
  46. Page
  47. --------------------*/
  48. /*-------------------
  49. Grid
  50. --------------------*/
  51. /*-------------------
  52. Breakpoints
  53. --------------------*/
  54. /*-------------------
  55. Fonts
  56. --------------------*/
  57. /*-------------------
  58. Icons
  59. --------------------*/
  60. /* Max Width of Icon */
  61. /*-------------------
  62. Easing
  63. --------------------*/
  64. /*******************************
  65. BG Colors
  66. *******************************/
  67. /*******************************
  68. Colors
  69. *******************************/
  70. /*--- Colors ---*/
  71. /*--- Neutrals ---*/
  72. /*--- Text Colors ---*/
  73. /* Preserve */
  74. /* Adjust for Legibility */
  75. /*--- Backgrounds ---*/
  76. /*-------------------
  77. Emotive Colors
  78. --------------------*/
  79. /* Positive / Negative */
  80. /* Messages */
  81. /*-------------------
  82. Text Colors
  83. --------------------*/
  84. /*-------------------
  85. Brand Colors
  86. --------------------*/
  87. /*-------------------
  88. Borders
  89. --------------------*/
  90. /*-------------------
  91. Sizes
  92. --------------------*/
  93. /*-------------------
  94. Transitions
  95. --------------------*/
  96. /*******************************
  97. States
  98. *******************************/
  99. /*-------------------
  100. Disabled
  101. --------------------*/
  102. /*-------------------
  103. Hover
  104. --------------------*/
  105. /*--- Colors ---*/
  106. /*--- Emotive ---*/
  107. /*--- Neutrals ---*/
  108. /*-------------------
  109. Down (:active)
  110. --------------------*/
  111. /*--- Colors ---*/
  112. /*--- Emotive ---*/
  113. /*--- Neutrals ---*/
  114. /*-------------------
  115. Active
  116. --------------------*/
  117. /*--- Standard ---*/
  118. /*--- Emotive ---*/
  119. /*--- Neutrals ---*/
  120. /*******************************
  121. Shape
  122. *******************************/
  123. /* Animating */
  124. /* Side */
  125. /*--------------
  126. Types
  127. ---------------*/
  128. /* Cube */
  129. /*------------------
  130. Load Theme
  131. -------------------*/
  132. /*------------------
  133. Load Site
  134. -------------------*/
  135. /*******************************
  136. User Global Variables
  137. *******************************/
  138. /*******************************
  139. User Variable Overrides
  140. *******************************/
  141. /*------------------
  142. Override Mix-in
  143. -------------------*/
  144. /*******************************
  145. Shape
  146. *******************************/
  147. .ui.shape {
  148. position: relative;
  149. display: inline-block;
  150. -webkit-perspective: 2000px;
  151. perspective: 2000px;
  152. }
  153. .ui.shape .sides {
  154. -webkit-transform-style: preserve-3d;
  155. transform-style: preserve-3d;
  156. }
  157. .ui.shape .side {
  158. opacity: 1;
  159. width: 100%;
  160. margin: 0em !important;
  161. -webkit-backface-visibility: hidden;
  162. backface-visibility: hidden;
  163. }
  164. .ui.shape .side {
  165. display: none;
  166. }
  167. /*******************************
  168. Types
  169. *******************************/
  170. .ui.cube.shape .side {
  171. min-width: 15em;
  172. height: 15em;
  173. padding: 2em;
  174. background-color: #e6e6e6;
  175. color: rgba(0, 0, 0, 0.8);
  176. -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  177. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  178. }
  179. .ui.cube.shape .side > .content {
  180. width: 100%;
  181. height: 100%;
  182. display: table;
  183. text-align: center;
  184. -webkit-user-select: text;
  185. -moz-user-select: text;
  186. -ms-user-select: text;
  187. user-select: text;
  188. }
  189. .ui.cube.shape .side > .content > div {
  190. display: table-cell;
  191. vertical-align: middle;
  192. font-size: 2em;
  193. }
  194. /*******************************
  195. Variations
  196. *******************************/
  197. .ui.text.shape.animating .sides {
  198. position: static;
  199. }
  200. .ui.text.shape .side {
  201. white-space: nowrap;
  202. }
  203. .ui.text.shape .side > * {
  204. white-space: normal;
  205. }
  206. /*******************************
  207. States
  208. *******************************/
  209. /*--------------
  210. Loading
  211. ---------------*/
  212. .ui.loading.shape {
  213. position: absolute;
  214. top: -9999px;
  215. left: -9999px;
  216. }
  217. /*--------------
  218. Animating
  219. ---------------*/
  220. .ui.shape .animating.side {
  221. position: absolute;
  222. top: 0px;
  223. left: 0px;
  224. z-index: 100;
  225. }
  226. .ui.shape .hidden.side {
  227. opacity: 0.4;
  228. }
  229. /*--------------
  230. CSS
  231. ---------------*/
  232. .ui.shape.animating {
  233. -webkit-transition: all 0.6s ease-in-out;
  234. transition: all 0.6s ease-in-out;
  235. }
  236. .ui.shape.animating .sides {
  237. position: absolute;
  238. }
  239. .ui.shape.animating .sides {
  240. -webkit-transition: all 0.6s ease-in-out;
  241. transition: all 0.6s ease-in-out;
  242. }
  243. .ui.shape.animating .side {
  244. -webkit-transition: opacity 0.6s ease-in-out;
  245. transition: opacity 0.6s ease-in-out;
  246. }
  247. /*--------------
  248. Active
  249. ---------------*/
  250. .ui.shape .active.side {
  251. display: block;
  252. }
  253. /*******************************
  254. Overrides
  255. *******************************/
  256. /*******************************
  257. User Overrides
  258. *******************************/