mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-11 00:13:59 +02:00
Code Issues Releases Wiki Activity

Button groups

Browse Source 
Also added customization for checkbox and radio elements.
This commit is contained in:
Angelos Chalaris
2017-11-13 12:30:01 +02:00
parent 44f09e5880
commit 1164fd672d
3 changed files with 77 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/v3/DEVLOG.md
View File

@@ -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.
- 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.
- *TODO* Add all missing values to modules much like I have done in `layout` module.
## 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.
- 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.

34
docs/v3_dev/src/index.css
View File

@@ -659,6 +659,7 @@ a:hover, a:focus {
--button-fore-color: #212121;
--button-border-color: transparent;
--button-hover-border-color: transparent;
--button-group-border-color: rgba(124, 124, 124, 0.54);
}
form {
@@ -780,7 +781,7 @@ option {
width: calc(1rem + var(--universal-padding) / 2);
vertical-align: text-bottom;
padding: 0;
flex-basis: 1.25rem !important;
flex-basis: calc(1rem + var(--universal-padding) / 2) !important;
flex-grow: 0 !important;
}
@@ -862,6 +863,37 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
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.
*/