diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 3b143e0..eb59566 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -105,3 +105,6 @@ - Used CSS variables for most of the form `input` custmization, these should be easy to change. - Replaced old `::placeholder` definitions with `:placeholder-shown` for most browsers, kept the `-ms-` prefixed one for Edge. Using `:placeholder-shown` is following the latest standards, it has a high implementation rate, does not conflict with the browser support **Gluon** is targeting and, if it does not work, the code will default to what browsers usually do, which is pretty much what I am doing, too. It also simplifies the code a bit. `::-ms-placeholder` simulates the default behavior, so all browsers should get a similar styling. - Copied over all the fixes for `button` and similar elements, as they were up-to-date. +- Created proper variables for `button`-like elements, built element syling on CSS variables. +- Tested CSS variables for button, should allow for easy customization and additional styles, meaning it will be a breeze to add all the extra stuff as soon as possible. +- Bundled up `[disabled]` styling for all elements in `input_control` as this should now be the default behavior of the code. diff --git a/src/mini/_core.scss b/src/mini/_core.scss index 99cc683..2f0c851 100644 --- a/src/mini/_core.scss +++ b/src/mini/_core.scss @@ -13,7 +13,7 @@ $_body-margin: 0 !default; // [Hidden] Margin for body $fore-color: #111 !default; // Text & foreground color $secondary-fore-color: #444 !default; // Secondary text & foreground color $back-color: #f8f8f8 !default; // Background color -$secondary-back-color: #eee !default; // Secondary background color +$secondary-back-color: #f0f0f0 !default; // Secondary background color $blockquote-color: #f57c00 !default; //
sidebar and quotation color $pre-color: #1565c0 !default; //sidebar color $border-color: #aaa !default; // Border color @@ -256,7 +256,7 @@ pre { // Fore color is the default, can be altered manually. 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}); } diff --git a/src/mini/_input_control.scss b/src/mini/_input_control.scss index 54fe375..6c84da2 100644 --- a/src/mini/_input_control.scss +++ b/src/mini/_input_control.scss @@ -7,12 +7,24 @@ $_include-fluid-input-group: true !default; // [Hidden] Should fluid i $input-group-fluid-name: 'fluid' !default; // Class name for fluid input groups. $input-group-vertical-name: 'vertical' !default; // Class name for vertical input groups. $input-group-mobile-breakpoint: 767px !default; // Breakpoint for fluid input group mobile view. +$button-class-name: 'button' !default; // Class name for elements styled as buttons. $input-disabled-opacity: 0.75 !default; // Opacity for input elements when disabled. $input-focus-color: #0288d1 !default; // Border color for focused input elements. $input-invalid-color: #d32f2f !default; // Border color for invalid input elements. +$button-back-color: #e2e2e2 !default; // Background color for buttons. +$button-hover-back-color: #dcdcdc !default; // Background color for buttons (hover). +$button-fore-color: #212121 !default; // Text color for buttons. +$button-border-color: transparent !default; // Border color for buttons. +$button-hover-border-color: transparent !default; // Border color for buttons (hover). // CSS variable name definitions [exercise caution if modifying these] $input-focus-color-var: '--input-focus-color' !default; $input-invalid-color-var: '--input-invalid-color' !default; +$button-back-color-var: '--button-back-color' !default; +$button-hover-back-color-var: '--button-hover-back-color' !default; +$button-fore-color-var: '--button-fore-color' !default; +$button-hover-fore-color-var: '--button-hover-fore-color' !default; +$button-border-color-var: '--button-border-color' !default; +$button-hover-border-color-var: '--button-hover-border-color' !default; // 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. @@ -20,6 +32,11 @@ $input-invalid-color-var: '--input-invalid-color' !default; :root { #{$input-focus-color-var}: $input-focus-color; #{$input-invalid-color-var}: $input-invalid-color; + #{$button-back-color-var}: $button-back-color; + #{$button-hover-back-color-var}: $button-hover-back-color; + #{$button-fore-color-var}: $button-fore-color; + #{$button-border-color-var}: $button-border-color; + #{$button-hover-border-color-var}: $button-hover-border-color; } // Base form styling form { // Text color is the default, this can be changed manually. @@ -118,10 +135,6 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, s border-color: var(#{$input-focus-color-var}); box-shadow: none; } - &:disabled, &[disabled] { - cursor: not-allowed; - opacity: $input-disabled-opacity; - } &:invalid, &:focus:invalid{ border-color: var(#{$input-invalid-color-var}); box-shadow: none; @@ -162,3 +175,30 @@ button { overflow: visible; // Show the overflow in IE. text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE. } +// Default styling +button, [type="button"], [type="submit"], [type="reset"], +a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name}, +a[role="button"], label[role="button"], [role="button"] { + display: inline-block; + background: var(#{$button-back-color-var}); + color: var(#{$button-fore-color-var}); + border: $__1px solid var(#{$button-border-color-var}); + border-radius: var(#{$universal-border-radius-var}); + padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var})); + margin: var(#{$universal-margin-var}); + text-decoration: none; + cursor: pointer; + transition: background 0.3s; + &:hover, &:focus { + background: var(#{$button-hover-back-color-var}); + border-color: var(#{$button-hover-border-color-var}); + } +} +// Disabled styling for input and button elements. +input, textarea, select, button, .#{$button-class-name}, [role="button"] { + // .button[disabled] is actually higher specificity than a.button, so no need for more than that + &:disabled, &[disabled] { + cursor: not-allowed; + opacity: $input-disabled-opacity; + } +} diff --git a/src/mini/_input_control_mixins.scss b/src/mini/_input_control_mixins.scss new file mode 100644 index 0000000..e69de29