Button styling update for consistency
This commit is contained in:
Angelos Chalaris
parent
e094ca5042
commit
628983f159
6 changed files with 83 additions and 51 deletions
50
dist/mini-default.css
vendored
50
dist/mini-default.css
vendored
|
|
@ -655,6 +655,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
|
|||
border-color: #bdbdbd; }
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
opacity: 1;
|
||||
color: #616161; }
|
||||
|
||||
::-moz-placeholder {
|
||||
|
|
@ -662,6 +663,7 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
|
|||
color: #616161; }
|
||||
|
||||
::-ms-placeholder {
|
||||
opacity: 1;
|
||||
color: #616161; }
|
||||
|
||||
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
|
||||
|
|
@ -677,19 +679,19 @@ button {
|
|||
|
||||
button, [type="button"], [type="submit"], [type="reset"], a.button, label.button, .button {
|
||||
display: inline-block;
|
||||
background: rgba(207, 216, 220, 0.75);
|
||||
background: rgba(207, 207, 207, 0.75);
|
||||
color: #212121;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
padding: 4px 6px;
|
||||
margin: 4px;
|
||||
padding: 8px 12px;
|
||||
margin: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
text-decoration: none;
|
||||
-webkit-transition: all 0.3s ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
cursor: pointer; }
|
||||
button:hover, button:active, button:focus, [type="button"]:hover, [type="button"]:active, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:active, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:active, [type="reset"]:focus, a.button:hover, a.button:active, a.button:focus, label.button:hover, label.button:active, label.button:focus, .button:hover, .button:active, .button:focus {
|
||||
background: #cfd8dc;
|
||||
background: #cfcfcf;
|
||||
opacity: 1; }
|
||||
button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled], a.button:disabled, a.button[disabled], label.button:disabled, label.button[disabled], .button:disabled, .button[disabled] {
|
||||
cursor: not-allowed;
|
||||
|
|
@ -711,8 +713,10 @@ input[type="file"] {
|
|||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 2px; }
|
||||
border: 1px solid #9e9e9e;
|
||||
border-radius: 2px;
|
||||
margin: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); }
|
||||
.button-group button, .button-group [type="button"], .button-group [type="submit"], .button-group [type="reset"], .button-group a.button, .button-group label.button, .button-group .button {
|
||||
margin: 0;
|
||||
-webkit-box-flex: 1;
|
||||
|
|
@ -723,9 +727,10 @@ input[type="file"] {
|
|||
flex-basis: 0;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-radius: 0; }
|
||||
border-radius: 0;
|
||||
box-shadow: none; }
|
||||
.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"], .button-group button + a.button, .button-group button + label.button, .button-group button + .button, .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"], .button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button, .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"], .button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button, .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"], .button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button, .button-group a.button + button, .button-group a.button + [type="button"], .button-group a.button + [type="submit"], .button-group a.button + [type="reset"], .button-group a.button + a.button, .button-group a.button + label.button, .button-group a.button + .button, .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"], .button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button, .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"], .button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button {
|
||||
border-left: 1px solid #bdbdbd; }
|
||||
border-left: 1px solid #9e9e9e; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.button-group {
|
||||
|
|
@ -734,7 +739,7 @@ input[type="file"] {
|
|||
flex-direction: column; }
|
||||
.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"], .button-group button + a.button, .button-group button + label.button, .button-group button + .button, .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"], .button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button, .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"], .button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button, .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"], .button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button, .button-group a.button + button, .button-group a.button + [type="button"], .button-group a.button + [type="submit"], .button-group a.button + [type="reset"], .button-group a.button + a.button, .button-group a.button + label.button, .button-group a.button + .button, .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"], .button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button, .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"], .button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button {
|
||||
border: 0;
|
||||
border-top: 1px solid #bdbdbd; } }
|
||||
border-top: 1px solid #9e9e9e; } }
|
||||
[type="checkbox"], [type="radio"] {
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
|
|
@ -1309,13 +1314,13 @@ ul.breadcrumbs {
|
|||
|
||||
button.primary, [type="button"].primary, [type="submit"].primary,
|
||||
[type="reset"].primary, .button.primary {
|
||||
background: #1565c0;
|
||||
background: rgba(2, 119, 189, 0.9);
|
||||
color: #f5f5f5; }
|
||||
button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
|
||||
[type="reset"].primary:hover,
|
||||
[type="reset"].primary:active,
|
||||
[type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus {
|
||||
background: rgba(21, 101, 192, 0.85); }
|
||||
background: #0277bd; }
|
||||
|
||||
button.secondary, [type="button"].secondary, [type="submit"].secondary,
|
||||
[type="reset"].secondary, .button.secondary {
|
||||
|
|
@ -1329,24 +1334,35 @@ button.secondary, [type="button"].secondary, [type="submit"].secondary,
|
|||
|
||||
button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
|
||||
[type="reset"].tertiary, .button.tertiary {
|
||||
background: rgba(139, 195, 74, 0.8); }
|
||||
background: rgba(85, 139, 47, 0.85);
|
||||
color: #f5f5f5; }
|
||||
button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:active, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:active, [type="submit"].tertiary:focus,
|
||||
[type="reset"].tertiary:hover,
|
||||
[type="reset"].tertiary:active,
|
||||
[type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus {
|
||||
background: #8bc34a; }
|
||||
background: #558b2f; }
|
||||
|
||||
button.inverse, [type="button"].inverse, [type="submit"].inverse,
|
||||
[type="reset"].inverse, .button.inverse {
|
||||
background: #212121;
|
||||
color: #fafafa; }
|
||||
button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus,
|
||||
[type="reset"].inverse:hover,
|
||||
[type="reset"].inverse:active,
|
||||
[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus {
|
||||
background: rgba(33, 33, 33, 0.9); }
|
||||
|
||||
button.small, [type="button"].small, [type="submit"].small,
|
||||
[type="reset"].small, .button.small {
|
||||
border-radius: 1px;
|
||||
padding: 1px 2px;
|
||||
margin: 2px; }
|
||||
padding: 4px 6px;
|
||||
margin: 6px 8px; }
|
||||
|
||||
button.large, [type="button"].large, [type="submit"].large,
|
||||
[type="reset"].large, .button.large {
|
||||
border-radius: 4px;
|
||||
padding: 10px 15px;
|
||||
margin: 7px; }
|
||||
padding: 12px 18px;
|
||||
margin: 10px 8px; }
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.card.large {
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -594,3 +594,9 @@
|
|||
- Updated color definitions for almost all the `input_control` `form` elements.
|
||||
- Changed the `placeholder` rules a little bit to work properly for all elements now.
|
||||
- Tested a few things in `playground` about `input_control`.
|
||||
- Changed a little it of the colors used for `button` components. The `background` color used is custom, not from the material colors of Google Material, as I had to find a middle ground. The only discrepancy so far.
|
||||
- Added customizable `$button-group-margin` and `$button-group-box-shadow` for `button-group` to make it more well-defined.
|
||||
- Tweaked size variants for `button`s.
|
||||
- Added `inverse` `button` style to the list of `button` styles.
|
||||
- Removed the `custom` `button` demo that was still lingering in the current flavor.
|
||||
- Updated colors and stuff for `button` color variants. They should be consistent now.
|
||||
|
|
|
|||
|
|
@ -75,6 +75,10 @@
|
|||
</div>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container" style="padding-top: 20px;">
|
||||
<button class="small">small</button>
|
||||
<button>normal</button>
|
||||
<button class="large">large</button>
|
||||
<button class="inverse">button</button>
|
||||
<p>Use rows and columns for normal alignment, use input-groups in rows without columns for unaligned but just vertical forms or predesigned forms etc.</p>
|
||||
<form>
|
||||
<fieldset>
|
||||
|
|
|
|||
|
|
@ -209,30 +209,33 @@ $input-disabled-opacity: 0.75; // Opacity for disabled input
|
|||
$input-readonly-back-color: #e0e0e0; // Background color for readonly input
|
||||
$input-readonly-border-color: #bdbdbd; // Border color for readonly input
|
||||
$input-placeholder-fore-color: #616161; // Text color for input placeholder
|
||||
$button-back-color: #cfd8dc; // Back color for button elements
|
||||
$button-back-color: #cfcfcf; // Back color for button elements
|
||||
$button-back-opacity: 0.75; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements
|
||||
// on hover or focus
|
||||
$button-fore-color: #212121; // Text color for button elements
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 0; // Border style for button elements
|
||||
$button-border-radius: 2px; // Border radius for button elements
|
||||
$button-padding: 4px 6px; // Padding for button elements
|
||||
$button-margin: 4px; // Margin for button elements
|
||||
$button-padding: 8px 12px; // Padding for button elements
|
||||
$button-margin: 8px; // Margin for button elements
|
||||
$button-box-shadow: // Box shadow for buttons
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$button-disabled-opacity: 0.65; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$button-group-name: 'button-group'; // Class for button groups
|
||||
$button-group-border-style: 1px solid #bdbdbd; // Border style for button groups
|
||||
$button-group-border-style: 1px solid #9e9e9e; // Border style for button groups
|
||||
$button-group-margin: $button-margin; // Margin for button groups
|
||||
$button-group-box-shadow: // Box shadow for button groups
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
||||
$hide-file-inputs: true; // Should a style be added that makes all
|
||||
// <input>s of type `file` hidden?
|
||||
// (`true`/`false`) [1]
|
||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||
$button-variant1-back-color: #1565c0; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 1; // Background opacity for button variant 1
|
||||
$button-variant1-back-color: #0277bd; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
|
||||
$button-variant1-hover-back-opacity: // Background opacity for button variant 1
|
||||
0.85; // on hover or focus
|
||||
1; // on hover or focus
|
||||
$button-variant1-fore-color: $back-color; // Text color for button variant 1
|
||||
$button-variant2-name: 'secondary'; // Class name for button variant 2
|
||||
$button-variant2-back-color: #c62828; // Background color for button variant 2
|
||||
|
|
@ -240,31 +243,28 @@ $button-variant2-back-opacity: 0.85; // Background opacity for button
|
|||
$button-variant2-hover-back-opacity: // Background opacity for button variant 2
|
||||
1; // on hover or focus
|
||||
$button-variant2-fore-color: $back-color; // Text color for button variant 2
|
||||
$button-variant3-name: 'tertiary'; // Class name for button variant 2
|
||||
$button-variant3-back-color: #8bc34a; // Background color for button variant 2
|
||||
$button-variant3-back-opacity: 0.8; // Background opacity for button variant 2
|
||||
$button-variant3-hover-back-opacity: // Background opacity for button variant 2
|
||||
$button-variant3-name: 'tertiary'; // Class name for button variant 3
|
||||
$button-variant3-back-color: #558b2f; // Background color for button variant 3
|
||||
$button-variant3-back-opacity: 0.85; // Background opacity for button variant 3
|
||||
$button-variant3-hover-back-opacity: // Background opacity for button variant 3
|
||||
1; // on hover or focus
|
||||
$button-variant3-fore-color: $back-color; // Text color for button variant 3
|
||||
$button-variant4-name: 'inverse'; // Class name for button variant 4
|
||||
$button-variant4-back-color: $fore-color; // Background color for button variant 4
|
||||
$button-variant4-back-opacity: 1; // Background opacity for button variant 4
|
||||
$button-variant4-hover-back-opacity: // Background opacity for button variant 4
|
||||
0.9; // on hover or focus
|
||||
$button-variant4-fore-color: #fafafa; // Text color for button variant 4
|
||||
$button-style1-name: 'small'; // Class name for button style 1
|
||||
$button-style1-border-style: 0; // Border style for button style 1
|
||||
$button-style1-border-radius: 1px; // Border radius for button style 1
|
||||
$button-style1-padding: 1px 2px; // Padding for button style 1
|
||||
$button-style1-margin: 2px; // Margin for button style 1
|
||||
$button-style1-padding: 4px 6px; // Padding for button style 1
|
||||
$button-style1-margin: 6px 8px; // Margin for button style 1
|
||||
$button-style2-name: 'large'; // Class name for button style 2
|
||||
$button-style2-border-style: 0; // Border style for button style 2
|
||||
$button-style2-border-radius: 4px; // Border radius for button style 2
|
||||
$button-style2-padding: 10px 15px; // Padding for button style 2
|
||||
$button-style2-margin: 7px; // Margin for button style 2
|
||||
// Custom button style demonstration (not enabled)
|
||||
//$button-custom-name: 'custom'; // Custom button class name
|
||||
//$button-custom-back-color: #ffb300; // Custom button back color
|
||||
//$button-custom-back-opacity: 0; // Custom button back opacity
|
||||
//$button-custom-hover-back-opacity: // Custom button back opacity
|
||||
// 1; // on hover or focus
|
||||
//$button-custom-border-style: 3px solid #ffb300; // Custom button border style
|
||||
//$button-custom-border-radius: 0; // Custom button border radius
|
||||
//$button-custom-padding: 6px 8px; // Custom button padding
|
||||
//$button-custom-margin: 4px; // Custom button margin
|
||||
$button-style2-padding: 12px 18px; // Padding for button style 2
|
||||
$button-style2-margin: 10px 8px; // Margin for button style 2
|
||||
$checkbox-size: 17px; // Size for checkbox/radio [2]
|
||||
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
|
||||
|
|
@ -490,16 +490,13 @@ $center-block-name: 'center-block'; // Class name for center block
|
|||
@include make-button-alt-color ($button-variant2-name, $button-variant2-back-color,
|
||||
$button-variant2-back-opacity, $button-variant2-hover-back-opacity, $button-variant2-fore-color);
|
||||
@include make-button-alt-color ($button-variant3-name, $button-variant3-back-color,
|
||||
$button-variant3-back-opacity, $button-variant3-hover-back-opacity);
|
||||
$button-variant3-back-opacity, $button-variant3-hover-back-opacity, $button-variant3-fore-color);
|
||||
@include make-button-alt-color ($button-variant4-name, $button-variant4-back-color,
|
||||
$button-variant4-back-opacity, $button-variant4-hover-back-opacity, $button-variant4-fore-color);
|
||||
@include make-button-alt-style ($button-style1-name, $button-style1-border-style,
|
||||
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
|
||||
@include make-button-alt-style ($button-style2-name, $button-style2-border-style,
|
||||
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
|
||||
// Custom button style demonstration (not enabled)
|
||||
//@include make-button-alt-color ($button-custom-name, $button-custom-back-color,
|
||||
// $button-custom-back-opacity, $button-custom-hover-back-opacity);
|
||||
//@include make-button-alt-style ($button-custom-name, $button-custom-border-style,
|
||||
// $button-custom-border-radius, $button-custom-padding, $button-custom-margin);
|
||||
// Use mixins for cards
|
||||
@include make-card-alt-size ($card-size1-name, $card-size1-width);
|
||||
@include make-card-alt-size ($card-size2-name, $card-size2-width);
|
||||
|
|
|
|||
|
|
@ -205,6 +205,12 @@ $hide-file-inputs: true !default;
|
|||
@if $button-border-radius != 0 {
|
||||
border-radius: $button-border-radius;
|
||||
}
|
||||
@if $button-group-margin != 0 {
|
||||
margin: $button-group-margin;
|
||||
}
|
||||
@if $button-group-box-shadow != none {
|
||||
box-shadow: $button-group-box-shadow;
|
||||
}
|
||||
button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} {
|
||||
margin: 0;
|
||||
// Old syntax
|
||||
|
|
@ -220,11 +226,14 @@ $hide-file-inputs: true !default;
|
|||
@if $button-border-radius != 0 {
|
||||
border-radius: 0;
|
||||
}
|
||||
@if $button-group-border-style !=0 {
|
||||
@if $button-group-border-style != 0 {
|
||||
+ button, + [type="button"], + [type="submit"], + [type="reset"], + a.#{$button-class-name}, + label.#{$button-class-name}, + .#{$button-class-name} {
|
||||
border-left: $button-group-border-style;
|
||||
}
|
||||
}
|
||||
@if $button-box-shadow != none {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Responsiveness for button groups
|
||||
|
|
|
|||
Loading…
Reference in a new issue