mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-05-05 07:07:11 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add input-group and button-group

Browse source 
As suggested in issue #159 . The code needs his own file because margin-bottom of inputs is set in the input file, which is parsed after the _button.scss
This commit is contained in:
reinerBa 2022-02-21 22:03:38 +01:00 • committed by GitHub
parent 6123fa71f4
commit fa076fb360
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

44
scss/content/_form-input-group.scss Normal file
View file

@ -0,0 +1,44 @@
/**
* Input group and button group
*/
.button-group, .input-group {
// Stick buttons together
display: flex;
// Buttons have no margin-bottom set
& > button, & > label, & > select, & > input:not([type="checkbox"]):not([type="radio"]) {
margin-bottom: 0;
}
// No round corners in button groups
& > button:not(:last-child),
& > [role=button]:not(:last-child),
& > input:not(:last-child),
& > select:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
/* border-right: 0;*/
}
& > [role=button]:not(:first-child),
& > input:not(:first-child),
& > button:not(:first-child),
& > select:not(:first-child){
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
}
}
// Radio groups need a text label
.input-group > [type=radio]~label {
margin-right:0;
}
// The selected radio button will be outlined when outline class is choose and in reverse
.input-group:not(.outline) > input[type="radio"]:not(:checked)+label[role=button],
.input-group.outline > input[type="radio"]:checked+label[role=button] {
--background-color: transparent;
--color: var(--primary);
}