You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

143 lines
4.0 KiB
SCSS

/* ==========================================================================
Media queries
========================================================================== */
@mixin media($arg) {
@if $arg == screen {
@media #{$screen} { @content; }
}
@if $arg == landscape {
@media #{$screen} and (orientation: landscape) { @content; }
}
@if $arg == portrait {
@media #{$screen} and (orientation: portrait) { @content; }
}
@if $arg == xsmall-up {
@media #{$screen} and (min-width: lower-bound($xsmall-range)) { @content; }
}
@if $arg == xsmall-only {
@media #{$screen} and (max-width: upper-bound($xsmall-range)) { @content; }
}
@if $arg == small-up {
@media #{$screen} and (min-width: lower-bound($small-range)) { @content; }
}
@if $arg == small-only {
@media #{$screen} and (min-width: lower-bound($small-range)) and (max-width: upper-bound($small-range)) { @content; }
}
@if $arg == medium-up {
@media #{$screen} and (min-width: lower-bound($medium-range)) { @content; }
}
@if $arg == medium-down {
@media #{$screen} and (max-width: upper-bound($medium-range)) { @content; }
}
@if $arg == medium-only {
@media #{$screen} and (min-width: lower-bound($medium-range)) and (max-width: upper-bound($medium-range)) { @content; }
}
@if $arg == large-up {
@media #{$screen} and (min-width: lower-bound($large-range)) { @content; }
}
@if $arg == large-only {
@media #{$screen} and (min-width: lower-bound($large-range)) and (max-width: upper-bound($large-range)) { @content; }
}
@if $arg == xlarge-up {
@media #{$screen} and (min-width: lower-bound($xlarge-range)) { @content; }
}
@if $arg == xlarge-only {
@media #{$screen} and (min-width: lower-bound($xlarge-range)) and (max-width: upper-bound($xlarge-range)) { @content; }
}
@if $arg == xxlarge-up {
@media #{$screen} and (min-width: lower-bound($xxlarge-range)) { @content; }
}
}
/* ==========================================================================
Typography
========================================================================== */
@mixin heading($font-size, $max-media: small-up) {
font-size: $font-size;
line-height: $font-size + 0.5;
@if $max-media == medium-up or $max-media == large-up or $max-media == xlarge-up {
@include media(medium-up) {
$font-size: $font-size + 0.25;
font-size: $font-size;
line-height: $font-size + 0.5;
}
}
@if $max-media == large-up or $max-media == xlarge-up {
@include media(large-up) {
$font-size: $font-size + 0.25;
font-size: $font-size;
line-height: $font-size + 0.5;
}
}
@if $max-media == xlarge-up {
@include media(xlarge-up) {
$font-size: $font-size + 0.25;
font-size: $font-size;
line-height: $font-size + 0.5;
}
}
}
/* ==========================================================================
Buttons
========================================================================== */
@mixin button-variation($style, $color) {
@if $style == "filled" {
background-color: $color;
box-shadow: inset 0 0 0 1px rgba($base-color, 0.16);
&, &:visited {
color: #fff;
}
&:hover {
background-color: shade($color, 8%);
}
.drop--open > &,
&.button--active,
&.button--active:hover,
&:active {
background-color: shade($color, 16%);
}
}
@else if $style == "outline" {
background-color: rgba($color, 0);
box-shadow: inset 0 0 0 1px $color;
&, &:visited {
color: $color;
}
&:hover {
background-color: rgba($color, 0.08);
}
.open > &,
&.active,
&.active:hover,
&:active {
background-color: rgba($color, 0.16);
}
}
@else if $style == "unbounded" {
background-color: rgba($color, 0);
&, &:visited {
color: $color;
}
&:hover {
background-color: rgba($color, 0.08);
}
.open > &,
&.active,
&.active:hover,
&:active {
color: shade($color, 48%);
}
}
@else {
@error "Invalid style property for button variation.";
}
}