spielhoelle/zelos

View on GitHub
app/assets/stylesheets/_layout.sass

Summary

Maintainability
Test Coverage
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