Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- normalize-css()
- // Material Shadows
- shadow-level(l = 1)
- if l == -1
- box-shadow: inset -2px 7px 9px -7px rgba(0,0,0,0.7);
- if l == 0
- box-shadow: none;
- if l == 1
- box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
- if l == 2
- box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
- if l == 3
- box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
- if l == 4
- box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
- if l == 5
- box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
- // Common Transition
- trans($sec = 0.3s)
- transition: all $sec ease
- // Grid
- $xsmall = 340px
- $small = 500px
- $med = 700px
- $large = 960px
- $wide = 1200px
- // Colors
- black = #222
- grey = #D8D8D8
- light-grey = #EEE
- purp = #524763
- dark-purp = #373142
- red = #E54B4B
- teal = #82D8D8
- dark-teal = #66A6A6
- green = #CBE56C
- blue = #16528E
- bright-blue = #0082C8
- maroon = #6A2140
- light-red = #CA5765
- pink = #CF256D
- orange = #E8846B
- z = {
- neg: -7,
- lowest: 1,
- low: 4,
- mid: 5,
- video: 6,
- header: 7,
- nav: 8,
- mini: 9,
- modal: 10,
- highest: 11
- }
- social = {
- twitter: #00aced,
- facebook: #3b5998,
- google: #dd4b39,
- youtube: #bb0000
- }
- $side-nav = 100px
- $side-nav-large = 200px
- html
- box-sizing: border-box
- *, *:before, *:after
- box-sizing: inherit
- body
- background light-grey
- padding: 70px 0 150px
- header
- color #FFF
- background: purp
- padding 20px
- fixed top left
- width 100%
- height 70px
- z-index: z.header
- shadow-level(2)
- clearfix()
- h1
- margin 0
- font-size 1.6em
- float left
- .login-buttons-dropdown-align-
- float right
- a
- color #FFF
- text-decoration none
- p
- color #333
- .page-title
- text-transform uppercase
- text-align center
- margin-bottom 30px
- .billboard
- background dark-purp
- color #FFF
- font-size 2em
- text-align center
- padding 60px
- h2
- margin 0
- .main-layout
- lost-center 90%
- margin-top 20px
- +above($med)
- lost-center 90%
- padding-left $side-nav
- +above($large)
- lost-center 80%
- margin-top 40px
- padding-left $side-nav-large
- .new-recipe
- margin-bottom 20px
- .new-recipe-container
- position relative
- background #FFF
- padding 20px
- margin-bottom 20px
- shadow-level(2)
- .fa-close
- position absolute
- top 0
- right 0
- padding 20px
- label
- display block
- margin-bottom 10px
- textarea, input
- width 100%
- .btn, button
- display inline-block
- cursor pointer
- background purp
- color #FFF
- text-decoration none
- text-transform uppercase
- padding 5px 15px
- border solid 3px purp
- border-radius 2px
- font-weight 800
- shadow-level(1)
- trans()
- &:hover
- background @background - 20
- border-color @background
- shadow-level(2)
- &.btn-primary
- background teal
- border-color teal
- color dark-purp
- &:hover
- background @background - 40
- border-color @background
- &.btn-deny
- background red
- border solid 3px @background
- &:hover
- background @background - 20
- border-color @background
- &.btn-text
- color purp
- background transparent
- border solid 2px purp
- shadow-level(0)
- &:hover
- background teal
- border-color @background
- shadow-level(1)
- &.btn-text-dark
- color #FFF
- background transparent
- border solid 2px #FFF
- shadow-level(0)
- &:hover
- background #FFF
- color dark-purp
- border-color @background
- shadow-level(1)
- &.btn-confirmation
- color black
- background green
- border solid 2px @background
- &:hover
- background @background - 20
- border-color dark-purp
- &.btn-cancel
- color #FFF
- background transparent
- border solid 2px #FFF
- opacity 0.4
- shadow-level(-1)
- &:hover
- background red
- color #FFF
- opacity 1
- shadow-level(2)
- border-color @background
- input, select, textarea
- color purp
- background #FFF
- border solid 2px light-grey
- border-radius 2px
- font-weight 800
- width 100%
- padding 6px 10px
- margin-bottom 10px
- &.static-input
- border none
- background transparent
- .list-group
- list-style none
- padding 0
- .panel-body
- .form-group
- lost-column 1/2
- .autoform-remove-item.btn
- background light-grey
- box-shadow none
- border none
- border-radius 50%
- font-size 1em
- height: 25px
- width: 25px
- text-align: center
- display: block
- padding: 0
- .autoform-add-item.btn
- width 100%
- border-radius 0
- border none
- box-shadow none
- background light-grey
- .autoform-remove-item-wrap
- vertical-align middle
- .side-nav
- fixed bottom left
- height 100px
- width 100%
- overflow hidden
- background dark-purp
- color #FFF
- z-index: z.header
- shadow-level(2)
- ul
- margin 0
- padding 0
- display flex
- justify-content space-between
- list-style none
- a
- color #FFF
- text-decoration none
- padding 20px 20px
- display block
- text-align center
- trans()
- &:hover, &.active
- background purp
- i
- display block
- font-size 2em
- margin-bottom 10px
- +above($med)
- height 100%
- z-index: z.mid
- padding 120px 0
- fixed top left
- width $side-nav
- ul
- display block
- shadow-level(-1)
- a
- padding 20px 10px
- &:hover, &.active
- border-left 4px solid teal
- +above($large)
- width $side-nav-large
- a
- padding 20px 20px
- &:hover, &.active
- border-left 10px solid teal
- .recipe
- background #FFF
- padding 0 20px 20px
- margin-bottom 20px
- position relative
- z-index 1
- shadow-level(1)
- trans()
- .remove-from-menu
- display none
- &.in-menu
- background teal
- color #FFF
- h3
- border-bottom: rgba(255,255,255, 0.6) solid 3px
- .add-to-menu
- display none
- .remove-from-menu
- display block
- h3
- font-size: 3em;
- opacity: 0.3;
- border-bottom: rgba(0,0,0, 0.3) solid 3px
- margin-top 0
- margin-bottom 10px
- button
- margin-top 20px
- .fa-trash
- opacity 0.3
- cursor pointer
- position absolute
- top 0
- right 0
- font-size 1.6em
- display block
- padding 20px
- color black
- trans()
- &:hover
- color red
- opacity 0.6
- .ingredient
- display inline-block
- margin-right 10px
- font-size 1.2em
- &:hover
- shadow-level(3)
- // animation card 0.6s ease 1 forwards
- @keyframes card
- 0%
- transform translate3d(0, 0, 0)
- 50%
- transform translate3d(0, -135px, 0)
- 51%
- z-index 10
- transform translate3d(0, -135px, 0)
- 100%
- z-index 10
- transform translate3d(0, 0, 0)
- .menu-item
- @extend .recipe
- .shopping-list
- @extend .recipe
- padding 50px 5%
- list-style none
- li
- font-size 2em
- padding 20px
- border-bottom 1px solid light-grey
- border-top 1px solid light-grey
- & + li
- border-top none
- .login-buttons-dropdown-align-
- #login-dropdown-list
- right 0
- left auto
- a
- color dark-purp
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement