app/assets/stylesheets/_layout.sass
body
display: flex
min-height: 100vh
flex-direction: column
zoom: 100%
main
flex: 1 0 auto
.no-border
border: 0 !important
.m-0
margin: 0 !important
.full-width
width: 100% !important
.width-auto
width: auto !important
.text-center
text-align: center
.text-left
text-align: left
.text-right
text-align: right
.absolute-bottom
position: absolute
bottom: 0
left: 0
right: 0
.absolute-cover
position: absolute
top: 0
bottom: 0
left: 0
right: 0
li.user-details
background-size: cover
margin-bottom: 15px
padding: 15px 0px 0px 15px
.profile-btn
margin: 0 !important
text-transform: capitalize !important
padding: 0 !important
text-shadow: 1px 1px 1px #444 !important
font-size: 15px !important
.profile-toggle
line-height: inherit
width: 2rem
font-size: 1.6rem
display: block
float: left
text-align: center
margin-right: 1rem
.box-shadow-0
box-shadow: none !important
border: 0 !important
.p-0
padding-left: 0 !important
padding-right: 0 !important
.no-wrap
white-space: nowrap
.mb-5
margin-bottom: 5em
// Margins and Padding
// -------------------------
$space-list: 0, .5, 1, 2, 3, 5
@each $current-space in $space-list
$i: index($space-list, $current-space) - 1
.m-#{$i}
margin: 1rem * $current-space !important
.mt-#{$i}
margin-top: 1rem * $current-space !important
.mb-#{$i}
margin-bottom: 1rem * $current-space !important
.ml-#{$i}
margin-left: 1rem * $current-space !important
.mr-#{$i}
margin-right: 1rem * $current-space !important
.my-#{$i}
padding-top: 1rem * $current-space !important
padding-bottom: 1rem * $current-space !important
.mx-#{$i}
padding-left: 1rem * $current-space !important
padding-right: 1rem * $current-space !important
.p-#{$i}
padding: 1rem * $current-space !important
.pt-#{$i}
padding-top: 1rem * $current-space !important
.pb-#{$i}
padding-bottom: 1rem * $current-space !important
.py-#{$i}
padding-top: 1rem * $current-space !important
padding-bottom: 1rem * $current-space !important
.px-#{$i}
padding-left: 1rem * $current-space !important
padding-right: 1rem * $current-space !important
.pl-#{$i}
padding-left: 1rem * $current-space !important
.pr-#{$i}
padding-right: 1rem * $current-space !important
.py-0
padding-top: 0 !important
padding-bottom: 0 !important
.mb-0
margin-bottom: 0 !important
.ml-md-3
@media (max-width: 991px)
margin-left: 3rem
.position-relative
position: relative
.overflow-visible
overflow: visible
.collection
.collection-item
border-bottom: 1px solid $black2
.width-auto
width: auto !important
.sticky
position: sticky
top: 64px
.z-index-1
position: relative
z-index: 3
.z-index-2
z-index: 2
.justify-content-start
justify-content: flex-start
.justify-content-end
justify-content: flex-end
.justify-content-space-between
justify-content: space-between
.justify-content-space-between-md
@media only screen and (max-width: 992px)
justify-content: space-between
.d-flex
display: flex
.align-items-center
align-items: center
.ml-auto
margin-left: auto
.d-flex
display: flex
.flex-grow
flex-grow: 1
.flex-md-grow
@media only screen and (max-width: $screen-md)
flex-grow: 1
.ml-auto
margin-left: auto
.big-when-focus
transition: transform .1s ease
&:hover,
&:focus
transform: scale(1.1)
@for $i from 0 through 5
.w-#{$i}
width: $i * 1em !important
@for $i from 0 through 5
@media only screen and (max-width: $screen-md)
.order-#{$i}
order: $i !important
.flex-wrap
flex-wrap: wrap
.flex-md-nowrap
@media only screen and (min-width: $screen-md)
flex-wrap: nowrap
.justify-space-between
justify-content: space-between
.half-transparent
opacity: .3
.w-100
width: 100%
.actions
position: absolute !important
right: 10px !important
top: 7px !important
bottom: 0 !important
ul
bottom: 0 !important
top: 18px !important
right: 40px !important
.bg-white-hover
&:hover
background-color: white