summaryrefslogtreecommitdiff
path: root/_sass/common/components
diff options
context:
space:
mode:
Diffstat (limited to '_sass/common/components')
-rw-r--r--_sass/common/components/_button.scss163
-rw-r--r--_sass/common/components/_card.scss103
-rw-r--r--_sass/common/components/_gallery.scss21
-rw-r--r--_sass/common/components/_hero.scss70
-rw-r--r--_sass/common/components/_image.scss19
-rw-r--r--_sass/common/components/_item.scss100
-rw-r--r--_sass/common/components/_menu.scss67
-rw-r--r--_sass/common/components/_modal.scss39
-rw-r--r--_sass/common/components/_swiper.scss48
-rw-r--r--_sass/common/components/_toc.scss124
10 files changed, 754 insertions, 0 deletions
diff --git a/_sass/common/components/_button.scss b/_sass/common/components/_button.scss
new file mode 100644
index 0000000..08ce7a9
--- /dev/null
+++ b/_sass/common/components/_button.scss
@@ -0,0 +1,163 @@
+@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
new file mode 100644
index 0000000..2431461
--- /dev/null
+++ b/_sass/common/components/_card.scss
@@ -0,0 +1,103 @@
+
+.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
new file mode 100644
index 0000000..689eeae
--- /dev/null
+++ b/_sass/common/components/_gallery.scss
@@ -0,0 +1,21 @@
+.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
new file mode 100644
index 0000000..81a72cc
--- /dev/null
+++ b/_sass/common/components/_hero.scss
@@ -0,0 +1,70 @@
+.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
new file mode 100644
index 0000000..9d1a220
--- /dev/null
+++ b/_sass/common/components/_image.scss
@@ -0,0 +1,19 @@
+.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
new file mode 100644
index 0000000..a1a9fd0
--- /dev/null
+++ b/_sass/common/components/_item.scss
@@ -0,0 +1,100 @@
+.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
new file mode 100644
index 0000000..222676a
--- /dev/null
+++ b/_sass/common/components/_menu.scss
@@ -0,0 +1,67 @@
+@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
new file mode 100644
index 0000000..cd71628
--- /dev/null
+++ b/_sass/common/components/_modal.scss
@@ -0,0 +1,39 @@
+@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
new file mode 100644
index 0000000..3493a62
--- /dev/null
+++ b/_sass/common/components/_swiper.scss
@@ -0,0 +1,48 @@
+.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
new file mode 100644
index 0000000..9fd1421
--- /dev/null
+++ b/_sass/common/components/_toc.scss
@@ -0,0 +1,124 @@
+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);
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.45.2) at 2024-12-25 17:29:24 +0000