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.

276 lines
7.0 KiB

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 2014 Contributor
  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 Settings
  41. *******************************/
  42. /*-------------------
  43. Paths
  44. --------------------*/
  45. /*-------------------
  46. Fonts
  47. --------------------*/
  48. /*-------------------
  49. Site Colors
  50. --------------------*/
  51. /*--- Colors ---*/
  52. /*--- Light Colors ---*/
  53. /*-------------------
  54. Page
  55. --------------------*/
  56. /*-------------------
  57. Background Colors
  58. --------------------*/
  59. /* Used for differentiating neutrals */
  60. /* Used for differentiating layers */
  61. /*-------------------
  62. Grid
  63. --------------------*/
  64. /*-------------------
  65. Breakpoints
  66. --------------------*/
  67. /*******************************
  68. Power-User
  69. *******************************/
  70. /*-------------------
  71. Icons
  72. --------------------*/
  73. /* Max Width of Icon */
  74. /*-------------------
  75. Easing
  76. --------------------*/
  77. /*--- Neutrals ---*/
  78. /*--- Colored Backgrounds ---*/
  79. /*--- Colored Text ---*/
  80. /*--- Colored Headers ---*/
  81. /*-------------------
  82. Emotive Colors
  83. --------------------*/
  84. /* Mood */
  85. /* Solid Background Color */
  86. /* Status */
  87. /* Darkened Headers */
  88. /*-------------------
  89. Neutral Text
  90. --------------------*/
  91. /*-------------------
  92. Brand Colors
  93. --------------------*/
  94. /*-------------------
  95. Grid Columns
  96. --------------------*/
  97. /*-------------------
  98. Borders
  99. --------------------*/
  100. /*-------------------
  101. Sizes
  102. --------------------*/
  103. /*-------------------
  104. Transitions
  105. --------------------*/
  106. /*******************************
  107. States
  108. *******************************/
  109. /*-------------------
  110. Disabled
  111. --------------------*/
  112. /*-------------------
  113. Hover
  114. --------------------*/
  115. /*--- Colors ---*/
  116. /*--- Emotive ---*/
  117. /*--- Neutrals ---*/
  118. /*-------------------
  119. Down (:active)
  120. --------------------*/
  121. /*--- Colors ---*/
  122. /*--- Emotive ---*/
  123. /*--- Neutrals ---*/
  124. /*-------------------
  125. Active
  126. --------------------*/
  127. /*--- Standard ---*/
  128. /*--- Emotive ---*/
  129. /*--- Neutrals ---*/
  130. /*******************************
  131. Shape
  132. *******************************/
  133. /* Animating */
  134. /* Side */
  135. /*--------------
  136. Types
  137. ---------------*/
  138. /* Cube */
  139. /*------------------
  140. Load Theme
  141. -------------------*/
  142. /*------------------
  143. Load Site
  144. -------------------*/
  145. /*******************************
  146. User Global Variables
  147. *******************************/
  148. /*******************************
  149. User Variable Overrides
  150. *******************************/
  151. /*------------------
  152. Override Mix-in
  153. -------------------*/
  154. /*******************************
  155. Shape
  156. *******************************/
  157. .ui.shape {
  158. position: relative;
  159. display: inline-block;
  160. -webkit-perspective: 2000px;
  161. perspective: 2000px;
  162. }
  163. .ui.shape .sides {
  164. -webkit-transform-style: preserve-3d;
  165. transform-style: preserve-3d;
  166. }
  167. .ui.shape .side {
  168. opacity: 1;
  169. width: 100%;
  170. margin: 0em !important;
  171. -webkit-backface-visibility: hidden;
  172. backface-visibility: hidden;
  173. }
  174. .ui.shape .side {
  175. display: none;
  176. }
  177. /*******************************
  178. Types
  179. *******************************/
  180. .ui.cube.shape .side {
  181. min-width: 15em;
  182. height: 15em;
  183. padding: 2em;
  184. background-color: #e6e6e6;
  185. color: rgba(0, 0, 0, 0.8);
  186. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  187. }
  188. .ui.cube.shape .side > .content {
  189. width: 100%;
  190. height: 100%;
  191. display: table;
  192. text-align: center;
  193. -webkit-user-select: text;
  194. -moz-user-select: text;
  195. -ms-user-select: text;
  196. user-select: text;
  197. }
  198. .ui.cube.shape .side > .content > div {
  199. display: table-cell;
  200. vertical-align: middle;
  201. font-size: 2em;
  202. }
  203. /*******************************
  204. Variations
  205. *******************************/
  206. .ui.text.shape.animating .sides {
  207. position: static;
  208. }
  209. .ui.text.shape .side {
  210. white-space: nowrap;
  211. }
  212. .ui.text.shape .side > * {
  213. white-space: normal;
  214. }
  215. /*******************************
  216. States
  217. *******************************/
  218. /*--------------
  219. Loading
  220. ---------------*/
  221. .ui.loading.shape {
  222. position: absolute;
  223. top: -9999px;
  224. left: -9999px;
  225. }
  226. /*--------------
  227. Animating
  228. ---------------*/
  229. .ui.shape .animating.side {
  230. position: absolute;
  231. top: 0px;
  232. left: 0px;
  233. z-index: 100;
  234. }
  235. .ui.shape .hidden.side {
  236. opacity: 0.4;
  237. }
  238. /*--------------
  239. CSS
  240. ---------------*/
  241. .ui.shape.animating {
  242. -webkit-transition: all 0.6s ease-in-out;
  243. transition: all 0.6s ease-in-out;
  244. }
  245. .ui.shape.animating .sides {
  246. position: absolute;
  247. }
  248. .ui.shape.animating .sides {
  249. -webkit-transition: all 0.6s ease-in-out;
  250. transition: all 0.6s ease-in-out;
  251. }
  252. .ui.shape.animating .side {
  253. -webkit-transition: opacity 0.6s ease-in-out;
  254. transition: opacity 0.6s ease-in-out;
  255. }
  256. /*--------------
  257. Active
  258. ---------------*/
  259. .ui.shape .active.side {
  260. display: block;
  261. }
  262. /*******************************
  263. Overrides
  264. *******************************/
  265. /*******************************
  266. User Overrides
  267. *******************************/