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

Finished button module, added alternate styles etc.

Browse source
This commit is contained in:
Angelos Chalaris 2016-10-25 19:38:57 +03:00
parent 63e3f2f2bb
commit 31bcceaa7d
6 changed files with 131 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
docs/v2/DEVLOG.md
View file

@ -192,4 +192,8 @@
- Added `$hide-file-inputs` flag to decide the styling of `file` `<input>` elements.
- Softcoded changes and optimized some things in the `button` module.
- Updated demo page.
- Added and optimized `make-button-alt-color` mixin, created primary color variant.
- Added and optimized `make-button-alt-color` mixin, created `primary` color variant.
- Added `secondary` and `tertiary` button variants using the mixin. Tested colors.
- Added button overrides for links styled as buttons for `text-decoration: underline` and `&:hover { opacity: 0.75}`. Should now not give away the fact that it's a link.
- Added `make-button-alt-style` mixin, created `small` and `large` style variants.
- Added and tested an entirely custom button style that does something very different compared to the original variants. Variables and mixins included in the flavor file, but are commented out, as they are only used as a demonstration. *TODO* Add a blog post later down the line where I design a full flavor using the files etc., showcasing things like these.

3
docs/v2/index.html
View file

@ -260,6 +260,7 @@
<input type="button" value="Input button">
<input type="submit" value="Submit button">
<input type="reset" value="Reset button">
<a href="#" class="button">Link button</a>
<button disabled>Disabled button</button><br>
<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">Upload file</label><br>
@ -269,7 +270,7 @@
<input type="button" value="Secondary input button" class="secondary">
<input type="reset" value="Tertiary reset button" class="tertiary">
<input type="submit" value="Large submit button" class="large">
<button disabled class="small primary">Small primary disabled button</button><br>
<label disabled class="button small primary">Small primary disabled label button</label><br>
</div>
</div>
</div>

35
flavors/v2/mini-default.css
View file

@ -593,10 +593,12 @@ button, [type="button"], [type="submit"], [type="reset"], a.button, label.button
border-radius: 2px;
padding: 4px 6px;
margin: 4px;
text-decoration: none;
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: #cfd8dc;
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;
opacity: 0.65; }
@ -692,6 +694,37 @@ button.primary, [type="button"].primary, [type="submit"].primary,
[type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus {
background: rgba(21, 101, 192, 0.85); }
button.secondary, [type="button"].secondary, [type="submit"].secondary,
[type="reset"].secondary, .button.secondary {
background: rgba(198, 40, 40, 0.85);
color: #fafafa; }
button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus,
[type="reset"].secondary:hover,
[type="reset"].secondary:active,
[type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus {
background: #c62828; }
button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
[type="reset"].tertiary, .button.tertiary {
background: rgba(139, 195, 74, 0.8); }
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; }
button.small, [type="button"].small, [type="submit"].small,
[type="reset"].small, .button.small {
border-radius: 1px;
padding: 1px 2px;
margin: 2px; }
button.large, [type="button"].large, [type="submit"].large,
[type="reset"].large, .button.large {
border-radius: 4px;
padding: 10px 15px;
margin: 7px; }
mark.secondary {
background: #f44336; }

2
flavors/v2/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

44
flavors/v2/mini-default.scss
View file

@ -162,6 +162,37 @@ $button-variant1-back-opacity: 1; // Background opacity for button va
$button-variant1-hover-back-opacity: // Background opacity for button variant 1
0.85; // 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
$button-variant2-back-opacity: 0.85; // Background opacity for button variant 2
$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
1; // on hover or focus
$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-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
// Notes:
// [1] - If the value of $hide-file-inputs is `true`, all <input type="file"> elements will be hidden and the only way
// to access them is via the use of <label> elements that are linked to them. This option is enabled by default to
@ -209,6 +240,19 @@ $progress-style1-border-radius: 0; // Border radius for <progress> st
// Use mixins for button elements
@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
@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);
@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 contextual background elements
@include make-mark-alt-color($mark-variant1-name, $mark-variant1-back-color);
@include make-mark-alt-color($mark-variant2-name, $mark-variant2-back-color);

55
scss/v2/mini-core/_button.scss
View file

@ -28,16 +28,22 @@ button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name
}
@if $button-margin != 0 {
margin: $button-margin;
}
@if $apply-link-underline { // Override for links if underline is enabled.
text-decoration: none;
}
transition: all 0.3s ease 0s;
cursor: pointer;
&:hover, &:active, &:focus{
background: rgba($button-back-color, $button-hover-back-opacity);
}
&:disabled, &[disabled] {
cursor: not-allowed;
opacity: $button-disabled-opacity;
}
&:hover, &:active, &:focus{
background: rgba($button-back-color, $button-hover-back-opacity);
@if $apply-link-hover-fade { // Override for links if hover-fade is enabled.
opacity: 1;
}
}
&:disabled, &[disabled] {
cursor: not-allowed;
opacity: $button-disabled-opacity;
}
}
$hide-file-inputs: true !default;
@if $hide-file-inputs {
@ -70,8 +76,37 @@ button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"]
@if $button-alt-fore-color != $button-fore-color {
color: $button-alt-fore-color;
}
&:hover, &:active, &:focus{
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
}
&:hover, &:active, &:focus{
background: rgba($button-alt-back-color, $button-alt-hover-back-opacity);
}
}
}
// Mixin for alternate button styles (button color variants).
// Variables:
// - $button-alt-name : The name of the class used for the alternate button style.
// - $button-alt-border-style : The border style of the alternate button style.
// - $button-alt-border-radius : Border radius of the alternate button style.
// - $button-alt-padding : Padding of the alternate button style.
// - $button-alt-margin : Margin of the alternate button style.
// Notes:
// Due to something like `.button.small` being a higher specificity than `a.small` or `a`, no extra rules are
// required for such elements. However rules for the normal button elements are applied in order to not require the
// base class for the button styles.
@mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
$button-alt-padding, $button-alt-margin) {
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name} {
@if $button-alt-border-style != $button-border-style {
border: $button-alt-border-style;
}
@if $button-alt-border-radius != $button-border-radius {
border-radius: $button-alt-border-radius;
}
@if $button-alt-padding != $button-padding {
padding: $button-alt-padding;
}
@if $button-alt-margin != $button-margin {
margin: $button-alt-margin;
}
}
}