370 lines
No EOL
7.9 KiB
Text
370 lines
No EOL
7.9 KiB
Text
@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);
|
|
}
|
|
} |