diff options
8 files changed, 203 insertions, 100 deletions
| -rw-r--r-- | src/base.less | 12 | ||||
| -rw-r--r-- | src/buttons.less | 6 | ||||
| -rw-r--r-- | src/dropdowns.less | 20 | ||||
| -rw-r--r-- | src/forms.less | 14 | ||||
| -rw-r--r-- | src/labels.less | 10 | ||||
| -rw-r--r-- | src/media.less | 11 | ||||
| -rw-r--r-- | src/normalize.less | 229 | ||||
| -rw-r--r-- | src/variables.less | 1 |
diff --git a/src/base.less b/src/base.less index f6bd606..6cba96c 100644 --- a/src/base.less +++ b/src/base.less @@ -45,3 +45,15 @@ a { vertical-align: -20%; } } + +// Caret +.icon-caret { + border-top: .4rem solid currentColor; + border-right: .4rem solid transparent; + border-left: .4rem solid transparent; + display: inline-block; + height: 0; + margin: 0 .2rem; + vertical-align: middle; + width: 0; +} diff --git a/src/buttons.less b/src/buttons.less index a21566b..260665a 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -135,15 +135,15 @@ .btn { flex: 1 0 auto; - &:first-child:not(:last-child) { + &:first-of-type:not(:last-of-type) { border-bottom-right-radius: 0; border-top-right-radius: 0; } - &:not(:first-child):not(:last-child) { + &:not(:first-of-type):not(:last-of-type) { border-radius: 0; margin-left: -.1rem; } - &:last-child:not(:first-child) { + &:last-of-type:not(:first-of-type) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: -.1rem; diff --git a/src/dropdowns.less b/src/dropdowns.less new file mode 100644 index 0000000..af61541 --- /dev/null +++ b/src/dropdowns.less @@ -0,0 +1,20 @@ +// Dropdown +.dropdown { + position: relative; + + .menu { + animation: slide-down .216s; + display: none; + left: 0; + min-width: @control-min-width; + position: absolute; + top: 100%; + transform: translateY(.5rem); + } + + &.active .menu, + .dropdown-toggle:focus + .menu, + .menu:hover { + display: block; + } +} diff --git a/src/forms.less b/src/forms.less index cd26924..131fbc5 100644 --- a/src/forms.less +++ b/src/forms.less @@ -4,7 +4,7 @@ } // Form element: Input boxes .form-input { - -webkit-appearance: none; + appearance: none; background: #fff; background-image: none; border: .1rem solid @control-color; @@ -64,6 +64,11 @@ &.is-danger { border-color: @control-color-danger; } + + // Input types + &[type=file] { + height: auto; + } } // Form element: Input note @@ -96,9 +101,15 @@ border-radius: .3rem; font-size: 1.4rem; line-height: 1.6rem; + min-width: @control-min-width; outline: 0; padding: .5rem .8rem; vertical-align: middle; + &[multiple] { + option { + padding: .2rem .4rem; + } + } &:not([multiple]) { background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem; height: 3.2rem; @@ -118,6 +129,7 @@ height: 2.4rem; padding: .4rem 2rem .4rem .6rem; } + &.select-lg { font-size: 1.6rem; height: 4.2rem; diff --git a/src/labels.less b/src/labels.less index 223a4b3..6bdf02c 100644 --- a/src/labels.less +++ b/src/labels.less @@ -6,6 +6,14 @@ white-space: nowrap; &.label-primary { - .toast-variant(@core-color); + .label-variant(@core-color); + } + + &.label-success { + .label-variant(@control-color-success); + } + + &.label-danger { + .label-variant(@control-color-danger); } } diff --git a/src/media.less b/src/media.less index 5f668fc..d4d2f89 100644 --- a/src/media.less +++ b/src/media.less @@ -4,6 +4,7 @@ height: auto; max-width: 100%; } + .video-responsive { height: 0; overflow: hidden; @@ -26,6 +27,16 @@ width: 100%; } } + .video-responsive-4-3 { padding-bottom: 75%; /* 4:3 */ } + +.figure { + margin: 0 0 @layout-gutter 0; + + .figure-caption { + color: @core-meta-color; + margin-top: @layout-gutter; + } +} diff --git a/src/normalize.less b/src/normalize.less index 1cef7e9..9b77e0e 100644 --- a/src/normalize.less +++ b/src/normalize.less @@ -1,11 +1,15 @@ -/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. - * 3. Prevent adjustments of font size after orientation changes in IE and iOS. + * 3. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. */ +/* Document + ========================================================================== */ + html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ @@ -13,6 +17,9 @@ html { -webkit-text-size-adjust: 100%; /* 3 */ } +/* Sections + ========================================================================== */ + /** * Remove the margin in all browsers (opinionated). */ @@ -21,69 +28,73 @@ body { margin: 0; } -/* HTML5 display definitions - ========================================================================== */ - /** * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. - * 2. Add the correct display in IE. */ article, aside, -details, /* 1 */ -figcaption, -figure, footer, header, -main, /* 2 */ -menu, nav, -section, -summary { /* 1 */ +section { display: block; } /** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** * Add the correct display in IE 9-. + * 1. Add the correct display in IE. */ -audio, -canvas, -progress, -video { - display: inline-block; +figcaption, +figure, +main { /* 1 */ + display: block; } /** - * Add the correct display in iOS 4-7. + * Add the correct margin in IE 8. */ -audio:not([controls]) { - display: none; - height: 0; +figure { + margin: 1em 40px; } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. */ -progress { - vertical-align: baseline; +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ } /** - * Add the correct display in IE 10-. - * 1. Add the correct display in IE. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. */ -template, /* 1 */ -[hidden] { - display: none; +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } -/* Links +/* Text-level semantics ========================================================================== */ /** @@ -106,9 +117,6 @@ a:hover { outline-width: 0; } -/* Text-level semantics - ========================================================================== */ - /** * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. @@ -139,21 +147,23 @@ strong { } /** - * Add the correct font style in Android 4.3-. + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. */ -dfn { - font-style: italic; +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. + * Add the correct font style in Android 4.3-. */ -h1 { - font-size: 2em; - margin: 0.67em 0; +dfn { + font-style: italic; } /** @@ -198,61 +208,44 @@ sup { ========================================================================== */ /** - * Remove the border on images inside links in IE 10-. - */ - -img { - border-style: none; -} - -/** - * Hide the overflow in IE. + * Add the correct display in IE 9-. */ -svg:not(:root) { - overflow: hidden; +audio, +video { + display: inline-block; } -/* Grouping content - ========================================================================== */ - /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. + * Add the correct display in iOS 4-7. */ -code, -kbd, -pre, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ +audio:not([controls]) { + display: none; + height: 0; } /** - * Add the correct margin in IE 8. + * Remove the border on images inside links in IE 10-. */ -figure { - margin: 1em 40px; +img { + border-style: none; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Hide the overflow in IE. */ -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ +svg:not(:root) { + overflow: hidden; } /* Forms ========================================================================== */ /** - * 1. Change font properties to `inherit` in all browsers (opinionated). + * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ @@ -261,19 +254,13 @@ input, optgroup, select, textarea { - font: inherit; /* 1 */ + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** - * Restore the font weight unset by the previous rule. - */ - -optgroup { - font-weight: bold; -} - -/** * Show the overflow in IE. * 1. Show the overflow in Edge. */ @@ -356,6 +343,16 @@ legend { } /** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** * Remove the default vertical scrollbar in IE. */ @@ -394,7 +391,7 @@ textarea { } /** - * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, @@ -403,15 +400,6 @@ textarea { } /** - * Correct the text style of placeholders in Chrome, Edge, and Safari. - */ - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.54; -} - -/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ @@ -419,4 +407,55 @@ textarea { ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ -}
\ No newline at end of file +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/src/variables.less b/src/variables.less index 1fe2f86..2298e32 100644 --- a/src/variables.less +++ b/src/variables.less @@ -11,6 +11,7 @@ // Sizes @layout-gutter: 1rem; +@control-min-width: 18rem; // Colors @core-color: #5764c6; |