Button module initial commit
This commit is contained in:
Angelos Chalaris
parent
ae235b3f10
commit
5eda91c45a
7 changed files with 79 additions and 157 deletions
|
|
@ -163,4 +163,15 @@
|
|||
- Added table styling and responsiveness, made customizable etc.
|
||||
- Added demo table to page, tested.
|
||||
- Minor consistency reorganization in table module.
|
||||
- Updated demo page, deployed live.
|
||||
- Updated demo page, deployed live.
|
||||
|
||||
## 20161023
|
||||
|
||||
- Removed `table-layout: fixed;` from tables.
|
||||
- Added `mini-core/button` and started testing button styling.
|
||||
- Removed the reset for `:-moz-focusring` (`outline: 1px dotted ButtonText`) for buttons as it was unnecessary and didn't look great.
|
||||
- Moved fix for `::-moz-focus-inner` to the `button` module.
|
||||
- Moved generic fix for Android, iOS and Safari to `button` module.
|
||||
- Removed generic styling reset for `button`, `input`, `optgroup`, `select` and `textarea` based on the fact that the styles are already applied in the first rule `html, *`.
|
||||
- Split some fixes into generic and button-specific.
|
||||
- Moved `::-webkit-file-upload-button` fixes to the `button` module.
|
||||
|
|
|
|||
|
|
@ -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 20161021 -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/c9d597fac2ede99d97850a5c1f150714e1cacf0e/flavors/v2/mini-default.min.css">
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/c9d597fac2ede99d97850a5c1f150714e1cacf0e/flavors/v2/mini-default.min.css"> -->
|
||||
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
|
||||
<style>
|
||||
#top-logo {
|
||||
|
|
@ -253,6 +253,13 @@
|
|||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
<h3>Buttons</h3>
|
||||
<p>Buttons are already pre-styled in <strong>mini.css</strong> to allow for consistent presentation. However, there is a lot you can do to customize them, as the pre-applied styles are mostly overrides for the default presentation styles. Pre-styled buttons and other button-like inputs can be seen below:</p>
|
||||
<button>Normal button</button><br>
|
||||
<input type="button" value="Input button"><br>
|
||||
<input type="submit" value="Submit button"><br>
|
||||
<input type="reset" value="Reset button"><br>
|
||||
<input type="file" value="File button"><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,9 @@ audio, video {
|
|||
svg:not(:root) {
|
||||
overflow: hidden; }
|
||||
|
||||
input {
|
||||
overflow: visible; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.2em;
|
||||
margin: 0.7em 8px;
|
||||
|
|
@ -591,8 +594,7 @@ table {
|
|||
border-spacing: 0;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 2px;
|
||||
margin: 0 auto;
|
||||
table-layout: fixed; }
|
||||
margin: 0 auto; }
|
||||
|
||||
caption {
|
||||
font-size: 1.5em;
|
||||
|
|
@ -685,72 +687,30 @@ progress {
|
|||
progress[value="100"]::-moz-progress-bar {
|
||||
border-radius: 1px; }
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
/* 1 */
|
||||
font-size: 100%;
|
||||
/* 1 */
|
||||
line-height: 1.15;
|
||||
/* 1 */
|
||||
margin: 0;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible; }
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none; }
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
button,
|
||||
html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
/* 2 */ }
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0; }
|
||||
|
||||
button, html [type="button"], [type="reset"], [type="submit"] {
|
||||
-webkit-appearance: button; }
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
text-transform: none; }
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText; }
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit; }
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
select {
|
||||
text-transform: none; }
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated).
|
||||
|
|
@ -810,16 +770,6 @@ textarea {
|
|||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: 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;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */ }
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
|
|
|
|||
2
flavors/v2/mini-default.min.css
vendored
2
flavors/v2/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -44,11 +44,16 @@ audio, video {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
// Hide overflow in IE
|
||||
// Hide overflow in IE.
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Show overflow in IE.
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Fix display in older versions of Android.
|
||||
$include-dfn-fix: true !default;
|
||||
@if $include-dfn-fix {
|
||||
|
|
@ -343,81 +348,18 @@ a{
|
|||
@import 'mini-core/table';
|
||||
@import 'mini-core/contextual';
|
||||
@import 'mini-core/progress';
|
||||
@import 'mini-core/button';
|
||||
|
||||
// TODO: Move to forms and buttons respectively
|
||||
// TODO: Move to forms.
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
* Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated).
|
||||
*/
|
||||
|
|
@ -448,8 +390,6 @@ legend {
|
|||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
// TODO: Move to forms
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -482,16 +422,6 @@ textarea {
|
|||
-webkit-appearance: 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; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
|
|
|
|||
25
scss/v2/mini-core/_button.scss
Normal file
25
scss/v2/mini-core/_button.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
// Definitions for the button and button-like elements.
|
||||
// Different elements are styled based on the same set of rules.
|
||||
// Reset for Firefox focusing on button elements.
|
||||
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
// Fixes for Android 4, iOS and Safari.
|
||||
button, html [type="button"], [type="reset"], [type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
// Other fixes
|
||||
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
|
||||
}
|
||||
|
|
@ -7,7 +7,6 @@ table {
|
|||
border: $table-border-style;
|
||||
border-radius: $table-border-radius;
|
||||
margin: $table-margin;
|
||||
table-layout: fixed;
|
||||
}
|
||||
caption {
|
||||
font-size: $table-caption-font-size;
|
||||
|
|
|
|||
Loading…
Reference in a new issue