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

Updated button module

Browse source
This commit is contained in:
Angelos Chalaris 2016-10-25 17:23:24 +03:00
parent 8a1ff16104
commit e4b326ec36
6 changed files with 69 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
docs/v2/DEVLOG.md
View file

@ -183,4 +183,11 @@
- Rebuilt grid system to work with 3 screen sizes instead of 4. Legacy system is now used only if a flag (`$use-four-step-grid`) is enabled.
- Three-step grid breakpoints tweaked to `800px` and `1080px` accordingly.
- Deployed live demo with new grid.
- Deployed live demo with new grid.
## 20161025
- Issue maintenance and minor changes to issue structure on Github.
- Due to implicit labeling (e.g. `<label>Name:<input></label>`) not being correctly handled by some assistive technologies, explicit labels will be used for the `file` `<input>` elements.
- Added `$hide-file-inputs` flag to decide the styling of `file` `<input>` elements.
- Softcoded changes and optimized some things in the `button` module.

6
docs/v2/index.html
View file

@ -10,7 +10,7 @@
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- Live demo styled as of 20161024 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/08062eff88dbab3d3b03f8bde56cce5f9d6882e2/flavors/v2/mini-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/08062eff88dbab3d3b03f8bde56cce5f9d6882e2/flavors/v2/mini-default.min.css"> -->
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
<style>
#top-logo {
@ -261,8 +261,8 @@
<input type="submit" value="Submit button">
<input type="reset" value="Reset button">
<button disabled>Disabled button</button><br>
<input type="file" value="File 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>
</div>
</div>
</div>

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

@ -585,30 +585,25 @@ button {
overflow: visible;
text-transform: none; }
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit; }
button, [type="button"], [type="submit"], [type="reset"] {
button, [type="button"], [type="submit"], [type="reset"], a.button, label.button, .button {
display: inline-block;
background: rgba(207, 216, 220, 0.75);
color: #212121;
border: 0;
border-radius: 2px;
padding: 4px 6px;
margin: 4px;
border-radius: 2px;
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 {
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; }
button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled] {
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; }
input[type="file"] {
display: none; }
/**
* Remove the inheritance of text transform in Firefox.
*/

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

File diff suppressed because one or more lines are too long

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

@ -141,6 +141,29 @@ $table-mobile-label-font-weight:$bold-font-weight; // Font weight for mob
// Notes:
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
// in order for their mobile headers to display properly.
// Variables for button elements
$button-back-color: #cfd8dc; // Back color for button elements
$button-back-opacity: 0.75; // Background opacity for button elements
$button-hover-back-opacity: 1; // Background opacity for button elements
// while hovering over them
$button-fore-color: #212121; // Text color for button elements
$button-border-style: 0; // Border style for button elements
$button-border-radius: 2px; // Border radius for button elements
$button-padding: 4px 6px; // Padding for button elements
$button-margin: 4px; // Margin for button elements
$button-disabled-opacity: 0.65; // Disabled button elements opacity
$button-class-name: 'button'; // Class for custom button elements
$hide-file-inputs: true; // Should a style be added that makes all
// <input>s of type `file` hidden?
// (`true`/`false`) [1]
// 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
// allow for universal button styles, even for file input buttons, but can be disabled if the base style is desired.
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
// Variables for contextual background elements
$mark-back-color: #0277bd; // Background color for <mark>
$mark-fore-color: $back-color; // Text color for <mark>

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

@ -14,34 +14,41 @@ button {
overflow: visible; // Show the overflow in IE.
text-transform: none; // Remove inheritance of text-transform in Edge, Firefox, and IE.
}
// TODO: Test and see if these are needed etc.
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; // 1
font: inherit; // 2
}
// Default styling
// TODO: Add '.button' class for other elements and 'a.button' rule on its own to make some custom link styles.
button, [type="button"], [type="submit"], [type="reset"]{
button, [type="button"], [type="submit"], [type="reset"], a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name}{
display: inline-block;
background: rgba(#cfd8dc, 0.75);
color: #212121;
border: 0;
padding: 4px 6px;
margin: 4px;
border-radius: 2px;
background: rgba($button-back-color, $button-back-opacity);
color: $button-fore-color;
border: $button-border-style;
@if $button-border-radius != 0 {
border-radius: $button-border-radius;
}
@if $button-padding != 0 {
padding: $button-padding;
}
@if $button-margin != 0 {
margin: $button-margin;
}
transition: all 0.3s ease 0s;
cursor: pointer;
&:hover, &:active, &:focus{
background: rgba(#cfd8dc, 1);
background: rgba($button-back-color, $button-hover-back-opacity);
}
&:disabled, &[disabled] {
cursor: not-allowed;
opacity: 0.65;
opacity: $button-disabled-opacity;
}
}
// TODO: Build "file" input. (many browsers use `::-webkit-file-upload-button` making it easier to style possibly).
// Firefox and IE will default to `[type="file"]` so there needs to be a solution for that (labels?).
$hide-file-inputs: true !default;
@if $hide-file-inputs {
input[type="file"] {
display: none; // Hide, use labels instead.
}
}
@else {
::-webkit-file-upload-button {
-webkit-appearance: button; // Correct inability to style in iOS and Safari.
font: inherit; // Change font propery to `inherit` in Safari.
}
}