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.

388 lines
9.4 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
  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 Defaults
  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. /* Status */
  86. /*-------------------
  87. Neutral Text
  88. --------------------*/
  89. /*-------------------
  90. Brand Colors
  91. --------------------*/
  92. /*-------------------
  93. Borders
  94. --------------------*/
  95. /*-------------------
  96. Sizes
  97. --------------------*/
  98. /*-------------------
  99. Transitions
  100. --------------------*/
  101. /*-------------------
  102. Derived Values
  103. --------------------*/
  104. /* Makes sure padded grid can fit at 320px */
  105. /* Used to match floats with text */
  106. /* Positive / Negative Dupes */
  107. /* Header Colors */
  108. /* Responsive */
  109. /* Columns */
  110. /*******************************
  111. States
  112. *******************************/
  113. /*-------------------
  114. Disabled
  115. --------------------*/
  116. /*-------------------
  117. Hover
  118. --------------------*/
  119. /*--- Colors ---*/
  120. /*--- Emotive ---*/
  121. /*--- Neutrals ---*/
  122. /*-------------------
  123. Down (:active)
  124. --------------------*/
  125. /*--- Colors ---*/
  126. /*--- Emotive ---*/
  127. /*--- Neutrals ---*/
  128. /*-------------------
  129. Active
  130. --------------------*/
  131. /*--- Standard ---*/
  132. /*--- Emotive ---*/
  133. /*--- Neutrals ---*/
  134. /*******************************
  135. Shape
  136. *******************************/
  137. /* Animating */
  138. /* Side */
  139. /*--------------
  140. Types
  141. ---------------*/
  142. /* Cube */
  143. /*------------------
  144. Load Theme
  145. -------------------*/
  146. /*******************************
  147. Site Settings
  148. *******************************/
  149. /*-------------------
  150. Paths
  151. --------------------*/
  152. /*-------------------
  153. Fonts
  154. --------------------*/
  155. /*-------------------
  156. Site Colors
  157. --------------------*/
  158. /*--- Colors ---*/
  159. /*--- Light Colors ---*/
  160. /*-------------------
  161. Page
  162. --------------------*/
  163. /*-------------------
  164. Background Colors
  165. --------------------*/
  166. /* Used for differentiating neutrals */
  167. /* Used for differentiating layers */
  168. /*-------------------
  169. Grid
  170. --------------------*/
  171. /*-------------------
  172. Breakpoints
  173. --------------------*/
  174. /*******************************
  175. Power-User
  176. *******************************/
  177. /*-------------------
  178. Icons
  179. --------------------*/
  180. /* Max Width of Icon */
  181. /*-------------------
  182. Easing
  183. --------------------*/
  184. /*--- Neutrals ---*/
  185. /*--- Colored Backgrounds ---*/
  186. /*--- Colored Text ---*/
  187. /*--- Colored Headers ---*/
  188. /*-------------------
  189. Emotive Colors
  190. --------------------*/
  191. /* Mood */
  192. /* Status */
  193. /*-------------------
  194. Neutral Text
  195. --------------------*/
  196. /*-------------------
  197. Brand Colors
  198. --------------------*/
  199. /*-------------------
  200. Borders
  201. --------------------*/
  202. /*-------------------
  203. Sizes
  204. --------------------*/
  205. /*-------------------
  206. Transitions
  207. --------------------*/
  208. /*-------------------
  209. Derived Values
  210. --------------------*/
  211. /* Makes sure padded grid can fit at 320px */
  212. /* Used to match floats with text */
  213. /* Positive / Negative Dupes */
  214. /* Header Colors */
  215. /* Responsive */
  216. /* Columns */
  217. /*******************************
  218. States
  219. *******************************/
  220. /*-------------------
  221. Disabled
  222. --------------------*/
  223. /*-------------------
  224. Hover
  225. --------------------*/
  226. /*--- Colors ---*/
  227. /*--- Emotive ---*/
  228. /*--- Neutrals ---*/
  229. /*-------------------
  230. Down (:active)
  231. --------------------*/
  232. /*--- Colors ---*/
  233. /*--- Emotive ---*/
  234. /*--- Neutrals ---*/
  235. /*-------------------
  236. Active
  237. --------------------*/
  238. /*--- Standard ---*/
  239. /*--- Emotive ---*/
  240. /*--- Neutrals ---*/
  241. /*******************************
  242. Shape
  243. *******************************/
  244. /* Animating */
  245. /* Side */
  246. /*--------------
  247. Types
  248. ---------------*/
  249. /* Cube */
  250. /*------------------
  251. Load Site
  252. -------------------*/
  253. /*******************************
  254. User Global Variables
  255. *******************************/
  256. /*******************************
  257. User Variable Overrides
  258. *******************************/
  259. /*------------------
  260. Override Loader
  261. -------------------*/
  262. /*******************************
  263. Shape
  264. *******************************/
  265. .ui.shape {
  266. position: relative;
  267. display: inline-block;
  268. -webkit-perspective: 2000px;
  269. perspective: 2000px;
  270. }
  271. .ui.shape .sides {
  272. -webkit-transform-style: preserve-3d;
  273. transform-style: preserve-3d;
  274. }
  275. .ui.shape .side {
  276. opacity: 1;
  277. width: 100%;
  278. margin: 0em !important;
  279. -webkit-backface-visibility: hidden;
  280. backface-visibility: hidden;
  281. }
  282. .ui.shape .side {
  283. display: none;
  284. }
  285. .ui.shape .side > * {
  286. -webkit-backface-visibility: visible !important;
  287. backface-visibility: visible !important;
  288. }
  289. /*******************************
  290. Types
  291. *******************************/
  292. .ui.cube.shape .side {
  293. min-width: 15em;
  294. height: 15em;
  295. padding: 2em;
  296. background-color: #e6e6e6;
  297. color: rgba(0, 0, 0, 0.8);
  298. box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
  299. }
  300. .ui.cube.shape .side > .content {
  301. width: 100%;
  302. height: 100%;
  303. display: table;
  304. text-align: center;
  305. -webkit-user-select: text;
  306. -moz-user-select: text;
  307. -ms-user-select: text;
  308. user-select: text;
  309. }
  310. .ui.cube.shape .side > .content > div {
  311. display: table-cell;
  312. vertical-align: middle;
  313. font-size: 2em;
  314. }
  315. /*******************************
  316. Variations
  317. *******************************/
  318. .ui.text.shape.animating .sides {
  319. position: static;
  320. }
  321. .ui.text.shape .side {
  322. white-space: nowrap;
  323. }
  324. .ui.text.shape .side > * {
  325. white-space: normal;
  326. }
  327. /*******************************
  328. States
  329. *******************************/
  330. /*--------------
  331. Loading
  332. ---------------*/
  333. .ui.loading.shape {
  334. position: absolute;
  335. top: -9999px;
  336. left: -9999px;
  337. }
  338. /*--------------
  339. Animating
  340. ---------------*/
  341. .ui.shape .animating.side {
  342. position: absolute;
  343. top: 0px;
  344. left: 0px;
  345. z-index: 100;
  346. }
  347. .ui.shape .hidden.side {
  348. opacity: 0.4;
  349. }
  350. /*--------------
  351. CSS
  352. ---------------*/
  353. .ui.shape.animating {
  354. -webkit-transition: all 0.6s ease-in-out;
  355. transition: all 0.6s ease-in-out;
  356. }
  357. .ui.shape.animating .sides {
  358. position: absolute;
  359. }
  360. .ui.shape.animating .sides {
  361. -webkit-transition: all 0.6s ease-in-out;
  362. transition: all 0.6s ease-in-out;
  363. }
  364. .ui.shape.animating .side {
  365. -webkit-transition: opacity 0.6s ease-in-out;
  366. transition: opacity 0.6s ease-in-out;
  367. }
  368. /*--------------
  369. Active
  370. ---------------*/
  371. .ui.shape .active.side {
  372. display: block;
  373. }
  374. /*******************************
  375. Overrides
  376. *******************************/
  377. /*******************************
  378. User Overrides
  379. *******************************/