From 568553394d0a8b34668a75c9839a0f1f426469b2 Mon Sep 17 00:00:00 2001 From: Dimitri Staessens Date: Sun, 6 Oct 2019 21:10:46 +0200 Subject: theme: Switch to docsy theme --- themes/docsy/assets/scss/support/_functions.scss | 21 ++++++ themes/docsy/assets/scss/support/_mixins.scss | 45 +++++++++++++ themes/docsy/assets/scss/support/_utilities.scss | 82 ++++++++++++++++++++++++ 3 files changed, 148 insertions(+) create mode 100644 themes/docsy/assets/scss/support/_functions.scss create mode 100644 themes/docsy/assets/scss/support/_mixins.scss create mode 100644 themes/docsy/assets/scss/support/_utilities.scss (limited to 'themes/docsy/assets/scss/support') diff --git a/themes/docsy/assets/scss/support/_functions.scss b/themes/docsy/assets/scss/support/_functions.scss new file mode 100644 index 0000000..2b641f0 --- /dev/null +++ b/themes/docsy/assets/scss/support/_functions.scss @@ -0,0 +1,21 @@ +// Common functions. + +@function prepend($list, $value) { + @return join($value, $list); +} + + + +// See https://www.sitepoint.com/using-sass-build-color-palettes/ +@function color-diff($a, $b) { + $sat: saturation($a) - saturation($b); + $lig: lightness($a) - lightness($b); + $fn-sat: if($sat > 0, 'desaturate', 'saturate'); + $fn-lig: if($lig > 0, 'darken', 'lighten'); + + @return ( + adjust-hue: -(hue($a) - hue($b)), + #{$fn-sat}: abs($sat), + #{$fn-lig}: abs($lig) + ); +} \ No newline at end of file diff --git a/themes/docsy/assets/scss/support/_mixins.scss b/themes/docsy/assets/scss/support/_mixins.scss new file mode 100644 index 0000000..24e2cd1 --- /dev/null +++ b/themes/docsy/assets/scss/support/_mixins.scss @@ -0,0 +1,45 @@ +// Some simple mixins. + +@mixin bg-gradient-variant($parent, $color) { + #{$parent} { + background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; + } +} + +@mixin link-variant($parent, $color, $hover-color, $underline: false) { + #{$parent} { + color: $color; + + @if $underline { + text-decoration: underline; + } + } +} + +@mixin optional-at-root($sel) { + @at-root #{if(not &, $sel, selector-append(&, $sel))} { + @content; + } +} + +// placeholder allows styling of the placeholder used in search input etc. +@mixin placeholder { + @include optional-at-root("::-webkit-input-placeholder") { + @content; + } + + + @include optional-at-root(":-moz-placeholder") { + @content; + } + + + @include optional-at-root("::-moz-placeholder") { + @content; + } + + + @include optional-at-root(":-ms-input-placeholder") { + @content; + } +} diff --git a/themes/docsy/assets/scss/support/_utilities.scss b/themes/docsy/assets/scss/support/_utilities.scss new file mode 100644 index 0000000..ce9bc2e --- /dev/null +++ b/themes/docsy/assets/scss/support/_utilities.scss @@ -0,0 +1,82 @@ +// Mixins + +@mixin optional-at-root($sel) { + @at-root #{if(not &, $sel, selector-append(&, $sel))} { + @content; + } +} + +@mixin placeholder { + @include optional-at-root("::-webkit-input-placeholder") { + @content; + } + + + @include optional-at-root(":-moz-placeholder") { + @content; + } + + + @include optional-at-root("::-moz-placeholder") { + @content; + } + + + @include optional-at-root(":-ms-input-placeholder") { + @content; + } +} + +// Common util classes. + +.td-border-top { + border: none; + border-top: 1px solid #eee; +} + +.td-border-none { + border: none; +} + +.td-block-padding { + padding-top: $td-block-space-top-base ; + padding-bottom: $td-block-space-bottom-base; + + @include media-breakpoint-up(md) { + padding-top: $td-block-space-top-base * 1.25; + padding-bottom: $td-block-space-bottom-base * 1.25; + } +} + +.td-overlay { + position: relative; + + &::after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + &--dark::after { + background-color: rgba($dark, 0.3); + } + + &--light::after { + background-color: rgba($light, 0.3); + } + + &__inner { + position: relative; + z-index: 1; + } +} + +.td-max-width-on-larger-screens { + @include media-breakpoint-up(lg) { + max-width: 80%; + } + +} \ No newline at end of file -- cgit v1.2.3