diff options
Diffstat (limited to 'app/common/styles/base/mixins.scss')
-rw-r--r-- | app/common/styles/base/mixins.scss | 89 |
1 files changed, 62 insertions, 27 deletions
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss index e95d949..ead5924 100644 --- a/app/common/styles/base/mixins.scss +++ b/app/common/styles/base/mixins.scss @@ -1,24 +1,29 @@ //Breakpoints mixin @mixin mediaQuery($breakpoint) { @if $breakpoint == "x-small" { - @media (min-width: 25.000em) { //400px + @media (min-width: 25em) { + //400px @content; } } @if $breakpoint == "small" { - @media (min-width: 47.938em) { //767px + @media (min-width: 47.938em) { + //767px @content; } } @else if $breakpoint == "medium" { - @media (min-width: 64.000em) { //1024px + @media (min-width: 64em) { + //1024px @content; } } @else if $breakpoint == "large" { - @media (min-width: 85.375em) { //1366px + @media (min-width: 85.375em) { + //1366px @content; } } @else if $breakpoint == "x-large" { - @media (min-width: 100.000em) { //1600px + @media (min-width: 100em) { + //1600px @content; } } @@ -40,23 +45,31 @@ font-weight: 700; } - //Transitions mixin @mixin fastTransition-all { - transition: all .5s ease; + transition: all 0.5s ease; } @mixin slowTransition-all { transition: all 1.5s ease; } +@mixin page-transition { + transition: 110ms cubic-bezier(0.4, 0.14, 1, 1); +} + +@mixin page-transition-visibility { + visibility: hidden; + opacity: 0; +} + //Custom SVG arrow @mixin bgImage__arrowDown-primary { background-image: url(../assets/images/icon-caret-down.svg); background-size: 0.8em; background-repeat: no-repeat; background-position-y: center; - background-position-x: calc(100% - .5em); + background-position-x: calc(100% - 0.5em); } @mixin bgImage__arrowDown-disabled { @@ -64,23 +77,23 @@ background-size: 0.8em; background-repeat: no-repeat; background-position-y: center; - background-position-x: calc(100% - .5em); + background-position-x: calc(100% - 0.5em); } @mixin calcColumn-5 { - min-width: calc(100% * (1/5) - 5px); + min-width: calc(100% * (1 / 5) - 5px); } -@mixin calcColumn-4 ($offset: 0) { - min-width: calc(100% * (1/4) - #{$offset}); +@mixin calcColumn-4($offset: 0) { + min-width: calc(100% * (1 / 4) - #{$offset}); } @mixin calcColumn-3 { - min-width: calc(100% * (1/3) - 5px); + min-width: calc(100% * (1 / 3) - 5px); } @mixin calcSplitColumn { - min-width: calc(100% * (1/2) - 5px); + min-width: calc(100% * (1 / 2) - 5px); } @mixin vertCenter { @@ -89,7 +102,13 @@ } @mixin indeterminate-bar { - background-image: repeating-linear-gradient(-45deg, rgba(251, 234, 174, 0.35), rgba(251, 234, 174, 0.35) 25px, rgba(244, 176, 0, 0.45) 25px, rgba(244, 176, 0, 0.45) 50px); + background-image: repeating-linear-gradient( + -45deg, + rgba(251, 234, 174, 0.35), + rgba(251, 234, 174, 0.35) 25px, + rgba(244, 176, 0, 0.45) 25px, + rgba(244, 176, 0, 0.45) 50px + ); -webkit-animation: progress 2s linear infinite; -moz-animation: progress 2s linear infinite; animation: progress 2s linear infinite; @@ -134,25 +153,41 @@ @mixin table-row-save { @-webkit-keyframes row-flash { - from { background-color: $lightblue; } - to { background-color: inherit; } + from { + background-color: $lightblue; + } + to { + background-color: inherit; + } } @-moz-keyframes row-flash { - from { background-color: $lightblue; } - to { background-color: inherit; } + from { + background-color: $lightblue; + } + to { + background-color: inherit; + } } @-o-keyframes row-flash { - from { background-color: $lightblue; } - to { background-color: inherit; } + from { + background-color: $lightblue; + } + to { + background-color: inherit; + } } @keyframes row-flash { - from { background-color: $lightblue; } - to { background-color: inherit; } + from { + background-color: $lightblue; + } + to { + background-color: inherit; + } } .row-flash { -webkit-animation: row-flash 1s infinite; /* Safari 4+ */ - -moz-animation: row-flash 1s infinite; /* Fx 5+ */ - -o-animation: row-flash 1s infinite; /* Opera 12+ */ - animation: row-flash 1s infinite; /* IE 10+ */ + -moz-animation: row-flash 1s infinite; /* Fx 5+ */ + -o-animation: row-flash 1s infinite; /* Opera 12+ */ + animation: row-flash 1s infinite; /* IE 10+ */ } -}
\ No newline at end of file +} |