@use "src/corners" as c; @use "src/corners" as *; /* private vars */ $-radius: 3px; $_radius: 3px; $black: #000 !default; @use 'library' with ( $black: #222, $config: ( important: true, utility: ( leading-trim: trim, properties: (leading-trim), variants: ( both: both ) ) ) ); @use 'library' as * with ( $black: #222; ); .content { $variable: value !global; value: $variable; } $roboto-font-path: "../fonts/roboto"; @font-face { // This is parsed as a normal function call that takes a quoted string. src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2"); font-family: "Roboto"; font-weight: 100; } @use 'base'; $primary-color: red; .inverse { background-color: base.$primary-color; color: white; } ul > { li { list-style-type: none; } } h2 { + p { border-top: 1px solid gray; } } p { ~ { span { opacity: 0.8; } } } .button { border: 1px solid black; border-radius: if($rounded-corners, 5px, null); } $base-color: #036; @for $i from 1 through 3 { ul:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); } } @function scale-below($value, $base, $ratio: 1.618) { @while $value > $base { $value: $value / $ratio; } @return $value; } $normal-font-size: 16px; sup { font-size: scale-below(20px, 16px); } $sizes: 40px, 50px, 80px; @each $size in $sizes { .icon-#{$size} { font-size: $size; height: $size; width: $size; } } @each $name, $glyph in $icons { .icon-#{$name}:before { display: inline-block; font-family: "Icon Font"; content: $glyph; } } $icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px; @each $name, $glyph, $size in $icons { .icon-#{$name}:before { display: inline-block; font-family: "Icon Font"; content: $glyph; font-size: $size; } } @mixin triangle($size, $color, $direction) { height: 0; width: 0; border-color: transparent; border-style: solid; border-width: $size / 2; @if $direction == up { border-bottom-color: $color; } @else if $direction == right { border-left-color: $color; } @else if $direction == down { border-top-color: $color; } @else if $direction == left { border-right-color: $color; } @else { @error "Unknown direction #{$direction}."; } } .next { @include triangle(5px, black, right); } $icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f"); @each $name, $glyph in $icons { .icon-#{$name}:before { display: inline-block; font-family: "Icon Font"; content: $glyph; } } /* This CSS will print because %message-shared is extended. */ %message-shared { border: 1px solid #ccc; padding: 10px; color: #333; } // This CSS won't print because %equal-heights is never extended. %equal-heights { display: flex; flex-wrap: wrap; } .message { @extend %message-shared; } .success { @extend %message-shared; border-color: green; } .error { @extend %message-shared; border-color: red; } .warning { @extend %message-shared; border-color: yellow; } $grid-gutter-width : 1rem; // lightbox $lightbox_small_maxHeight: calc(100vh - 1rem); $lightbox_small_maxWidth: calc(100vw - 1rem); $lightbox_medium_mediaMinWidth: 400px; $lightbox_medium_maxHeight: 90vh; $lightbox_medium_maxWidth: 90vw; $lightbox_large_mediaMinWidth: 1200px; $lightbox_large_maxHeight: 90vh; $lightbox_large_maxWidth: 70vw; $lightbox_xxl_mediaMinWidth: 1600px; $lightbox_xxl_maxHeight: 90vh; $lightbox_xxl_maxWidth: 1100px; $lightbox_padding: $grid-gutter-width / 2; $lightbox_header-height: 1rem; $lightbox_border_radius: 3px; // lightbox colors $eee: #eee; $lightbox_close-color: #333; $lightbox_background_content: white; $lightbox_background_header: #f5f5f5; $lightbox_border: 1px solid $eee; $lightbox_overlay_color: transparentize(black, .4); $lightbox_shadow: 0 2px 5px rgba(0, 0, 0, .2); .hffLightbox { @mixin lb_styles_background { background: $lightbox_overlay_color; } @mixin lb_styles { border-radius: $lightbox_border_radius; border: $lightbox_border; background: $lightbox_background_content; box-shadow: 0 2px 5px $lightbox_shadow; } @mixin lb_styles-header { background: $lightbox_background_header; border-bottom: $lightbox_border; } @mixin lb_styles-headline { font-weight: bold; } @mixin lb_styles-content { } &, & * { box-sizing: border-box; } position: fixed; height: 200vh; width: 200vw; left: -50vw; top: -50vh; @include lb_styles_background(); z-index: 1000; &-wrapper { transition: all ease-in-out .5s; animation-name: fadeInLightbox; animation-duration: .5s; overflow: hidden; left: 50%; top: 50%; max-width: 2000px; max-height: $lightbox_small_maxHeight; width: $lightbox_small_maxWidth; position: absolute; transform: translate(-50%, -50%); @include lb_styles(); } &-content { overflow: auto; @include lb_styles-content(); max-height: calc(#{$lightbox_small_maxHeight} - 4rem); } &-header { overflow: hidden; @include lb_styles-header(); &-headline { line-height: 1rem; padding-right: calc(#{$lightbox_header-height} * 2); overflow: hidden; text-overflow: ellipsis; max-height: $lightbox_header-height; text-transform: uppercase; @include lb_styles-headline(); } } &-footer > .class { } &-footer .class { } &-footer, .class > #id { } &-content, &-header, &-footer { padding: $lightbox_padding; } &-close { cursor: pointer; position: absolute; right: $lightbox_padding; top: $lightbox_padding; width: $lightbox_header-height; height: $lightbox_header-height; opacity: 0.7; text-indent: -1000; font-size: 0; &:hover { opacity: 1; } &:before, &:after { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); content: ' '; height: $lightbox_header-height; width: 2px; background-color: $lightbox_close-color; } &:before { transform: rotate(45deg); } &:after { transform: rotate(-45deg); } } } @media (min-width: #{$lightbox_medium_mediaMinWidth}) { .hffLightbox-wrapper { max-height: $lightbox_medium_maxHeight; width: $lightbox_medium_maxWidth; } .hffLightbox-content { max-height: calc(#{$lightbox_medium_maxHeight} - 4rem); } } @media (min-width: #{$lightbox_large_mediaMinWidth}) { .hffLightbox-wrapper { max-height: $lightbox_large_maxHeight; width: $lightbox_large_maxWidth; } .hffLightbox-content { max-height: calc(#{$lightbox_large_maxHeight} - 4rem); } } $wrapper: 'wrapper'; $max: 'max'; $hffLightBox: '.hfflightbox'; $hffLightBox2: '.hfflightbox'; @media (min-width: #{$lightbox_xxl_mediaMinWidth}) { .hffLightbox-#{$wrapper} { max-height: $lightbox_xxl_maxHeight; #{$max}-height: $lightbox_xxl_maxHeight; width: $lightbox_xxl_maxWidth; } .hffLightbox-content { max-height: calc(#{$lightbox_xxl_maxHeight} - 4rem); } #{$hffLightBox}-content { max-height: calc(#{$lightbox_xxl_maxHeight} - 4rem); } .#{$hffLightBox2}-content { max-height: calc(#{$lightbox_xxl_maxHeight} - 4rem); } }