From 3d676b1cd6089e4bda4568172e1adb8697654a9c Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Tue, 7 Nov 2017 17:02:57 +0200 Subject: [PATCH] Button styling Mostly complete, mixins are not yet implemented. --- docs/v3/DEVLOG.md | 3 ++ src/mini/_core.scss | 4 +-- src/mini/_input_control.scss | 48 ++++++++++++++++++++++++++--- src/mini/_input_control_mixins.scss | 0 4 files changed, 49 insertions(+), 6 deletions(-) create mode 100644 src/mini/_input_control_mixins.scss 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