From cf5b8076f729e26c8a92e7c3769b7ff1ec203284 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 6 Nov 2017 23:06:17 +0200 Subject: [PATCH] Base form styling Also some fixes for missing values in core. --- docs/v3/DEVLOG.md | 3 +++ src/flavors/mini-doc.scss | 1 + src/mini/_core.scss | 27 ++++++++++++++++++++++----- src/mini/_input_control.scss | 19 +++++++++++++++++++ src/mini/_navigation.scss | 0 5 files changed, 45 insertions(+), 5 deletions(-) create mode 100644 src/mini/_input_control.scss create mode 100644 src/mini/_navigation.scss diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index b46a4cb..8600ca0 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -91,3 +91,6 @@ - Scraped the old website to get content for new documentation. - Started development of the new website app in `v3_dev`. This is going to be where the docs app is going to be created in. - Initial scaffolding of the documentation UI. +- Added conditions for `box-shadow` values in `core`. The module is mostly complete, apart from extra features that I might want to add in the future. +- Decided not to add the `select` fix in `input_control`. Browsers are pretty wild around the element and its use cases are causing a ton of complications. It is possible, but quite unlikely that it will be rebuilt in the old way in the future, but most likely it will just follow the OS/Browser/Native UI as it should have done originally. It's debatable if this is for the best, but quite frankly it saves me a lot of time and effort for a single element and a lot of bytes in the codebase. I would rather not style it and provide an outside fix for safety, one that goes a bit against semantics to provide better styling. If you are reading this and want to tell me why this was a bad choice and led to the demise of the **hugging cat**, kindly do! +- Added styling for `form` elements, simplified the values of `padding` to make them more reasonable and uniform. diff --git a/src/flavors/mini-doc.scss b/src/flavors/mini-doc.scss index 04c4fbe..1d172f9 100644 --- a/src/flavors/mini-doc.scss +++ b/src/flavors/mini-doc.scss @@ -2,6 +2,7 @@ @import '../mini/core'; @import '../mini/grid'; +@import '../mini/input_control'; :not(.doc) { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; diff --git a/src/mini/_core.scss b/src/mini/_core.scss index bf64913..99cc683 100644 --- a/src/mini/_core.scss +++ b/src/mini/_core.scss @@ -25,6 +25,7 @@ $subheading-top-margin: -0.25rem !default; // Top margin of element $universal-margin: 0.5rem !default; // Universal margin for the most elements $universal-padding: 0.5rem !default; // Universal padding for the most elements $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements +$universal-box-shadow: none !default; // Universal box-shadow for most elements $small-font-size: 0.75em !default; // Font sizing for elements $heading-font-weight: 500 !default; // Font weight for headings $bold-font-weight: 700 !default; // Font weight for and @@ -51,6 +52,7 @@ $heading-ratio-var: '--heading-ratio' !default; $universal-margin-var: '--universal-margin' !default; $universal-padding-var: '--universal-padding' !default; $universal-border-radius-var: '--universal-border-radius' !default; +$universal-box-shadow-var: '--universal-box-shadow' !default; $a-link-color-var: '--a-link-color' !default; $a-visited-color-var: '--a-visited-color' !default; /* Core module CSS variable definitions */ @@ -69,6 +71,9 @@ $a-visited-color-var: '--a-visited-color' !default; #{$universal-border-radius-var}: $universal-border-radius; #{$a-link-color-var} : $a-link-color; #{$a-visited-color-var} : $a-visited-color; + @if $universal-box-shadow != none { + #{$universal-box-shadow-var}: $universal-box-shadow; + } } html { font-size: $base-root-font-size; // Set root's font sizing. @@ -186,7 +191,7 @@ hr { background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent); } -blockquote { // Doesn't have a back color yet, as well as no shadow... +blockquote { // Doesn't have a back color by default, can be added manually. display: block; position: relative; font-style: italic; @@ -196,6 +201,9 @@ blockquote { // Doesn't have a back color yet, as well as no shadow... border: $__1px solid var(#{$secondary-border-color-var}); border-left: 6*$__1px solid var(#{$blockquote-color-var}); border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0; + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } &:before { position: absolute; top: calc(0rem - var(#{$universal-padding-var})); @@ -220,29 +228,38 @@ code, kbd, pre, samp { font-size: $code-font-size; } -code { // No border color yet and fore color is the default, as well as no shadow... +code { // No border color by default and fore color is the default for text, can be altered manually. background: var(#{$secondary-back-color-var}); border-radius: var(#{$universal-border-radius-var}); // This could be a bit counterintuitive and burden the codebase a bit, look into it again? padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2); + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } } -kbd { // No border color yet and no shadow, colors might want to be tweaked a bit... +kbd { // No border color by default, can be altered manually. background: var(#{$fore-color-var}); color: var(#{$back-color-var}); border-radius: var(#{$universal-border-radius-var}); // This could be a bit counterintuitive and burden the codebase a bit, look into it again? padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2); + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } } -pre { // Fore color is the default, as well as no shadow... +pre { // Fore color is the default, can be altered manually. overflow: auto; // Responsiveness background: var(#{$secondary-back-color-var}); padding: calc(1.5 * var(#{$universal-padding-var})); margin: var(#{$universal-margin-var}); border: $__1px solid var(#{$secondary-border-color-var}); border-left: 4*$__1px solid var(#{$pre-color-var}); - border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0; + border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0; + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } } // Prevent elements from affecting the line height in all browsers. diff --git a/src/mini/_input_control.scss b/src/mini/_input_control.scss new file mode 100644 index 0000000..cf8ba0e --- /dev/null +++ b/src/mini/_input_control.scss @@ -0,0 +1,19 @@ +/* + Definitions for forms and input elements. +*/ +// Different elements are styled based on the same set of rules. + +// Check the `_input_control_mixins.scss` file to find this module's mixins. +// @import 'input_control_mixins'; +// TODO: Uncomment above as soon as mixins are ready to be used. +// Base form styling +form { // Text color is the default, this can be changed manually. + background: var(#{$secondary-back-color-var}); + border: $__1px solid var(#{$secondary-border-color-var}); + border-radius: var(#{$universal-border-radius-var}); + margin: var(#{$universal-margin-var}); + padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var}); + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } +} diff --git a/src/mini/_navigation.scss b/src/mini/_navigation.scss new file mode 100644 index 0000000..e69de29