Advertisement
Guest User

Untitled

a guest
Oct 28th, 2015
6,164
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.16 KB | None | 0 0
  1. normalize-css()
  2.  
  3. // Material Shadows
  4. shadow-level(l = 1)
  5. if l == -1
  6. box-shadow: inset -2px 7px 9px -7px rgba(0,0,0,0.7);
  7. if l == 0
  8. box-shadow: none;
  9. if l == 1
  10. box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  11. if l == 2
  12. box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  13. if l == 3
  14. box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  15. if l == 4
  16. box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  17. if l == 5
  18. box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  19.  
  20. // Common Transition
  21. trans($sec = 0.3s)
  22. transition: all $sec ease
  23. // Grid
  24. $xsmall = 340px
  25. $small = 500px
  26. $med = 700px
  27. $large = 960px
  28. $wide = 1200px
  29.  
  30. // Colors
  31. black = #222
  32. grey = #D8D8D8
  33. light-grey = #EEE
  34. purp = #524763
  35. dark-purp = #373142
  36. red = #E54B4B
  37. teal = #82D8D8
  38. dark-teal = #66A6A6
  39. green = #CBE56C
  40. blue = #16528E
  41. bright-blue = #0082C8
  42. maroon = #6A2140
  43. light-red = #CA5765
  44. pink = #CF256D
  45. orange = #E8846B
  46.  
  47. z = {
  48. neg: -7,
  49. lowest: 1,
  50. low: 4,
  51. mid: 5,
  52. video: 6,
  53. header: 7,
  54. nav: 8,
  55. mini: 9,
  56. modal: 10,
  57. highest: 11
  58. }
  59.  
  60. social = {
  61. twitter: #00aced,
  62. facebook: #3b5998,
  63. google: #dd4b39,
  64. youtube: #bb0000
  65. }
  66.  
  67. $side-nav = 100px
  68. $side-nav-large = 200px
  69.  
  70. html
  71. box-sizing: border-box
  72.  
  73. *, *:before, *:after
  74. box-sizing: inherit
  75.  
  76. body
  77. background light-grey
  78. padding: 70px 0 150px
  79.  
  80. header
  81. color #FFF
  82. background: purp
  83. padding 20px
  84. fixed top left
  85. width 100%
  86. height 70px
  87. z-index: z.header
  88. shadow-level(2)
  89. clearfix()
  90. h1
  91. margin 0
  92. font-size 1.6em
  93. float left
  94. .login-buttons-dropdown-align-
  95. float right
  96. a
  97. color #FFF
  98. text-decoration none
  99.  
  100. p
  101. color #333
  102.  
  103. .page-title
  104. text-transform uppercase
  105. text-align center
  106. margin-bottom 30px
  107.  
  108. .billboard
  109. background dark-purp
  110. color #FFF
  111. font-size 2em
  112. text-align center
  113. padding 60px
  114. h2
  115. margin 0
  116.  
  117. .main-layout
  118. lost-center 90%
  119. margin-top 20px
  120. +above($med)
  121. lost-center 90%
  122. padding-left $side-nav
  123. +above($large)
  124. lost-center 80%
  125. margin-top 40px
  126. padding-left $side-nav-large
  127.  
  128. .new-recipe
  129. margin-bottom 20px
  130.  
  131. .new-recipe-container
  132. position relative
  133. background #FFF
  134. padding 20px
  135. margin-bottom 20px
  136. shadow-level(2)
  137. .fa-close
  138. position absolute
  139. top 0
  140. right 0
  141. padding 20px
  142. label
  143. display block
  144. margin-bottom 10px
  145. textarea, input
  146. width 100%
  147.  
  148. .btn, button
  149. display inline-block
  150. cursor pointer
  151. background purp
  152. color #FFF
  153. text-decoration none
  154. text-transform uppercase
  155. padding 5px 15px
  156. border solid 3px purp
  157. border-radius 2px
  158. font-weight 800
  159. shadow-level(1)
  160. trans()
  161. &:hover
  162. background @background - 20
  163. border-color @background
  164. shadow-level(2)
  165. &.btn-primary
  166. background teal
  167. border-color teal
  168. color dark-purp
  169. &:hover
  170. background @background - 40
  171. border-color @background
  172. &.btn-deny
  173. background red
  174. border solid 3px @background
  175. &:hover
  176. background @background - 20
  177. border-color @background
  178. &.btn-text
  179. color purp
  180. background transparent
  181. border solid 2px purp
  182. shadow-level(0)
  183. &:hover
  184. background teal
  185. border-color @background
  186. shadow-level(1)
  187. &.btn-text-dark
  188. color #FFF
  189. background transparent
  190. border solid 2px #FFF
  191. shadow-level(0)
  192. &:hover
  193. background #FFF
  194. color dark-purp
  195. border-color @background
  196. shadow-level(1)
  197. &.btn-confirmation
  198. color black
  199. background green
  200. border solid 2px @background
  201. &:hover
  202. background @background - 20
  203. border-color dark-purp
  204. &.btn-cancel
  205. color #FFF
  206. background transparent
  207. border solid 2px #FFF
  208. opacity 0.4
  209. shadow-level(-1)
  210. &:hover
  211. background red
  212. color #FFF
  213. opacity 1
  214. shadow-level(2)
  215. border-color @background
  216.  
  217. input, select, textarea
  218. color purp
  219. background #FFF
  220. border solid 2px light-grey
  221. border-radius 2px
  222. font-weight 800
  223. width 100%
  224. padding 6px 10px
  225. margin-bottom 10px
  226. &.static-input
  227. border none
  228. background transparent
  229.  
  230. .list-group
  231. list-style none
  232. padding 0
  233.  
  234. .panel-body
  235. .form-group
  236. lost-column 1/2
  237.  
  238. .autoform-remove-item.btn
  239. background light-grey
  240. box-shadow none
  241. border none
  242. border-radius 50%
  243. font-size 1em
  244. height: 25px
  245. width: 25px
  246. text-align: center
  247. display: block
  248. padding: 0
  249.  
  250. .autoform-add-item.btn
  251. width 100%
  252. border-radius 0
  253. border none
  254. box-shadow none
  255. background light-grey
  256.  
  257.  
  258. .autoform-remove-item-wrap
  259. vertical-align middle
  260.  
  261. .side-nav
  262. fixed bottom left
  263. height 100px
  264. width 100%
  265. overflow hidden
  266. background dark-purp
  267. color #FFF
  268. z-index: z.header
  269. shadow-level(2)
  270. ul
  271. margin 0
  272. padding 0
  273. display flex
  274. justify-content space-between
  275. list-style none
  276. a
  277. color #FFF
  278. text-decoration none
  279. padding 20px 20px
  280. display block
  281. text-align center
  282. trans()
  283. &:hover, &.active
  284. background purp
  285. i
  286. display block
  287. font-size 2em
  288. margin-bottom 10px
  289. +above($med)
  290. height 100%
  291. z-index: z.mid
  292. padding 120px 0
  293. fixed top left
  294. width $side-nav
  295. ul
  296. display block
  297. shadow-level(-1)
  298. a
  299. padding 20px 10px
  300. &:hover, &.active
  301. border-left 4px solid teal
  302. +above($large)
  303. width $side-nav-large
  304. a
  305. padding 20px 20px
  306. &:hover, &.active
  307. border-left 10px solid teal
  308.  
  309. .recipe
  310. background #FFF
  311. padding 0 20px 20px
  312. margin-bottom 20px
  313. position relative
  314. z-index 1
  315. shadow-level(1)
  316. trans()
  317. .remove-from-menu
  318. display none
  319. &.in-menu
  320. background teal
  321. color #FFF
  322. h3
  323. border-bottom: rgba(255,255,255, 0.6) solid 3px
  324. .add-to-menu
  325. display none
  326. .remove-from-menu
  327. display block
  328. h3
  329. font-size: 3em;
  330. opacity: 0.3;
  331. border-bottom: rgba(0,0,0, 0.3) solid 3px
  332. margin-top 0
  333. margin-bottom 10px
  334. button
  335. margin-top 20px
  336. .fa-trash
  337. opacity 0.3
  338. cursor pointer
  339. position absolute
  340. top 0
  341. right 0
  342. font-size 1.6em
  343. display block
  344. padding 20px
  345. color black
  346. trans()
  347. &:hover
  348. color red
  349. opacity 0.6
  350. .ingredient
  351. display inline-block
  352. margin-right 10px
  353. font-size 1.2em
  354. &:hover
  355. shadow-level(3)
  356. // animation card 0.6s ease 1 forwards
  357.  
  358. @keyframes card
  359. 0%
  360. transform translate3d(0, 0, 0)
  361. 50%
  362. transform translate3d(0, -135px, 0)
  363. 51%
  364. z-index 10
  365. transform translate3d(0, -135px, 0)
  366. 100%
  367. z-index 10
  368. transform translate3d(0, 0, 0)
  369.  
  370.  
  371. .menu-item
  372. @extend .recipe
  373.  
  374. .shopping-list
  375. @extend .recipe
  376. padding 50px 5%
  377. list-style none
  378. li
  379. font-size 2em
  380. padding 20px
  381. border-bottom 1px solid light-grey
  382. border-top 1px solid light-grey
  383. & + li
  384. border-top none
  385.  
  386. .login-buttons-dropdown-align-
  387. #login-dropdown-list
  388. right 0
  389. left auto
  390. a
  391. color dark-purp
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement