beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Button groups added

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-11 01:13:59 +02:00
parent c86735856b
commit 4c473fa321
6 changed files with 105 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
dist/mini-default.css vendored
View file

@ -654,6 +654,41 @@ input[type="file"] {
-webkit-clip-path: inset(100%);
clip-path: inset(100%); }
.button-group {
display: -webkit-box;
display: -webkit-flex;
display: flex; }
.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;
max-width: 100%;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
text-align: center;
border: 1px solid #bdbdbd;
border-radius: 0; }
.button-group button:first-child, .button-group [type="button"]:first-child, .button-group [type="submit"]:first-child, .button-group [type="reset"]:first-child, .button-group a.button:first-child, .button-group label.button:first-child, .button-group .button:first-child {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px; }
.button-group button:last-child, .button-group [type="button"]:last-child, .button-group [type="submit"]:last-child, .button-group [type="reset"]:last-child, .button-group a.button:last-child, .button-group label.button:last-child, .button-group .button:last-child {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px; }
@media (max-width: 768px) {
.button-group {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column; }
.button-group button:first-child, .button-group [type="button"]:first-child, .button-group [type="submit"]:first-child, .button-group [type="reset"]:first-child, .button-group a.button:first-child, .button-group label.button:first-child, .button-group .button:first-child {
border-radius: 0;
border-top-left-radius: 2px;
border-top-right-radius: 2px; }
.button-group button:last-child, .button-group [type="button"]:last-child, .button-group [type="submit"]:last-child, .button-group [type="reset"]:last-child, .button-group a.button:last-child, .button-group label.button:last-child, .button-group .button:last-child {
border-radius: 0;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; } }
[type="checkbox"], [type="radio"] {
height: 1px;
width: 1px;

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
docs/v2/DEVLOG.md
View file

@ -406,3 +406,4 @@
- Added modular `box-shadow` for `progress` element.
- Added modular `box-shadow` for `table` element. Tweaked to be responsive on smaller screens.
- Added modular `box-shadow` for `tabs` container. This might have some minor problems with `border-radius`es.
- Added flexbox-based `button-group` system. Added responsiveness to it and optimized accordingly.

8
docs/v2/index.html
View file

@ -351,6 +351,14 @@
<input type="reset" value="Reset button">
<a href="#" class="button">Link button</a>
<button disabled>Disabled button</button><br>
<p>Button groups can also be created, utilising the <code>.button-group</code> class. Simply add a set of buttons in it and you're good to go. Check it out below:</p>
<div class="button-group">
<input type="button" value="Input button">
<input type="submit" value="Submit button">
<input type="reset" value="Reset button">
<button>Normal button</button>
<a href="#" class="button">Link button</a>
</div>
<p>File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. <strong>mini.css</strong> deals with the problem, using a workaround involving labels that use the <code>button</code> class, which applies the exact same style to those labels. Just link it to the <code>&lt;input type=&quot;file&quot;&gt;</code> element of your choice and you're good to go. For example:</p>
<span style="margin:3px;"></span><input type="file" id="file-input-demo"><label for="file-input-demo" class="button"><i class="fa fa-upload" aria-hidden="true"></i>&nbsp;Upload file</label><br>
<p>There are also different kinds of buttons, specifically <code>primary</code>, <code>secondary</code> and <code>tertiary</code>, as well as <code>small</code> and <code>large</code> buttons. All of these types can be specified as classes. For example:</p>

3
src/flavors/mini-default.scss
View file

@ -205,6 +205,9 @@ $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-mobile-breakpoint:768px; // 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]

57
src/mini/_input_control.scss
View file

@ -190,6 +190,63 @@ $hide-file-inputs: true !default;
font: inherit; // Change font propery to `inherit` in Safari.
}
}
// Button group definition
.#{$button-group-name} {
// Old syntax
display: -webkit-box;
// New syntax
display: -webkit-flex;
display: flex;
button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} {
margin: 0;
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
text-align: center;
border: $button-group-border-style;
@if $button-border-radius != 0 {
border-radius: 0;
&:first-child {
border-top-left-radius: $button-border-radius;
border-bottom-left-radius: $button-border-radius;
}
&:last-child {
border-top-right-radius: $button-border-radius;
border-bottom-right-radius: $button-border-radius;
}
}
}
}
// Responsiveness for
@media (max-width: #{$button-group-mobile-breakpoint}) {
.#{$button-group-name} {
// Old syntax
-webkit-box-orient: vertical;
// New syntax
-webkit-flex-direction: column;
flex-direction: column;
@if $button-border-radius != 0 {
button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name} {
&:first-child {
border-radius: 0;
border-top-left-radius: $button-border-radius;
border-top-right-radius: $button-border-radius;
}
&:last-child {
border-radius: 0;
border-bottom-left-radius: $button-border-radius;
border-bottom-right-radius: $button-border-radius;
}
}
}
}
}
// Mixin for alternate buttons (button color variants).
// Variables:
// - $button-alt-name : The name of the class used for the alternate button.