aboutsummaryrefslogtreecommitdiff
path: root/themes/docsy/assets/scss/support
diff options
context:
space:
mode:
authorDimitri Staessens <dimitri@ouroboros.rocks>2019-10-06 21:10:46 +0200
committerDimitri Staessens <dimitri@ouroboros.rocks>2019-10-06 21:10:46 +0200
commit568553394d0a8b34668a75c9839a0f1f426469b2 (patch)
tree175c08844f05611b059ba6900fb6519dbbc735d2 /themes/docsy/assets/scss/support
parentd5d6f70371958eec0679831abd283498ff2731e5 (diff)
downloadwebsite-568553394d0a8b34668a75c9839a0f1f426469b2.tar.gz
website-568553394d0a8b34668a75c9839a0f1f426469b2.zip
theme: Switch to docsy theme
Diffstat (limited to 'themes/docsy/assets/scss/support')
-rw-r--r--themes/docsy/assets/scss/support/_functions.scss21
-rw-r--r--themes/docsy/assets/scss/support/_mixins.scss45
-rw-r--r--themes/docsy/assets/scss/support/_utilities.scss82
3 files changed, 148 insertions, 0 deletions
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