diff options
Diffstat (limited to '_sass/common')
33 files changed, 0 insertions, 2095 deletions
diff --git a/_sass/common/_classes.scss b/_sass/common/_classes.scss deleted file mode 100644 index b5615d8..0000000 --- a/_sass/common/_classes.scss +++ /dev/null @@ -1,24 +0,0 @@ -/* stylelint-disable at-rule-name-space-after, at-rule-semicolon-space-before */ -@charset "utf-8"; -@import - "common/classes/animation", - "common/classes/transform", - "common/classes/transition", - "common/classes/user-select", - - "common/classes/clearfix", - "common/classes/media", - "common/classes/clickable", - "common/classes/display", - "common/classes/flex", - "common/classes/horizontal-rules", - "common/classes/pseudo", - "common/classes/link", - "common/classes/text", - "common/classes/overflow", - "common/classes/shadow", - "common/classes/spacing", - "common/classes/split-line", - "common/classes/grid" -; -/* stylelint-enable */ diff --git a/_sass/common/_function.scss b/_sass/common/_function.scss deleted file mode 100644 index 1de2492..0000000 --- a/_sass/common/_function.scss +++ /dev/null @@ -1,15 +0,0 @@ -@function get-color-theme($color) { - @if lightness($color) < 15% { - @return "dark"; - } @else { - @return "light"; - } -} - -@function breakpoint-infix($name, $breakpoints: default) { - @if $breakpoints == default { - $breakpoints: $responsive; - } - $min: map-get($breakpoints, $name); - @return if($min != 0, "#{$name}-", ""); -} diff --git a/_sass/common/_print.scss b/_sass/common/_print.scss deleted file mode 100644 index d798d87..0000000 --- a/_sass/common/_print.scss +++ /dev/null @@ -1,20 +0,0 @@ -@media print { - a { - @include plain() { - text-decoration: underline; - } - @include hover() { - text-decoration: underline; - } - @include active() { - text-decoration: underline; - } - } - - img, - tr, - pre, - blockquote { - page-break-inside: avoid; - } -} diff --git a/_sass/common/_reset.scss b/_sass/common/_reset.scss deleted file mode 100644 index 2062d37..0000000 --- a/_sass/common/_reset.scss +++ /dev/null @@ -1,174 +0,0 @@ -@mixin block-elements { - h1, - h2, - h3, - h4, - h5, - h6, - p, - hr, - blockquote, - figure, - pre, - .highlighter-rouge, - ul, - ol, - dl, - table, - .footnotes { - @content; - } -} -@mixin heading-elements { - h1, h2, h3, h4, h5, h6 { - @content; - } -} - -*, -::before, -::after { - box-sizing: border-box; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - -/** - * 1. Prevent adjustments of font size after orientation changes in iOS. - **/ - -html { - font-size: map-get($base, font-size-root); - -webkit-text-size-adjust: 100%; /* 1 */ - @media print { - font-size: map-get($base, font-size-root-sm); - } -} - -body { - padding: 0; - margin: 0; - font: map-get($base, font-weight) #{map-get($base, font-size)}/#{map-get($base, line-height)} map-get($base, font-family); - ::-moz-selection { - background: $select-color; - } - ::-webkit-selection { - background: $select-color; - } - ::selection { - background: $select-color; - } -} - -@include block-elements() { - padding: 0; - margin: map-get($spacers, 2) 0; -} - -input, textarea, select, button { - font: map-get($base, font-weight) #{map-get($base, font-size)}/#{map-get($base, line-height)} map-get($base, font-family); - color: $text-color; -} - -h1, -h2, -h3, -h4, -h5, -h6, -strong { - font-weight: map-get($base, font-weight-bold); -} - -h1 { - font-size: map-get($base, font-size-h1); - color: $text-color-d; - @include media-breakpoint-down(md) { - font-size: map-get($base, font-size-h1-sm); - } -} - -h2 { - font-size: map-get($base, font-size-h2); - color: $text-color-d; - @include media-breakpoint-down(md) { - font-size: map-get($base, font-size-h2-sm); - } -} - -h3 { - font-size: map-get($base, font-size-h3); - color: $text-color-d; - @include media-breakpoint-down(md) { - font-size: map-get($base, font-size-h3-sm); - } -} - -h4 { - font-size: map-get($base, font-size-h4); - color: $text-color; - @include media-breakpoint-down(md) { - font-size: map-get($base, font-size-h4-sm); - } -} - -h5 { - font-size: map-get($base, font-size-h5); - color: $text-color; - @include media-breakpoint-down(md) { - font-size: map-get($base, font-size-h5-sm); - } -} - -h6 { - font-size: map-get($base, font-size-h6); - color: $text-color-l; - @include media-breakpoint-down(md) { - font-size: map-get($base, font-size-h6-sm); - } -} - -a { - font-weight: map-get($base, font-weight-bold); - @include link-colors($main-color-1); -} - -pre, code { - font-family: map-get($base, font-family-code); -} - -code { - font-size: map-get($base, font-size-xs); - line-height: map-get($base, line-height-sm); -} - -figure > img { - display: block; -} - -figcaption { - font-size: map-get($base, font-size-sm); -} - -button { - padding: 0; - margin: 0; - font-size: map-get($spacers, 3); - cursor: pointer; - background-color: transparent; - border-width: 0; - outline: none; -} - -input { - &::-ms-clear { - display: none; - } - &:focus { - outline: none; - } -} - -// mermaid -.mermaidTooltip { - display: none; -} diff --git a/_sass/common/_variables.scss b/_sass/common/_variables.scss deleted file mode 100644 index faf4e98..0000000 --- a/_sass/common/_variables.scss +++ /dev/null @@ -1,150 +0,0 @@ -$base: ( - font-family: (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif), - font-family-code: (Menlo, Monaco, Consolas, Andale Mono, lucida console, Courier New, monospace), - - font-size-root: 16px, - font-size-root-sm: 14px, - - font-size-xl: 1.5rem, - font-size-lg: 1.25rem, - font-size: 1rem, - font-size-sm: .85rem, - font-size-xs: .7rem, - - font-size-h1-xl: 3.5rem, - font-size-h2-xl: 2.5rem, - font-size-h3-xl: 2rem, - font-size-h4-xl: 1.75rem, - font-size-h5-xl: 1.5rem, - font-size-h6-xl: 1.5rem, - - font-size-h1-lg: 3rem, - font-size-h2-lg: 2rem, - font-size-h3-lg: 1.75rem, - font-size-h4-lg: 1.5rem, - font-size-h5-lg: 1.25rem, - font-size-h6-lg: 1.25rem, - - font-size-h1: 2.5rem, - font-size-h2: 1.9rem, - font-size-h3: 1.5rem, - font-size-h4: 1.2rem, - font-size-h5: 1rem, - font-size-h6: 1rem, - - font-size-h1-sm: 2rem, - font-size-h2-sm: 1.5rem, - font-size-h3-sm: 1.35rem, - font-size-h4-sm: 1.15rem, - font-size-h5-sm: 1rem, - font-size-h6-sm: 1rem, - - font-size-h1-xs: 1.05rem, - font-size-h2-xs: 1rem, - font-size-h3-xs: .95rem, - font-size-h4-xs: .9rem, - font-size-h5-xs: .85rem, - font-size-h6-xs: .85rem, - - font-weight: 400, - font-weight-bold: 700, - - line-height-xl: 2, - line-height-lg: 1.8, - line-height: 1.6, - line-height-sm: 1.4, - line-height-xs: 1.2, - - spacer: 1rem, - - border-radius-lg: .8rem, - border-radius: .4rem, - border-radius-sm: .2rem -); - -$spacers: ( - 0: 0, - 1: map-get($base, spacer) * .25, - 2: map-get($base, spacer) * .5, - 3: map-get($base, spacer), - 4: map-get($base, spacer) * 1.5, - 5: map-get($base, spacer) * 3 -); - -$z-indexes: ( - actions: 996, - mask: 997, - sidebar: 998, - modal: 999 -); - -$layout: ( - header-height: 5rem, - header-height-sm: 3rem, - content-max-width: 950px, - sidebar-width: 250px, - sidebar-header-height: 3rem, - aside-width: 220px -); - -// sm md lg -// | ------ | ------ | ------ | -// 0 500 1024 - - -$responsive: ( - sm: 0, - md: 500px, - lg: 1024px -); - -$animation: ( - duration: .4s, - duration-sm: .2s, - timing-function: ease-in-out -); - -$clickable: ( - transition: all .2s ease-in-out -); - -$button-height-xl: 2.8rem; -$button-height-lg: 2.3rem; -$button-height: 1.9rem; -$button-height-sm: 1.5rem; -$button-height-xs: 1.2rem; - -$button: ( - padding-y-xl: ($button-height-xl - map-get($base, font-size-xl)) / 2, - padding-x-xl: $button-height-xl / 3, - padding-y-lg: ($button-height-lg - map-get($base, font-size-lg)) / 2, - padding-x-lg: $button-height-lg / 3, - padding-y: ($button-height - map-get($base, font-size)) / 2, - padding-x: $button-height / 3, - padding-y-sm: ($button-height-sm - map-get($base, font-size-sm)) / 2, - padding-x-sm: $button-height-sm / 3, - padding-y-xs: ($button-height-xs - map-get($base, font-size-xs)) / 2, - padding-x-xs: $button-height-xs / 3, - - pill-radius: 6rem, - - circle-diameter-xl: $button-height-xl, - circle-diameter-lg: $button-height-lg, - circle-diameter: $button-height, - circle-diameter-sm: $button-height-sm, - circle-diameter-xs: $button-height-xs, - - font-weight: map-get($base, font-weight-bold) -); - -$image: ( - width-xl: 20em, - width-lg: 16rem, - width: 12rem, - width-sm: 8rem, - width-xs: 4rem -); - -$menu: ( - horizontal-spacer: 1, - horizontal-item-vertical-spacer: 1 -); diff --git a/_sass/common/classes/_animation.scss b/_sass/common/classes/_animation.scss deleted file mode 100644 index 2dbc47d..0000000 --- a/_sass/common/classes/_animation.scss +++ /dev/null @@ -1,13 +0,0 @@ -@mixin animation($value) { - -webkit-animation: $value; - animation: $value; -} - -@mixin keyframes($name) { - @-webkit-keyframes #{$name} { - @content; - } - @keyframes #{$name} { - @content; - } -} diff --git a/_sass/common/classes/_clearfix.scss b/_sass/common/classes/_clearfix.scss deleted file mode 100644 index caf3124..0000000 --- a/_sass/common/classes/_clearfix.scss +++ /dev/null @@ -1,19 +0,0 @@ -@mixin clearfix() { - &::after { - display: table; - clear: both; - content: ""; - } -} - -.clearfix { - @include clearfix(); -} - -.left { - float: left; -} - -.right { - float: right; -} diff --git a/_sass/common/classes/_clickable.scss b/_sass/common/classes/_clickable.scss deleted file mode 100644 index af32eff..0000000 --- a/_sass/common/classes/_clickable.scss +++ /dev/null @@ -1,159 +0,0 @@ -@mixin clickable($clr, $bg-clr, $hover-clr: default, $hover-bg-clr: default, $active-clr: default, $active-bg-clr: default, $focus-clr: default, $focus-bg-clr: default, $theme: default, $ignore-path: default) { - - @if $theme == default { - @if $bg-clr == null and $hover-bg-clr == null { - @if $hover-clr == default { - $theme: get-color-theme($clr); - } @else { - $theme: get-color-theme($hover-clr); - } - } @else { - @if $hover-bg-clr == default { - $theme: get-color-theme($bg-clr); - } @else { - $theme: get-color-theme($hover-bg-clr); - } - } - } - - @if $ignore-path == default { - $ignore-path: false; - } @else { - $ignore-path: true; - } - - @include transition(map-get($clickable, transition)); - @if $ignore-path == false { - svg { - path { - @include transition(map-get($clickable, transition)); - } - } - } - - // hover - @if $hover-clr == default { - @if $hover-bg-clr == null { - @if $theme == "light" { - $hover-clr: darken($clr, 14%); - } - @if $theme == "dark" { - $hover-clr: lighten($clr, 18%); - } - } @else if $hover-bg-clr == default { - $hover-clr: $clr; - } - } - - @if $hover-bg-clr == default { - @if $theme == "light" { - $hover-bg-clr: darken($bg-clr, 14%); - } - @if $theme == "dark" { - $hover-bg-clr: lighten($bg-clr, 18%); - } - } - - // active - @if $active-clr == default { - @if $active-bg-clr == null { - @if $theme == "light" { - $active-clr: darken($hover-clr, 15%); - } - @if $theme == "dark" { - $active-clr: lighten($hover-clr, 16%); - } - } @else if $active-bg-clr == default { - $active-clr: $hover-clr; - } - } - - @if $active-bg-clr == default { - @if $theme == "light" { - $active-bg-clr: darken($hover-bg-clr, 15%); - } - @if $theme == "dark" { - $active-bg-clr: lighten($hover-bg-clr, 16%); - } - } - - // focus - @if $focus-clr == default { - @if $focus-bg-clr == null { - $focus-clr: $hover-clr; - } @else if $hover-bg-clr == default { - $focus-clr: $hover-clr; - } - } - - @if $focus-bg-clr == default { - $focus-bg-clr: $hover-bg-clr; - } - - @include plain() { - color: $clr; - @if $bg-clr { - background-color: $bg-clr; - } - @if $ignore-path == false { - svg path { - fill: $clr; - } - } - } - @include hover() { - color: $hover-clr; - @if $hover-bg-clr { - background-color: $hover-bg-clr; - } - @if $ignore-path == false { - svg path { - fill: $hover-clr; - } - } - } - @include active() { - color: $active-clr; - @if $active-bg-clr { - background-color: $active-bg-clr; - } - @if $ignore-path == false { - svg path { - fill: $active-clr; - } - } - } - @include focus() { - color: $focus-clr; - @if $focus-bg-clr{ - background-color: $focus-bg-clr; - box-shadow: 0 0 0 2px rgba($focus-bg-clr, .4); - } - @if $ignore-path == false { - svg path { - fill: $focus-clr; - } - } - } - @include disabled() { - @if $theme == "light" { - color: rgba($clr, .2) !important; - } - @if $theme == "dark" { - color: rgba($clr, .4) !important; - } - @if $bg-clr { - background-color: $bg-clr !important; - } - @if $ignore-path == false { - svg path { - @if $theme == "light" { - fill: rgba($clr, .2) !important; - } - @if $theme == "dark" { - fill: rgba($clr, .4) !important; - } - } - } - } -} diff --git a/_sass/common/classes/_display.scss b/_sass/common/classes/_display.scss deleted file mode 100644 index 411611e..0000000 --- a/_sass/common/classes/_display.scss +++ /dev/null @@ -1,13 +0,0 @@ -@each $breakpoint in map-keys($responsive) { - @include media-breakpoint-up($breakpoint) { - .d-#{breakpoint-infix($breakpoint)}none { - display: none !important; - } - } -} - -.d-print-none { - @media print { - display: none !important; - } -} diff --git a/_sass/common/classes/_flex.scss b/_sass/common/classes/_flex.scss deleted file mode 100644 index 59e1570..0000000 --- a/_sass/common/classes/_flex.scss +++ /dev/null @@ -1,394 +0,0 @@ -// Flexbox Mixins -// http://philipwalton.github.io/solved-by-flexbox/ -// https://github.com/philipwalton/solved-by-flexbox -// -// Copyright (c) 2013 Brian Franco -// -// Permission is hereby granted, free of charge, to any person obtaining a -// copy of this software and associated documentation files (the -// "Software"), to deal in the Software without restriction, including -// without limitation the rights to use, copy, modify, merge, publish, -// distribute, sublicense, and/or sell copies of the Software, and to -// permit persons to whom the Software is furnished to do so, subject to -// the following conditions: -// The above copyright notice and this permission notice shall be included -// in all copies or substantial portions of the Software. -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS -// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. -// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY -// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, -// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE -// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -// -// This is a set of mixins for those who want to mess around with flexbox -// using the native support of current browsers. For full support table -// check: http://caniuse.com/flexbox -// -// Basically this will use: -// -// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping) -// * Final standards syntax (FF, Safari, Chrome, IE11, Opera) -// -// This was inspired by: -// -// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ -// -// With help from: -// -// * http://w3.org/tr/css3-flexbox/ -// * http://the-echoplex.net/flexyboxes/ -// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx -// * http://css-tricks.com/using-flexbox/ -// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ -// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes - -//---------------------------------------------------------------------- - -// Flexbox Containers -// -// The 'flex' value causes an element to generate a block-level flex -// container box. -// -// The 'inline-flex' value causes an element to generate a inline-level -// flex container box. -// -// display: flex | inline-flex -// -// http://w3.org/tr/css3-flexbox/#flex-containers -// -// (Placeholder selectors for each type, for those who rather @extend) - -@mixin flexbox { - display: -webkit-box; - display: -webkit-flex; - display: -moz-flex; - display: -ms-flexbox; - display: flex; -} - -%flexbox { @include flexbox; } - -//---------------------------------- - -@mixin inline-flex { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -moz-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -%inline-flex { @include inline-flex; } - -//---------------------------------------------------------------------- - -// Flexbox Direction -// -// The 'flex-direction' property specifies how flex items are placed in -// the flex container, by setting the direction of the flex container's -// main axis. This determines the direction that flex items are laid out in. -// -// Values: row | row-reverse | column | column-reverse -// Default: row -// -// http://w3.org/tr/css3-flexbox/#flex-direction-property - -@mixin flex-direction($value: row) { - @if $value == row-reverse { - -webkit-box-direction: reverse; - -webkit-box-orient: horizontal; - } @else if $value == column { - -webkit-box-direction: normal; - -webkit-box-orient: vertical; - } @else if $value == column-reverse { - -webkit-box-direction: reverse; - -webkit-box-orient: vertical; - } @else { - -webkit-box-direction: normal; - -webkit-box-orient: horizontal; - } - -webkit-flex-direction: $value; - -moz-flex-direction: $value; - -ms-flex-direction: $value; - flex-direction: $value; -} -// Shorter version: -@mixin flex-dir($args...) { @include flex-direction($args...); } - -//---------------------------------------------------------------------- - -// Flexbox Wrap -// -// The 'flex-wrap' property controls whether the flex container is single-line -// or multi-line, and the direction of the cross-axis, which determines -// the direction new lines are stacked in. -// -// Values: nowrap | wrap | wrap-reverse -// Default: nowrap -// -// http://w3.org/tr/css3-flexbox/#flex-wrap-property - -@mixin flex-wrap($value: nowrap) { - // No Webkit Box fallback. - -webkit-flex-wrap: $value; - -moz-flex-wrap: $value; - @if $value == nowrap { - -ms-flex-wrap: none; - } @else { - -ms-flex-wrap: $value; - } - flex-wrap: $value; -} - -//---------------------------------------------------------------------- - -// Flexbox Flow (shorthand) -// -// The 'flex-flow' property is a shorthand for setting the 'flex-direction' -// and 'flex-wrap' properties, which together define the flex container's -// main and cross axes. -// -// Values: <flex-direction> | <flex-wrap> -// Default: row nowrap -// -// http://w3.org/tr/css3-flexbox/#flex-flow-property - -@mixin flex-flow($values: (row nowrap)) { - // No Webkit Box fallback. - -webkit-flex-flow: $values; - -moz-flex-flow: $values; - -ms-flex-flow: $values; - flex-flow: $values; -} - -//---------------------------------------------------------------------- - -// Flexbox Order -// -// The 'order' property controls the order in which flex items appear within -// their flex container, by assigning them to ordinal groups. -// -// Default: 0 -// -// http://w3.org/tr/css3-flexbox/#order-property - -@mixin order($int: 0) { - -ms-flex-order: $int; - -webkit-order: $int; - -moz-order: $int; - order: $int; - -webkit-box-ordinal-group: $int + 1; -} - -//---------------------------------------------------------------------- - -// Flexbox Grow -// -// The 'flex-grow' property sets the flex grow factor. Negative numbers -// are invalid. -// -// Default: 0 -// -// http://w3.org/tr/css3-flexbox/#flex-grow-property - -@mixin flex-grow($int: 0) { - -webkit-box-flex: $int; - -webkit-flex-grow: $int; - -moz-flex-grow: $int; - -ms-flex-positive: $int; - flex-grow: $int; -} - -//---------------------------------------------------------------------- - -// Flexbox Shrink -// -// The 'flex-shrink' property sets the flex shrink factor. Negative numbers -// are invalid. -// -// Default: 1 -// -// http://w3.org/tr/css3-flexbox/#flex-shrink-property - -@mixin flex-shrink($int: 1) { - -webkit-flex-shrink: $int; - -moz-flex-shrink: $int; - -ms-flex-negative: $int; - flex-shrink: $int; -} - -//---------------------------------------------------------------------- - -// Flexbox Basis -// -// The 'flex-basis' property sets the flex basis. Negative lengths are invalid. -// -// Values: Like "width" -// Default: auto -// -// http://www.w3.org/TR/css3-flexbox/#flex-basis-property - -@mixin flex-basis($value: auto) { - -webkit-flex-basis: $value; - -moz-flex-basis: $value; - -ms-flex-preferred-size: $value; - flex-basis: $value; -} - -//---------------------------------------------------------------------- - -// Flexbox "Flex" (shorthand) -// -// The 'flex' property specifies the components of a flexible length: the -// flex grow factor and flex shrink factor, and the flex basis. When an -// element is a flex item, 'flex' is consulted instead of the main size -// property to determine the main size of the element. If an element is -// not a flex item, 'flex' has no effect. -// -// Values: none | <flex-grow> <flex-shrink> || <flex-basis> -// Default: See individual properties (1 1 0). -// -// http://w3.org/tr/css3-flexbox/#flex-property - -@mixin flex($fg: 1, $fs: null, $fb: null) { - - // Set a variable to be used by box-flex properties - $fg-boxflex: $fg; - - // Box-Flex only supports a flex-grow value so let's grab the - // first item in the list and just return that. - @if type-of($fg) == "list" { - $fg-boxflex: nth($fg, 1); - } - - -webkit-box-flex: $fg-boxflex; - -webkit-flex: $fg $fs $fb; - -moz-box-flex: $fg-boxflex; - -moz-flex: $fg $fs $fb; - -ms-flex: $fg $fs $fb; - flex: $fg $fs $fb; -} - -//---------------------------------------------------------------------- - -// Flexbox Justify Content -// -// The 'justify-content' property aligns flex items along the main axis -// of the current line of the flex container. This is done after any flexible -// lengths and any auto margins have been resolved. Typically it helps distribute -// extra free space leftover when either all the flex items on a line are -// inflexible, or are flexible but have reached their maximum size. It also -// exerts some control over the alignment of items when they overflow the line. -// -// Note: 'space-*' values not supported in older syntaxes. -// -// Values: flex-start | flex-end | center | space-between | space-around -// Default: flex-start -// -// http://w3.org/tr/css3-flexbox/#justify-content-property - -@mixin justify-content($value: flex-start) { - @if $value == flex-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - } @else if $value == flex-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - } @else if $value == space-between { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - } @else if $value == space-around { - -ms-flex-pack: distribute; - } @else { - -webkit-box-pack: $value; - -ms-flex-pack: $value; - } - -webkit-justify-content: $value; - -moz-justify-content: $value; - justify-content: $value; -} -// Shorter version: -@mixin flex-just($args...) { @include justify-content($args...); } - -//---------------------------------------------------------------------- - -// Flexbox Align Items -// -// Flex items can be aligned in the cross axis of the current line of the -// flex container, similar to 'justify-content' but in the perpendicular -// direction. 'align-items' sets the default alignment for all of the flex -// container's items, including anonymous flex items. 'align-self' allows -// this default alignment to be overridden for individual flex items. (For -// anonymous flex items, 'align-self' always matches the value of 'align-items' -// on their associated flex container.) -// -// Values: flex-start | flex-end | center | baseline | stretch -// Default: stretch -// -// http://w3.org/tr/css3-flexbox/#align-items-property - -@mixin align-items($value: stretch) { - @if $value == flex-start { - -webkit-box-align: start; - -ms-flex-align: start; - } @else if $value == flex-end { - -webkit-box-align: end; - -ms-flex-align: end; - } @else { - -webkit-box-align: $value; - -ms-flex-align: $value; - } - -webkit-align-items: $value; - -moz-align-items: $value; - align-items: $value; -} - -//---------------------------------- - -// Flexbox Align Self -// -// Values: auto | flex-start | flex-end | center | baseline | stretch -// Default: auto - -@mixin align-self($value: auto) { - // No Webkit Box Fallback. - -webkit-align-self: $value; - -moz-align-self: $value; - @if $value == flex-start { - -ms-flex-item-align: start; - } @else if $value == flex-end { - -ms-flex-item-align: end; - } @else { - -ms-flex-item-align: $value; - } - align-self: $value; -} - -//---------------------------------------------------------------------- - -// Flexbox Align Content -// -// The 'align-content' property aligns a flex container's lines within the -// flex container when there is extra space in the cross-axis, similar to -// how 'justify-content' aligns individual items within the main-axis. Note, -// this property has no effect when the flexbox has only a single line. -// -// Values: flex-start | flex-end | center | space-between | space-around | stretch -// Default: stretch -// -// http://w3.org/tr/css3-flexbox/#align-content-property - -@mixin align-content($value: stretch) { - // No Webkit Box Fallback. - -webkit-align-content: $value; - -moz-align-content: $value; - @if $value == flex-start { - -ms-flex-line-pack: start; - } @else if $value == flex-end { - -ms-flex-line-pack: end; - } @else { - -ms-flex-line-pack: $value; - } - align-content: $value; -} diff --git a/_sass/common/classes/_grid.scss b/_sass/common/classes/_grid.scss deleted file mode 100644 index 655c254..0000000 --- a/_sass/common/classes/_grid.scss +++ /dev/null @@ -1,80 +0,0 @@ -$grid-columns: 12; - -.grid-container { - @include overflow(hidden); -} -.cell { - min-width: 0; -} - -@mixin make-cell($columns) { - @if $columns == "auto" { - @include flex(1 1 0); - width: auto; - } @else if $columns == "shrink" { - @include flex(0 0 auto); - width: auto; - } @else if $columns == "stretch" { - @include flex(1); - } @else { - @include flex(none); - width: percentage($columns / $grid-columns); - } -} - -@mixin make-grid-cell($columns, $breakpoint) { - @include media-breakpoint-up($breakpoint) { - .cell--#{breakpoint-infix($breakpoint)}#{$columns} { - @include make-cell($columns); - } - } -} - -.grid { - @include flexbox(); - @include flex-wrap(wrap); - & > { - @each $breakpoint in map-keys($responsive) { - @for $i from 1 through $grid-columns { - @include make-grid-cell($i, $breakpoint); - } - @include make-grid-cell("auto", $breakpoint); - @include make-grid-cell("shrink", $breakpoint); - @include make-grid-cell("stretch", $breakpoint); - } - } -} - -.grid--reverse { - flex-direction: row-reverse; -} - -@mixin make-grid() { - $types: ("p"); - $directions: ("x", "y", ""); - $spacers: (0, 1, 2, 3, 4, 5); - - @each $type in $types { - @each $direction in $directions { - @each $spacer in $spacers { - @if $direction == "" { - .grid--#{$type}-#{$spacer} { - @include make-spacing("m", "", $spacer, true); - .cell { - @include make-spacing($type, "", $spacer); - } - } - } @else { - .grid--#{$type}#{$direction}-#{$spacer} { - @include make-spacing("m", $direction, $spacer, true); - .cell { - @include make-spacing($type, $direction, $spacer); - } - } - } - } - } - } -} - -@include make-grid(); diff --git a/_sass/common/classes/_horizontal-rules.scss b/_sass/common/classes/_horizontal-rules.scss deleted file mode 100644 index 74882cf..0000000 --- a/_sass/common/classes/_horizontal-rules.scss +++ /dev/null @@ -1,14 +0,0 @@ -@mixin horizontal-rules() { - &::before { - display: block; - font-size: map-get($base, font-size-h2); - color: $text-color-l; - text-align: center; - letter-spacing: map-get($spacers, 4); - content: "..."; - } -} - -.horizontal-rules { - @include horizontal-rules(); -} diff --git a/_sass/common/classes/_link.scss b/_sass/common/classes/_link.scss deleted file mode 100644 index 5e0cb48..0000000 --- a/_sass/common/classes/_link.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin link-colors($clr, $hover-clr: default, $active-clr: default, $focus-clr: null, $theme: default, $ignore-path: false) { - @include plain() { - text-decoration: none; - } - @include hover() { - text-decoration: underline; - } - @include active() { - text-decoration: none; - } - @include clickable($clr, null, $hover-clr, null, $active-clr, null, $focus-clr, null, $theme, $ignore-path); -} diff --git a/_sass/common/classes/_media.scss b/_sass/common/classes/_media.scss deleted file mode 100644 index e17544e..0000000 --- a/_sass/common/classes/_media.scss +++ /dev/null @@ -1,17 +0,0 @@ -@mixin media-breakpoint-down($name, $breakpoints: default) { - @if $breakpoints == default { - $breakpoints: $responsive; - } - @media (max-width: map-get($breakpoints, $name) - 1) { - @content; - } -} - -@mixin media-breakpoint-up($name, $breakpoints: default) { - @if $breakpoints == default { - $breakpoints: $responsive; - } - @media (min-width: map-get($breakpoints, $name)) { - @content; - } -} diff --git a/_sass/common/classes/_overflow.scss b/_sass/common/classes/_overflow.scss deleted file mode 100644 index 6529bf0..0000000 --- a/_sass/common/classes/_overflow.scss +++ /dev/null @@ -1,26 +0,0 @@ -@mixin overflow($overflow: auto, $direction: default) { - @if $direction == default { - overflow: $overflow; - } @else if $direction == "x" { - @if $overflow == auto { - overflow: hidden; - } - overflow-x: $overflow; - } @else if $direction == "y" { - @if $overflow == auto { - overflow: hidden; - } - overflow-y: $overflow; - } - @if $overflow == auto { - -webkit-overflow-scrolling: touch; - } -} - -.of-auto { - @include overflow(auto); -} - -.of-hidden { - @include overflow(hidden); -} diff --git a/_sass/common/classes/_pseudo.scss b/_sass/common/classes/_pseudo.scss deleted file mode 100644 index 53310a9..0000000 --- a/_sass/common/classes/_pseudo.scss +++ /dev/null @@ -1,33 +0,0 @@ -@mixin plain() { - &, - &:link, - &:visited { - @content; - } -} - -@mixin hover() { - .root[data-is-touch="false"] &:hover { - @content; - } -} - -@mixin active() { - .root[data-is-touch] &.active, - .root[data-is-touch] &:active { - @content; - } -} - -@mixin focus() { - .root[data-is-touch] &.focus { - @content; - } -} - -@mixin disabled() { - &.disabled, - &:disabled { - @content; - } -} diff --git a/_sass/common/classes/_shadow.scss b/_sass/common/classes/_shadow.scss deleted file mode 100644 index e28b9ca..0000000 --- a/_sass/common/classes/_shadow.scss +++ /dev/null @@ -1,22 +0,0 @@ -@mixin box-shadow($level: default, $color: default) { - @if $color == default { - $color: #000; - } - @if $level == 0 { - box-shadow: none; - } - @if $level == 1 or $level == default { - box-shadow: 0 4px 8px rgba($color, .23), 0 1px 3px rgba($color, .08), 0 6px 12px rgba($color, .02); - } - @if $level == 2 { - box-shadow: 0 8px 16px rgba($color, .23), 0 2px 6px rgba($color, .08), 0 12px 24px rgba($color, .02); - } -} - -.box-shadow-1 { - @include box-shadow(); -} - -.box-shadow-2 { - @include box-shadow(2); -} diff --git a/_sass/common/classes/_spacing.scss b/_sass/common/classes/_spacing.scss deleted file mode 100644 index c07fdce..0000000 --- a/_sass/common/classes/_spacing.scss +++ /dev/null @@ -1,81 +0,0 @@ -@mixin make-spacing($property, $side, $spacer, $negative: false) { - - $css_property: null; - $css_sides: null; - - @if ($property == "m") { - $css_property: "margin"; - } @else if ($property == "p") { - $css_property: "padding"; - } - - @if ($side == "t") { - $css_sides: ("top"); - } - @else if ($side == "b") { - $css_sides: ("bottom"); - } - @else if ($side == "l") { - $css_sides: ("left"); - } - @else if ($side == "r") { - $css_sides: ("right"); - } - @else if ($side == "x") { - $css_sides: ("left", "right"); - } - @else if ($side == "y") { - $css_sides: ("top", "bottom"); - } - @else if ($side == "") { - $css_sides: (""); - } - - @each $side in $css_sides { - @if ($spacer == "auto") { - @if ($side == "") { - #{$css_property}: auto; - } @else { - #{$css_property}-#{$side}: auto; - } - } @else { - @if ($side == "") { - @if ($negative == true) { - #{$css_property}: - map-get($spacers, $spacer); - } @else { - #{$css_property}: map-get($spacers, $spacer); - } - } @else { - @if ($negative == true) { - #{$css_property}-#{$side}: - map-get($spacers, $spacer); - } @else { - #{$css_property}-#{$side}: map-get($spacers, $spacer); - } - } - } - } -} - -@mixin make-spacings() { - $propertys: ("m", "p"); - $sides: ("t", "b", "l", "r", "x", "y", ""); - $spacers: (0, 1, 2, 3, 4, 5); - - @each $property in $propertys { - @each $side in $sides { - @each $spacer in $spacers { - .#{$property}#{$side}-#{$spacer} { - @include make-spacing($property, $side, $spacer); - } - } - } - } - - @each $side in $sides { - .m#{$side}-auto { - @include make-spacing("m", $side, "auto"); - } - } -} - -@include make-spacings(); diff --git a/_sass/common/classes/_split-line.scss b/_sass/common/classes/_split-line.scss deleted file mode 100644 index 4434c6f..0000000 --- a/_sass/common/classes/_split-line.scss +++ /dev/null @@ -1,24 +0,0 @@ -@mixin split-line($direction: default, $width: default, $color: default) { - @if $direction == default { - $direction: top; - } - @if $color == default { - $color: $border-color-l; - } - @if $width == default { - $width: 1px; - } - border: 0 solid $color; - @if $direction == top { - border-top-width: $width; - } - @if $direction == right { - border-right-width: $width; - } - @if $direction == bottom { - border-bottom-width: $width; - } - @if $direction == left { - border-left-width: $width; - } -} diff --git a/_sass/common/classes/_text.scss b/_sass/common/classes/_text.scss deleted file mode 100644 index ac36726..0000000 --- a/_sass/common/classes/_text.scss +++ /dev/null @@ -1,37 +0,0 @@ -@mixin text-light { - color: $text-color-theme-light; - h1, h2, h3 { - color: $text-color-theme-light-d; - } - h4, h5 { - color: $text-color-theme-light; - } - h6 { - color: $text-color-theme-light-l; - } - a:not(.button) { - @include link-colors($text-color-theme-light, $main-color-1); - } -} -@mixin text-dark { - color: $text-color-theme-dark; - h1, h2, h3 { - color: $text-color-theme-dark-d; - } - h4, h5 { - color: $text-color-theme-dark; - } - h6 { - color: $text-color-theme-dark-l; - } - a:not(.button) { - @include link-colors($text-color-theme-dark, $main-color-1); - } -} - -.text--light { - @include text-light(); -} -.text--dark { - @include text-dark(); -} diff --git a/_sass/common/classes/_transform.scss b/_sass/common/classes/_transform.scss deleted file mode 100644 index a552879..0000000 --- a/_sass/common/classes/_transform.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin transform($value) { - -webkit-transform: $value; - transform: $value; -} diff --git a/_sass/common/classes/_transition.scss b/_sass/common/classes/_transition.scss deleted file mode 100644 index abbe08b..0000000 --- a/_sass/common/classes/_transition.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin transition($value) { - -webkit-transition: $value; - transition: $value; -} diff --git a/_sass/common/classes/_user-select.scss b/_sass/common/classes/_user-select.scss deleted file mode 100644 index 104cbb5..0000000 --- a/_sass/common/classes/_user-select.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin user-select($value) { - -webkit-user-select: $value; - -moz-user-select: $value; - -ms-user-select: $value; - user-select: $value; -} diff --git a/_sass/common/components/_button.scss b/_sass/common/components/_button.scss deleted file mode 100644 index 08ce7a9..0000000 --- a/_sass/common/components/_button.scss +++ /dev/null @@ -1,163 +0,0 @@ -@mixin button() { - display: inline-block; - font-weight: map-get($button, font-weight); - line-height: 1 !important; - text-decoration: none !important; - cursor: pointer; - outline: none; - @include user-select(none); - svg { - width: 1rem; - height: 1rem; - } - @include disabled() { - cursor: not-allowed; - } -} - -.button { - @include button(); -} - -.button--primary { - @include clickable($text-color-1, $main-color-1); -} - -.button--secondary { - @include clickable($text-color-3, $main-color-3); -} - -.button--success { - @include clickable($text-color-function, $green); -} - -.button--info { - @include clickable($text-color-function, $blue); -} - -.button--warning { - @include clickable($text-color-function, $yellow); -} - -.button--error { - @include clickable($text-color-function, $red); -} - -.button--theme-light { - @include clickable($text-color-theme-dark, $main-color-theme-light); -} - -.button--theme-dark { - @include clickable($text-color-theme-light, $main-color-theme-dark); -} - -.button--outline-primary { - color: $main-color-1; - border: 1px solid $main-color-1; - @include clickable($main-color-1, transparent, $text-color-1, $main-color-1); -} - -.button--outline-secondary { - color: $main-color-3; - border: 1px solid $main-color-3; - @include clickable($main-color-3, transparent, $text-color-3, $main-color-3); -} - -.button--outline-success { - color: $green; - border: 1px solid $green; - @include clickable($green, transparent, $text-color-function, $green); -} - -.button--outline-info { - color: $blue; - border: 1px solid $blue; - @include clickable($blue, transparent, $text-color-function, $blue); -} - -.button--outline-warning { - color: $yellow; - border: 1px solid $yellow; - @include clickable($yellow, transparent, $text-color-function, $yellow); -} - -.button--outline-error { - color: $red; - border: 1px solid $red; - @include clickable($red, transparent, $text-color-function, $red); -} - -.button--outline-theme-light { - color: $main-color-theme-light; - border: 1px solid $main-color-theme-light; - @include clickable($main-color-theme-light, transparent, $text-color-theme-dark, $main-color-theme-light); -} - -.button--outline-theme-dark { - color: $main-color-theme-dark; - border: 1px solid $main-color-theme-dark; - @include clickable($main-color-theme-dark, transparent, $text-color-theme-light, $main-color-theme-dark); -} - -.button--pill { - border-radius: map-get($button, pill-radius); - @extend .button--md; -} - -.button--rounded { - border-radius: map-get($base, border-radius); - @extend .button--md; -} - -.button--circle { - @include inline-flex(); - @include justify-content(center); - @include align-items(center); - border-radius: 50%; - @extend .button--md; -} - -.button--md { - padding: map-get($button, padding-y) map-get($button, padding-x); - font-size: map-get($base, font-size); - &.button--circle { - width: map-get($button, circle-diameter); - height: map-get($button, circle-diameter); - } -} - -.button--xs { - padding: map-get($button, padding-y-xs) map-get($button, padding-x-xs); - font-size: map-get($base, font-size-xs); - &.button--circle { - width: map-get($button, circle-diameter-xs); - height: map-get($button, circle-diameter-xs); - } -} - -.button--sm { - padding: map-get($button, padding-y-sm) map-get($button, padding-x-sm); - font-size: map-get($base, font-size-sm); - &.button--circle { - width: map-get($button, circle-diameter-sm); - height: map-get($button, circle-diameter-sm); - } -} - -.button--lg { - padding: map-get($button, padding-y-lg) map-get($button, padding-x-lg); - font-size: map-get($base, font-size-lg); - &.button--circle { - width: map-get($button, circle-diameter-lg); - height: map-get($button, circle-diameter-lg); - } -} - -.button--xl { - padding: map-get($button, padding-y-xl) map-get($button, padding-x-xl); - font-size: map-get($base, font-size-xl); - &.button--circle { - width: map-get($button, circle-diameter-xl); - height: map-get($button, circle-diameter-xl); - } -} diff --git a/_sass/common/components/_card.scss b/_sass/common/components/_card.scss deleted file mode 100644 index 2431461..0000000 --- a/_sass/common/components/_card.scss +++ /dev/null @@ -1,103 +0,0 @@ - -.card { - max-width: 18rem; - border-radius: map-get($base, border-radius); - @include box-shadow(); - @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function)); - & > :first-child { - border-top-left-radius: map-get($base, border-radius); - border-top-right-radius: map-get($base, border-radius); - } - & > :last-child { - border-bottom-right-radius: map-get($base, border-radius); - border-bottom-left-radius: map-get($base, border-radius); - } -} - -.cell { - & > .card { - max-width: unset; - } -} - -.card__content { - padding: map-get($spacers, 2) map-get($spacers, 3); -} - -.card__header, .card__header > a { - @include link-colors($text-color-d, $main-color-1); -} - -.card__image { - position: relative; - width: 100%; - & > img { - display: block; - width: 100%; - height: auto; - border-radius: inherit; - } - & > .overlay { - position: absolute; - width: 100%; - max-height: 100%; - padding: map-get($spacers, 2); - a { - text-decoration: none !important; - } - } - & > .overlay, & > .overlay--top { - top: 0; - bottom: auto; - border-top-left-radius: inherit; - border-top-right-radius: inherit; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - } - & > .overlay--bottom { - top: auto; - bottom: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-right-radius: inherit; - border-bottom-left-radius: inherit; - } - & > .overlay--full { - top: 0; - bottom: 0; - } - & > .overlay, & > .overlay--dark { - @extend .text--dark; - background-color: rgba(#000, .4); - } - & > .overlay--light { - @extend .text--light; - background: rgba(#fff, .4); - } -} - -.card--clickable { - cursor: pointer; - @include hover() { - @include box-shadow(2); - .card__image { - & > img { - height: inherit; - } - } - } - @include transition(map-get($clickable, transition)); -} - -.card--flat { - @include box-shadow(0); - .card__image { - & > img { - border-radius: map-get($base, border-radius); - } - } - .card__content { - padding-top: 0; - padding-left: 0; - } -} diff --git a/_sass/common/components/_gallery.scss b/_sass/common/components/_gallery.scss deleted file mode 100644 index 689eeae..0000000 --- a/_sass/common/components/_gallery.scss +++ /dev/null @@ -1,21 +0,0 @@ -.gallery { - height: 100%; - @include flexbox(); - @include flex-direction(column); -} - -.gallery__swiper { - @include flex(1); -} - -.gallery-item { - @include flexbox(); - @include align-items(center); - @include justify-content(center); - height: 100%; - overflow: hidden; -} - -.gallery-item__main { - display: block; -} diff --git a/_sass/common/components/_hero.scss b/_sass/common/components/_hero.scss deleted file mode 100644 index 81a72cc..0000000 --- a/_sass/common/components/_hero.scss +++ /dev/null @@ -1,70 +0,0 @@ -.hero { - background-position: 50% 50%; - @include flexbox(); - @include flex-direction(column); - @include justify-content(center); - h1 { font-size: map-get($base, font-size-h1-xl); } - h2 { font-size: map-get($base, font-size-h2-xl); } - h3 { font-size: map-get($base, font-size-h3-xl); } - h4 { font-size: map-get($base, font-size-h4-xl); } - h5 { font-size: map-get($base, font-size-h5-xl); } - h6 { font-size: map-get($base, font-size-h6-xl); } - p { font-size: map-get($base, font-size-xl); } - @include media-breakpoint-down(lg) { - h1 { font-size: map-get($base, font-size-h1-lg); } - h2 { font-size: map-get($base, font-size-h2-lg); } - h3 { font-size: map-get($base, font-size-h3-lg); } - h4 { font-size: map-get($base, font-size-h4-lg); } - h5 { font-size: map-get($base, font-size-h5-lg); } - h6 { font-size: map-get($base, font-size-h6-lg); } - p { font-size: map-get($base, font-size-lg); } - } - @include media-breakpoint-down(md) { - h1 { font-size: map-get($base, font-size-h1-sm); } - h2 { font-size: map-get($base, font-size-h2-sm); } - h3 { font-size: map-get($base, font-size-h3-sm); } - h4 { font-size: map-get($base, font-size-h4-sm); } - h5 { font-size: map-get($base, font-size-h5-sm); } - h6 { font-size: map-get($base, font-size-h6-sm); } - p { font-size: map-get($base, font-size); } - } - background-size: cover; - -} - -.hero--center { - text-align: center; - .menu { - @extend .menu--center; - } -} - -.hero--light { - @extend .text--light; -} - -.hero--dark { - @extend .text--dark; -} - -.hero__content { - margin: map-get($spacers, 5); - @include media-breakpoint-down(lg) { - margin: map-get($spacers, 5) map-get($spacers, 4); - } - @include media-breakpoint-down(md) { - margin: map-get($spacers, 4) map-get($spacers, 3); - } -} - -.heros { - & > .hero { - margin: map-get($spacers, 5); - @include media-breakpoint-down(lg) { - margin: map-get($spacers, 3); - } - @include media-breakpoint-down(md) { - margin: map-get($spacers, 2) 0; - } - } -} diff --git a/_sass/common/components/_image.scss b/_sass/common/components/_image.scss deleted file mode 100644 index 9d1a220..0000000 --- a/_sass/common/components/_image.scss +++ /dev/null @@ -1,19 +0,0 @@ -.image { - max-width: 100%; - @extend .image--md; -} -.image--md { - width: map-get($image, width); -} -.image--xl { - width: map-get($image, width-xl); -} -.image--lg { - width: map-get($image, width-lg); -} -.image--sm { - width: map-get($image, width-sm); -} -.image--xs { - width: map-get($image, width-xs); -} diff --git a/_sass/common/components/_item.scss b/_sass/common/components/_item.scss deleted file mode 100644 index a1a9fd0..0000000 --- a/_sass/common/components/_item.scss +++ /dev/null @@ -1,100 +0,0 @@ -.item { - @include flexbox(); - @include media-breakpoint-down(md) { - @include flex-direction(column); - } -} - -.item__image { - margin-right: map-get($spacers, 3); - & + .item__content { - & > :first-child { - margin-top: 0; - & > :first-child { - margin-top: 0; - } - } - } - @include media-breakpoint-down(md) { - margin-right: 0; - } -} - -.item__content { - @include flex(1); - min-width: 0; -} - -a > .item__header, a.item__header, .item__header > a { - @include link-colors($text-color-d, $main-color-1); -} - -.item__meta { - color: $text-color-l; -} - -.item__description { - &, .article__content { - font-size: map-get($base, font-size-sm); - line-height: map-get($base, line-height); - @include block-elements() { - margin-top: map-get($spacers, 2); - margin-bottom: map-get($spacers, 2); - } - @include heading-elements() { - margin-top: map-get($spacers, 3); - } - h1, h2, h3 { - color: $text-color; - } - h1, h2 { - padding: 0; - border: none; - } - h1 { - font-size: map-get($base, font-size-h1-xs); - } - h2 { - font-size: map-get($base, font-size-h2-xs); - } - h3 { - font-size: map-get($base, font-size-h3-xs); - } - h4 { - font-size: map-get($base, font-size-h4-xs); - } - h5 { - font-size: map-get($base, font-size-h5-xs); - } - h6 { - font-size: map-get($base, font-size-h6-xs); - } - img { - max-height: 32rem; - @include media-breakpoint-down(md) { - max-height: 14rem; - } - } - } -} - -.items { - & > .item { - &:not(:last-child) { - margin-bottom: map-get($spacers, 2); - } - } -} - -.items--divided { - & > .item { - &:not(:first-child) { - padding-top: map-get($spacers, 4); - } - &:not(:last-child) { - padding-bottom: map-get($spacers, 4); - @include split-line(bottom); - } - list-style-type: none; - } -} diff --git a/_sass/common/components/_menu.scss b/_sass/common/components/_menu.scss deleted file mode 100644 index 222676a..0000000 --- a/_sass/common/components/_menu.scss +++ /dev/null @@ -1,67 +0,0 @@ -@mixin menu-direction($direction: default) { - @if $direction == default { - $direction: "horizontal"; - } - @if $direction == "vertical" { - @include flex-direction(column); - } @else { - @include flex-direction(row); - } -} - -@mixin menu($horizontal-spacer: default, $horizontal-item-vertical-spacer: default, $wrap: default) { - @if $horizontal-spacer == default { - $horizontal-spacer: map-get($menu, horizontal-spacer); - } - @if $horizontal-item-vertical-spacer == default { - $horizontal-item-vertical-spacer: map-get($menu, horizontal-item-vertical-spacer); - } - @if $wrap == default { - $wrap: wrap; - } - @include flexbox(); - @include flex-wrap($wrap); - margin-top: 0; - margin-bottom: 0; - & > li { - @if $horizontal-item-vertical-spacer { - margin-top: map-get($spacers, $horizontal-item-vertical-spacer); - margin-bottom: map-get($spacers, $horizontal-item-vertical-spacer); - } - margin-right: map-get($spacers, $horizontal-spacer); - list-style-type: none; - &:last-child { - margin-right: 0; - } - } -} - -.menu { - @include menu(); - @include menu-direction(); - @include align-items(center); -} - -.menu--vertical { - @include menu-direction("vertical"); - @include align-items(normal); - & > li { - margin-right: 0; - } -} - -.menu--inline { - @include inline-flex(); -} - -.menu--center { - @include justify-content(center); -} - -.menu--nowrap { - @include flex-wrap(nowrap); -} - -.menu--grow { - @include flex-grow(1); -} diff --git a/_sass/common/components/_modal.scss b/_sass/common/components/_modal.scss deleted file mode 100644 index cd71628..0000000 --- a/_sass/common/components/_modal.scss +++ /dev/null @@ -1,39 +0,0 @@ -@mixin modal($z-index: default, $color: default, $background-color: default) { - @if $z-index == default { - $z-index: map-get($z-indexes, modal); - } - @if $color == default { - $color: $text-color-theme-dark; - } - @if $background-color == default { - $background-color: $mask-color; - } - position: fixed; - top: 0; - left: 0; - z-index: $z-index; - width: 100%; - height: 100%; - color: $color; - touch-action: none; - background-color: $background-color; - opacity: 0; - @include transform(translate(100%, 0)); - @include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function), - transform 0s map-get($animation, duration) map-get($animation, timing-function)}); -} -@mixin modal--show() { - opacity: 1; - @include transform(translate(0, 0)); - @include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function)}); -} - -.modal { - @include modal(); -} -.modal--show { - @include modal--show(); -} -.modal--overflow { - @include overflow(auto); -} diff --git a/_sass/common/components/_swiper.scss b/_sass/common/components/_swiper.scss deleted file mode 100644 index 3493a62..0000000 --- a/_sass/common/components/_swiper.scss +++ /dev/null @@ -1,48 +0,0 @@ -.swiper { - position: relative; - @include overflow(hidden); -} - -.swiper__wrapper, .swiper__slide { - width: 100%; - height: 100%; -} - -.swiper__wrapper { - @include flexbox(); -} - -.swiper__wrapper--animation { - @include transition(transform map-get($animation, duration) map-get($animation, timing-function)); -} - -.swiper__slide { - @include flex-shrink(0); - & > img { - max-width: 100%; - } -} - -.swiper__button { - position: absolute; - top: 50%; - @extend .button, .button--circle; - @include transform(translate(0, -50%)); - @include clickable($text-color-d, rgba($main-color-3, .4)); -} - -.swiper--light .swiper__button { - @include clickable($text-color-theme-light, rgba($main-color-theme-dark, .4)); -} - -.swiper--dark .swiper__button { - @include clickable($text-color-theme-dark, rgba($main-color-theme-light, .4)); -} - -.swiper__button--prev { - left: 10px; -} - -.swiper__button--next { - right: 10px; -} diff --git a/_sass/common/components/_toc.scss b/_sass/common/components/_toc.scss deleted file mode 100644 index 9fd1421..0000000 --- a/_sass/common/components/_toc.scss +++ /dev/null @@ -1,124 +0,0 @@ -ul.toc { - display: block; - margin: 0; - color: $text-color; - list-style-type: none; - & > li { - margin: map-get($spacers, 1) / 2 0; - a { - display: inline-block; - margin: map-get($spacers, 1) / 4 0; - text-decoration: none !important; - } - } - .toc-h1, - .toc-h2, - .toc-h3, - .toc-h4, - .toc-h5, - .toc-h6 { - a { - @include link-colors($text-color, $main-color-1); - } - &.active { - a { - @include link-colors($main-color-1); - } - } - } - - .toc-h2, - .toc-h3, - .toc-h4, - .toc-h5, - .toc-h6 { - &, a { - font-size: map-get($base, font-size-xs); - font-weight: map-get($base, font-weight); - line-height: map-get($base, line-height-xs); - } - } - .toc-h1 { - @include split-line(bottom); - padding: map-get($spacers, 2) 0 map-get($spacers, 1) 0; - margin-bottom: map-get($spacers, 2); - color: $text-color-d; - &, a { - font-size: map-get($base, font-size-sm); - font-weight: map-get($base, font-weight-bold); - line-height: map-get($base, line-height-sm); - } - a { - @include link-colors($text-color-d, $main-color-1); - } - } - .toc-h2 { - &, a { - font-weight: map-get($base, font-weight-bold); - } - } - .toc-h3 { - margin-left: map-get($spacers, 3); - } - .toc-h4 { - margin-left: map-get($spacers, 3) * 2; - } - .toc-h5, - .toc-h6 { - margin-left: map-get($spacers, 3) * 3; - } - .toc-h6 { - color: $text-color-l; - a { - @include link-colors($text-color-l, $main-color-1); - } - } -} - -ul.toc--ellipsis { - & > li { - @include overflow(hidden); - text-overflow: ellipsis; - white-space: nowrap; - } -} - -ul.toc--navigator { - & > li { - a { - padding-left: map-get($spacers, 2); - margin: map-get($spacers, 1) 0; - } - &.active { - a { - margin-left: -4px; - @include split-line(left, 4px, $main-color-1); - } - } - } - .toc-h2, - .toc-h3, - .toc-h4 { - color: $text-color-l; - a { - @include link-colors($text-color-l); - } - } - .toc-h1 { - &, a { - font-size: map-get($base, font-size); - line-height: map-get($base, line-height); - } - color: $text-color; - a { - @include link-colors($text-color-d); - } - } - .toc-h2 { - &, a { - font-size: map-get($base, font-size-sm); - font-weight: map-get($base, font-weight-bold); - line-height: map-get($base, line-height-sm); - } - } -} |