mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-01 19:40:35 +02:00
Button groups
Also added customization for checkbox and radio elements.
This commit is contained in:
@@ -132,10 +132,13 @@
|
|||||||
- Renamed `grid` to `layout`. It will now house the `card` module, too. This is done to make sure that cards are never used without the grid system, as they wouldn't work too well without it.
|
- Renamed `grid` to `layout`. It will now house the `card` module, too. This is done to make sure that cards are never used without the grid system, as they wouldn't work too well without it.
|
||||||
- Fully implemented the `card` module into `layout`, gave me no trouble. It's fully operational and tested. Some color tweaking might be required, but everything is pretty much ready for deployment in the `layout` module.
|
- Fully implemented the `card` module into `layout`, gave me no trouble. It's fully operational and tested. Some color tweaking might be required, but everything is pretty much ready for deployment in the `layout` module.
|
||||||
- Customized `checkbox` and `radio` input elements, they should work pretty much fine.
|
- Customized `checkbox` and `radio` input elements, they should work pretty much fine.
|
||||||
- *TODO* Add all missing values to modules much like I have done in `layout` module.
|
|
||||||
|
|
||||||
## 20171112
|
## 20171112
|
||||||
|
|
||||||
- Updated `navigation` module to use Unicode symbols instead of icons. This will allow for more customization of the icons used in terms of color and alignment.
|
- Updated `navigation` module to use Unicode symbols instead of icons. This will allow for more customization of the icons used in terms of color and alignment.
|
||||||
- Modularized colorization of `form` and `input` elements, everything should now work fine by itself.
|
- Modularized colorization of `form` and `input` elements, everything should now work fine by itself.
|
||||||
- *TODO* Add button groups, deal with `checkbox` and `radio` sizing in a proper manner.
|
|
||||||
|
## 20171113
|
||||||
|
|
||||||
|
- Properly applied variable styling to `checkbox` and `radio` elements. They now use the `base-font-size` Sass variable to get their size, which makes sense.
|
||||||
|
- Added `.button-group`s, they seem to behave properly, `border-color` could use some tweaking maybe.
|
||||||
|
@@ -659,6 +659,7 @@ a:hover, a:focus {
|
|||||||
--button-fore-color: #212121;
|
--button-fore-color: #212121;
|
||||||
--button-border-color: transparent;
|
--button-border-color: transparent;
|
||||||
--button-hover-border-color: transparent;
|
--button-hover-border-color: transparent;
|
||||||
|
--button-group-border-color: rgba(124, 124, 124, 0.54);
|
||||||
}
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
@@ -780,7 +781,7 @@ option {
|
|||||||
width: calc(1rem + var(--universal-padding) / 2);
|
width: calc(1rem + var(--universal-padding) / 2);
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
flex-basis: 1.25rem !important;
|
flex-basis: calc(1rem + var(--universal-padding) / 2) !important;
|
||||||
flex-grow: 0 !important;
|
flex-grow: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -862,6 +863,37 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
|
|||||||
opacity: 0.75;
|
opacity: 0.75;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-group {
|
||||||
|
display: flex;
|
||||||
|
border: 0.0625rem solid var(--button-group-border-color);
|
||||||
|
border-radius: var(--universal-border-radius);
|
||||||
|
margin: var(--universal-margin);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"],
|
||||||
|
.button-group > .button, .button-group > [role="button"] {
|
||||||
|
margin: 0;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
text-align: center;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-group > :not(:first-child) {
|
||||||
|
border-left: 0.0625rem solid var(--button-group-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 767px) {
|
||||||
|
.button-group {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.button-group > :not(:first-child) {
|
||||||
|
border: 0;
|
||||||
|
border-top: 0.0625rem solid var(--button-group-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Definitions for navigation elements.
|
Definitions for navigation elements.
|
||||||
*/
|
*/
|
||||||
|
@@ -9,6 +9,8 @@ $input-group-vertical-name: 'vertical' !default; // Class name for vertical
|
|||||||
$input-group-mobile-breakpoint: 767px !default; // Breakpoint for fluid input group mobile view.
|
$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.
|
$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-disabled-opacity: 0.75 !default; // Opacity for input elements when disabled.
|
||||||
|
$button-group-name: 'button-group' !default; // Class name for button groups.
|
||||||
|
$button-group-mobile-breakpoint: 767px !default; // Mobile breakpoint for button groups.
|
||||||
$form-back-color: #f0f0f0 !default; // Background color for forms.
|
$form-back-color: #f0f0f0 !default; // Background color for forms.
|
||||||
$form-fore-color: #111 !default; // Text color for forms.
|
$form-fore-color: #111 !default; // Text color for forms.
|
||||||
$form-border-color: #ddd !default; // Border color for forms.
|
$form-border-color: #ddd !default; // Border color for forms.
|
||||||
@@ -22,6 +24,7 @@ $button-hover-back-color: #dcdcdc !default; // Background color for bu
|
|||||||
$button-fore-color: #212121 !default; // Text color for buttons.
|
$button-fore-color: #212121 !default; // Text color for buttons.
|
||||||
$button-border-color: transparent !default; // Border color for buttons.
|
$button-border-color: transparent !default; // Border color for buttons.
|
||||||
$button-hover-border-color: transparent !default; // Border color for buttons (hover).
|
$button-hover-border-color: transparent !default; // Border color for buttons (hover).
|
||||||
|
$button-group-border-color: rgba(124,124,124, 0.54) !default; // Border color for button groups.
|
||||||
// CSS variable name definitions [exercise caution if modifying these]
|
// CSS variable name definitions [exercise caution if modifying these]
|
||||||
$form-back-color-var: '--form-back-color' !default;
|
$form-back-color-var: '--form-back-color' !default;
|
||||||
$form-fore-color-var: '--form-fore-color' !default;
|
$form-fore-color-var: '--form-fore-color' !default;
|
||||||
@@ -37,6 +40,7 @@ $button-fore-color-var: '--button-fore-color' !default;
|
|||||||
$button-hover-fore-color-var: '--button-hover-fore-color' !default;
|
$button-hover-fore-color-var: '--button-hover-fore-color' !default;
|
||||||
$button-border-color-var: '--button-border-color' !default;
|
$button-border-color-var: '--button-border-color' !default;
|
||||||
$button-hover-border-color-var: '--button-hover-border-color' !default;
|
$button-hover-border-color-var: '--button-hover-border-color' !default;
|
||||||
|
$button-group-border-color-var: '--button-group-border-color' !default;
|
||||||
// Check the `_input_control_mixins.scss` file to find this module's mixins.
|
// Check the `_input_control_mixins.scss` file to find this module's mixins.
|
||||||
@import 'input_control_mixins';
|
@import 'input_control_mixins';
|
||||||
/* Input_control module CSS variable definitions */
|
/* Input_control module CSS variable definitions */
|
||||||
@@ -54,6 +58,7 @@ $button-hover-border-color-var: '--button-hover-border-color' !default;
|
|||||||
#{$button-fore-color-var}: $button-fore-color;
|
#{$button-fore-color-var}: $button-fore-color;
|
||||||
#{$button-border-color-var}: $button-border-color;
|
#{$button-border-color-var}: $button-border-color;
|
||||||
#{$button-hover-border-color-var}: $button-hover-border-color;
|
#{$button-hover-border-color-var}: $button-hover-border-color;
|
||||||
|
#{$button-group-border-color-var}: $button-group-border-color;
|
||||||
}
|
}
|
||||||
// Base form styling
|
// Base form styling
|
||||||
form { // Text color is the default, this can be changed manually.
|
form { // Text color is the default, this can be changed manually.
|
||||||
@@ -175,11 +180,11 @@ option {
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: calc(1rem + var(#{$universal-padding-var}) / 2);
|
height: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
|
||||||
width: calc(1rem + var(#{$universal-padding-var}) / 2);
|
width: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
padding: 0; // Remove padding added from previous styles.
|
padding: 0; // Remove padding added from previous styles.
|
||||||
flex-basis: 1.25rem !important; // Override fluid input-group styling.
|
flex-basis: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2) !important; // Override fluid input-group styling.
|
||||||
flex-grow: 0 !important; // Using with fluid input-groups is not recommended.
|
flex-grow: 0 !important; // Using with fluid input-groups is not recommended.
|
||||||
&:checked:before {
|
&:checked:before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -189,7 +194,7 @@ option {
|
|||||||
&:checked:before {
|
&:checked:before {
|
||||||
content: '\2713';
|
content: '\2713';
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: calc(1rem + var(#{$universal-padding-var}) / 2);
|
font-size: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
|
||||||
top: calc(0rem - var(#{$universal-padding-var}));
|
top: calc(0rem - var(#{$universal-padding-var}));
|
||||||
left: calc(var(#{$universal-padding-var}) / 4);
|
left: calc(var(#{$universal-padding-var}) / 4);
|
||||||
}
|
}
|
||||||
@@ -257,3 +262,33 @@ input, textarea, select, button, .#{$button-class-name}, [role="button"] {
|
|||||||
opacity: $input-disabled-opacity;
|
opacity: $input-disabled-opacity;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// Button group styling.
|
||||||
|
.#{$button-group-name} {
|
||||||
|
display: flex;
|
||||||
|
border: $__1px solid var(#{$button-group-border-color-var});
|
||||||
|
border-radius: var(#{$universal-border-radius-var});
|
||||||
|
margin: var(#{$universal-margin-var});
|
||||||
|
@if $universal-box-shadow != none {
|
||||||
|
box-shadow: var(#{$universal-box-shadow-var});
|
||||||
|
}
|
||||||
|
& > button, [type="button"], & > [type="submit"], & > [type="reset"],
|
||||||
|
& > .#{$button-class-name}, & > [role="button"] {
|
||||||
|
margin: 0;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
text-align: center;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
& > :not(:first-child) {
|
||||||
|
border-left: $__1px solid var(#{$button-group-border-color-var});
|
||||||
|
}
|
||||||
|
// Responsiveness for button groups
|
||||||
|
@media screen and (max-width: #{$button-group-mobile-breakpoint}) {
|
||||||
|
flex-direction: column;
|
||||||
|
& > :not(:first-child) {
|
||||||
|
border: 0; // Reapply to remove the left border from elements.
|
||||||
|
border-top: $__1px solid var(#{$button-group-border-color-var});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Reference in New Issue
Block a user