diff options
| author | schneefux <schneefux+commit@schneefux.xyz> | 2017-03-25 13:13:57 +0100 |
|---|---|---|
| committer | schneefux <schneefux+commit@schneefux.xyz> | 2017-03-25 13:13:57 +0100 |
| commit | d25ff2bddd44b9dac1ceb248424109d1782dd211 (patch) | |
| tree | 34fcfd824a1a72e7b4d431b688adcea532b62180 /minionlivesmatter/templates/assets/bootstrap-material-design/scss/mixins/_drawer.scss | |
| parent | a2cbdd1b88ac723e5e441c0a3c22636f0a8c4dfd (diff) | |
| download | meta-d25ff2bddd44b9dac1ceb248424109d1782dd211.tar.gz meta-d25ff2bddd44b9dac1ceb248424109d1782dd211.zip | |
add minionlivesmatter as submodule
Diffstat (limited to 'minionlivesmatter/templates/assets/bootstrap-material-design/scss/mixins/_drawer.scss')
| -rw-r--r-- | minionlivesmatter/templates/assets/bootstrap-material-design/scss/mixins/_drawer.scss | 237 |
1 files changed, 0 insertions, 237 deletions
diff --git a/minionlivesmatter/templates/assets/bootstrap-material-design/scss/mixins/_drawer.scss b/minionlivesmatter/templates/assets/bootstrap-material-design/scss/mixins/_drawer.scss deleted file mode 100644 index 21c49da..0000000 --- a/minionlivesmatter/templates/assets/bootstrap-material-design/scss/mixins/_drawer.scss +++ /dev/null @@ -1,237 +0,0 @@ -// Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time - -@mixin bmd-drawer-x-out($size) { - @each $side, $abbrev in (left: l, right: r) { - &.bmd-drawer-f-#{$abbrev} { - > .bmd-layout-drawer { - // position - top: 0; - #{$side}: 0; - - width: $size; - height: 100%; - - @if $side == left { - transform: translateX(-$size - 10px); // initial position of drawer (closed), way off screen - } @else { - transform: translateX($size + 10px); // initial position of drawer (closed), way off screen - } - } - - > .bmd-layout-header, - > .bmd-layout-content { - margin-#{$side}: 0; - } - } - } -} - -@mixin bmd-drawer-y-out($size) { - @each $side, $abbrev in (top: t, bottom: b) { - &.bmd-drawer-f-#{$abbrev} { - > .bmd-layout-drawer { - // position - #{$side}: 0; - left: 0; - - width: 100%; - height: $size; - - @if $side == top { - transform: translateY(-$size - 10px); // initial position of drawer (closed), way off screen - } @else { - transform: translateY($size + 10px); // initial position of drawer (closed), way off screen - } - } - - > .bmd-layout-content { - margin-#{$side}: 0; - } - } - } -} - -@function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") { - // e.g. &, &-sm, &-md, &-lg - $name: "&-#{$breakpoint}#{$suffix}"; - @if $breakpoint == xs { - $name: "&"; - } - @return $name; -} - -@mixin bmd-drawer-x-in($size) { - @each $side, $abbrev in (left: l, right: r) { - &.bmd-drawer-f-#{$abbrev} { - // Push - drawer will push the header and content (default behavior) - > .bmd-layout-header { - width: calc(100% - #{$size}); - margin-#{$side}: $size; - } - - > .bmd-layout-drawer { - transform: translateX(0); - } - - > .bmd-layout-content { - margin-#{$side}: $size; - } - } - } -} - -@mixin bmd-drawer-y-in($size) { - @each $side, $abbrev in (top: t, bottom: b) { - &.bmd-drawer-f-#{$abbrev} { - - // 1. Push - drawer will push the header or content - > .bmd-layout-header { - @if $side == top { // only add margin-top on a header when the drawer is at the top - margin-#{$side}: $size; - } - } - - > .bmd-layout-drawer { - transform: translateY(0); - } - - > .bmd-layout-content { - @if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom - margin-#{$side}: $size; - } - } - } - } -} - -// breakpoint based open to a particular size -@mixin bmd-drawer-x-in-up($size, $breakpoint) { - // e.g. &, &-sm, &-md, &-lg - $name: bmd-drawer-breakpoint-name($breakpoint, "-up"); - - &.bmd-drawer-in { - #{unquote($name)} { // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg - - @if $breakpoint == xs { - // bmd-drawer-in marker class (non-responsive) - @include bmd-drawer-x-in($size); - } @else { - - // responsive class - @include media-breakpoint-up($breakpoint) { - // bmd-drawer-f-(left and right) styles - @include bmd-drawer-x-in($size); - } - } - } - } -} - -// breakpoint based open to a particular size -@mixin bmd-drawer-y-in-up($size, $breakpoint) { - // e.g. &, &-sm, &-md, &-lg - $name: bmd-drawer-breakpoint-name($breakpoint, "-up"); - - &.bmd-drawer-in { - #{unquote($name)} { // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg - - @if $breakpoint == xs { - // bmd-drawer-in marker class (non-responsive) - @include bmd-drawer-y-in($size); - } @else { - - // responsive class - @include media-breakpoint-up($breakpoint) { - // bmd-drawer-f-(left and right) styles - @include bmd-drawer-y-in($size); - } - } - } - } -} - -@mixin bmd-drawer-x-overlay() { - @include bmd-layout-backdrop-in(); - - @each $side, $abbrev in (left: l, right: r) { - &.bmd-drawer-f-#{$abbrev} { - > .bmd-layout-header, - > .bmd-layout-content { - width: 100%; - margin-#{$side}: 0; - } - } - } -} - -@mixin bmd-drawer-y-overlay() { - @include bmd-layout-backdrop-in(); - - @each $side, $abbrev in (top: t, bottom: b) { - &.bmd-drawer-f-#{$abbrev} { - > .bmd-layout-header { - @if $side == top { // only add margin-top on a header when the drawer is at the top - margin-#{$side}: 0; - } - } - - > .bmd-layout-content { - @if $side == bottom { // only add margin-bottom on content when the drawer is at the bottom - margin-#{$side}: 0; - } - } - } - } -} - -// Overlay - left/right responsive overlay classes and marker class -@mixin bmd-drawer-x-overlay-down($breakpoint) { - // e.g. &, &-sm, &-md, &-lg - $name: bmd-drawer-breakpoint-name($breakpoint, "-down"); - - &.bmd-drawer-overlay { - #{unquote($name)} { // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg - - // x - left/right - - @if $breakpoint == xs { // overlay marker class (non-responsive) - - // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the - // responsive bmd-drawer-in-* media queries above win (and overlay is ignored) - &.bmd-drawer-overlay { - @include bmd-drawer-x-overlay(); - } - } @else { - @include media-breakpoint-down($breakpoint) { // overlay responsive class - @include bmd-drawer-x-overlay(); - } - } - } - } -} - -// Overlay - top/bottom responsive overlay classes and marker class -@mixin bmd-drawer-y-overlay-down($breakpoint) { - // e.g. &, &-sm, &-md, &-lg - $name: bmd-drawer-breakpoint-name($breakpoint, "-down"); - - &.bmd-drawer-overlay { - #{unquote($name)} { // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg - //// y - top/bottom - - @if $breakpoint == xs { // overlay marker class (non-responsive) - - // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the - // responsive bmd-drawer-in-* media queries above win (and overlay is ignored) - &.bmd-drawer-overlay { - @include bmd-drawer-y-overlay(); - } - } @else { - @include media-breakpoint-down($breakpoint) { // overlay responsive class - @include bmd-drawer-y-overlay(); - } - } - } - } -} - |
