From 18e7b3698e391694fcdf61258dbe8a95702857fb Mon Sep 17 00:00:00 2001 From: Raphael Date: Wed, 17 Jul 2019 17:32:39 +0200 Subject: [PATCH] =?UTF-8?q?fichiers=20gulp=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .browserslistrc | 3 +- changelog.md | 2 + css/knacss-unminified.css | 1516 +++++++++++++-------------- css/knacss.css | 4 +- gulpfile.js | 2 + package-lock.json | 2028 ++++++++++++------------------------- package.json | 12 +- 7 files changed, 1340 insertions(+), 2227 deletions(-) diff --git a/.browserslistrc b/.browserslistrc index 75d08d5..72d6096 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -3,7 +3,8 @@ last 2 versions IE >= 11 Edge >= 16 Chrome >= 60 -Firefox >= 50 Firefox ESR +Firefox >= 50 +Firefox ESR Safari >= 10 ios_saf >= 10 Android >= 6 \ No newline at end of file diff --git a/changelog.md b/changelog.md index fd5f926..79f87e4 100644 --- a/changelog.md +++ b/changelog.md @@ -3,9 +3,11 @@ ## Changelog v8.0.0 (xxx 2019) - mise à jour du reset, suppression des reset vendors (reboot) +- ajout d'une variable pour supporter ou non IE10/IE11 : `$ie: true !default;` - corrections typo - support passé de IE10 à IE11 (browserlist) - renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss` +- Browserslist devenu `.browserslistrc` ## Changelog v7.1.2 (30 janvier 2019) diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css index 0bc15e0..379f2d0 100644 --- a/css/knacss-unminified.css +++ b/css/knacss-unminified.css @@ -1,6 +1,6 @@ @charset "UTF-8"; /*! -* www.KNACSS.com v7.1.1 (december, 10 2018) @author: Alsacreations, Raphael Goetter +* www.KNACSS.com v7.1.2 (january, 30 2019) @author: Alsacreations, Raphael Goetter * Licence WTFPL http://www.wtfpl.net/ */ /* ----------------------------- */ @@ -8,8 +8,8 @@ /* ----------------------------- */ /* 1- Reboot (basic reset) -2- Libraries : - - Base +2- Base : + - Reset - Print - Layout (alignment, modules, positionning) - Utilities (width and spacers helpers) @@ -28,364 +28,12 @@ - Badges - Alerts */ -*, -*::before, -*::after { - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -html { - font-family: sans-serif; - line-height: 1.15; - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - text-size-adjust: 100%; - overflow-style: scrollbar; - -webkit-tap-highlight-color: transparent; -} - -@-ms-viewport { - width: device-width; -} - -@-o-viewport { - width: device-width; -} - -@viewport { - width: device-width; -} - -article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { - display: block; -} - -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: #212529; - text-align: left; - background-color: #fff; -} - -[tabindex="-1"]:focus { - outline: none !important; -} - -hr { - -webkit-box-sizing: content-box; - box-sizing: content-box; - height: 0; - overflow: visible; -} - -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0.5rem; -} - -p { - margin-top: 0; - margin-bottom: 1rem; -} - -abbr[title], -abbr[data-original-title] { - text-decoration: underline; - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; - cursor: help; - border-bottom: 0; -} - -address { - margin-bottom: 1rem; - font-style: normal; - line-height: inherit; -} - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: 1rem; -} - -ol ol, -ul ul, -ol ul, -ul ol { - margin-bottom: 0; -} - -dt { - font-weight: 700; -} - -dd { - margin-bottom: .5rem; - margin-left: 0; -} - -blockquote { - margin: 0 0 1rem; -} - -dfn { - font-style: italic; -} - -b, -strong { - font-weight: bold; -} - -small { - font-size: 80%; -} - -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; -} - -sub { - bottom: -.25em; -} - -sup { - top: -.5em; -} - -a { - color: #007bff; - text-decoration: none; - background-color: transparent; -} - -a:hover { - color: #0056b3; - text-decoration: underline; -} - -a:not([href]):not([tabindex]) { - color: inherit; - text-decoration: none; -} - -a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover { - color: inherit; - text-decoration: none; -} - -a:not([href]):not([tabindex]):focus { - outline: 0; -} - -pre, -code, -kbd, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -pre { - margin-top: 0; - margin-bottom: 1rem; - overflow: auto; -} - -figure { - margin: 0 0 1rem; -} - -img { - vertical-align: middle; - border-style: none; -} - -svg:not(:root) { - overflow: hidden; -} - -a, -area, -button, -[role="button"], -input:not([type="range"]), -label, -select, -summary, -textarea { - -ms-touch-action: manipulation; - touch-action: manipulation; -} - -table { - border-collapse: collapse; -} - -caption { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - color: #868e96; - text-align: left; - caption-side: bottom; -} - -th { - text-align: inherit; -} - -label { - display: inline-block; - margin-bottom: .5rem; -} - -button { - border-radius: 0; -} - -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; -} - -input, -button, -select, -optgroup, -textarea { - margin: 0; - font-family: inherit; - font-size: inherit; - line-height: inherit; -} - -button, -input { - overflow: visible; -} - -button, -select { - text-transform: none; -} - -button, -html [type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; - -moz-appearance: button; - appearance: button; -} - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - padding: 0; - border-style: none; -} - -input[type="radio"], -input[type="checkbox"] { - -webkit-box-sizing: border-box; - box-sizing: border-box; - padding: 0; -} - -input[type="date"], -input[type="time"], -input[type="datetime-local"], -input[type="month"] { - -webkit-appearance: listbox; - -moz-appearance: listbox; - appearance: listbox; -} - -textarea { - overflow: auto; - resize: vertical; -} - -fieldset { - min-width: 0; - padding: 0; - margin: 0; - border: 0; -} - -legend { - display: block; - width: 100%; - max-width: 100%; - padding: 0; - margin-bottom: .5rem; - font-size: 1.5rem; - line-height: inherit; - color: inherit; - white-space: normal; -} - -progress { - vertical-align: baseline; -} - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -[type="search"] { - outline-offset: -2px; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; - appearance: none; -} - -::-webkit-file-upload-button { - font: inherit; - -webkit-appearance: button; - appearance: button; -} - -output { - display: inline-block; -} - -summary { - display: list-item; -} - -template { - display: none; -} - -[hidden] { - display: none !important; -} - /* ----------------------------- */ -/* ==Base (basic styles) */ +/* ==Reset (global) */ /* ----------------------------- */ -/* disable animations styles when reduced rotion is enabled */ +/** + * disable animations styles when reduced motion is enabled + */ @media (prefers-reduced-motion: reduce) { * { -webkit-animation: none !important; @@ -395,27 +43,37 @@ template { } } -/* switching to border-box model for all elements */ -html { - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - +/** + * 1. switch to border-box model for all elements + * 2. avoid min-width: auto and min-height: auto on flex and grid children + */ *, *::before, *::after { - -webkit-box-sizing: inherit; - box-sizing: inherit; - /* avoid min-width: auto on flex and grid children */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + /* 1 */ min-width: 0; + /* 2 */ min-height: 0; + /* 2 */ } +/** + * 1. remove the grey highlight on links in iOS + * 2. prevent orientation font changes in iOS + * 3. set base font-size to equiv "10px", which is adapted to rem unit + */ html { - /* set base font-size to equiv "10px", which is adapted to rem unit */ - font-size: 62.5%; - /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ + -webkit-tap-highlight-color: transparent; + /* 1 */ + -webkit-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + text-size-adjust: 100%; + /* 2 */ font-size: calc(1em * 0.625); + /* 3 */ } body { @@ -433,7 +91,9 @@ body { } } -/* Links */ +/** + * links + */ a { color: #333; text-decoration: underline; @@ -444,7 +104,9 @@ a:focus, a:hover, a:active { text-decoration: underline; } -/* Headings */ +/** + * headings + */ h1, .h1-like { font-size: 2.8rem; font-family: sans-serif; @@ -513,7 +175,9 @@ h6, .h6-like { } } -/* Vertical rythm */ +/** + * vertical rythm + */ h1, h2, h3, @@ -536,7 +200,9 @@ pre { margin-bottom: 1rem; } -/* Avoid margins on nested elements */ +/** + * avoid margin on nested elements + */ li p, li .p-like, li ul, @@ -547,7 +213,24 @@ ul ul { margin-bottom: 0; } -/* Max values */ +/* ----------------------------- */ +/* ==Reset (common styling) */ +/* ----------------------------- */ +a, +area, +button, +[role="button"], +.btn, +.button, +[type="button"] input:not([type="range"]), +label, +select, +summary, +textarea { + -ms-touch-action: manipulation; + touch-action: manipulation; +} + img, table, td, @@ -563,16 +246,25 @@ svg { img { height: auto; + vertical-align: middle; + border-style: none; +} + +/** + * fill color matching to text color + */ +svg:not([fill]) { + fill: currentColor; } -/* Styling elements */ ul, ol { padding-left: 2em; } -img { - vertical-align: middle; +b, +strong { + font-weight: bolder; } em, @@ -584,6 +276,170 @@ var { font-style: italic; } +/* ----------------------------- */ +/* ==Reset (buttons) */ +/* ----------------------------- */ +input, +button, +select, +optgroup, +textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +/** +* 1. show overflow in IE/Edge +*/ +button, +input { + overflow: visible; + /* 1 */ +} + +/** +* 1. remove the inheritance of text transform in Firefox +*/ +button, +select { + text-transform: none; + /* 1 */ +} + +/** + * 1. correct the inability to style clickable types in iOS and Safari. + */ +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + /* 1 */ +} + +/** + * 1. 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; + /* 1 */ + padding: 0; +} + +/** + * 1. 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; + /* 1 */ +} + +/* ----------------------------- */ +/* ==Reset (forms) */ +/* ----------------------------- */ +form, +fieldset { + border: none; +} + +fieldset { + padding: 2rem; +} + +legend { + padding: 0 0.5rem; + border: 0; + white-space: normal; +} + +label { + display: inline-block; + cursor: pointer; +} + +textarea { + overflow: auto; + min-height: 5em; + vertical-align: top; + resize: vertical; + white-space: pre-wrap; +} + +progress { + display: inline-block; + width: 100%; + vertical-align: baseline; +} + +/* ----------------------------- */ +/* ==Reset (inputs) */ +/* ----------------------------- */ +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { + outline-offset: -2px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +::-webkit-search-cancel-button, +::-webkit-search-decoration { + -webkit-appearance: none; + appearance: none; +} + +::-webkit-file-upload-button { + font: inherit; + -webkit-appearance: button; + appearance: button; +} + +output { + display: inline-block; +} + +summary { + display: list-item; +} + +template { + display: none; +} + +/* ----------------------------- */ +/* ==Reset (misc styling) */ +/* ----------------------------- */ +pre, +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; + white-space: pre-wrap; + line-height: normal; +} + +pre { + overflow: auto; + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; +} + code, kbd, mark { @@ -595,12 +451,6 @@ kbd { border: 1px solid #999; } -pre { - -moz-tab-size: 2; - -o-tab-size: 2; - tab-size: 2; -} - code { padding: 2px 4px; background: rgba(0, 0, 0, 0.04); @@ -631,6 +481,9 @@ sub { top: 0.5ex; } +/** + * quotes, blockquote and hr styling + */ blockquote { position: relative; padding-left: 3em; @@ -690,13 +543,28 @@ figure { margin-right: 0; } -code, -pre, -samp, -kbd { - white-space: pre-wrap; - font-family: consolas, courier, monospace; - line-height: normal; +/* ----------------------------- */ +/* ==Reset (IE rules) */ +/* ----------------------------- */ +@-ms-viewport { + width: device-width; +} +@-o-viewport { + width: device-width; +} +@viewport { + width: device-width; +} + +article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { + display: block; +} + +/** + * hide overflow in IE + */ +svg:not(:root) { + overflow: hidden; } /* ----------------------------- */ @@ -1944,261 +1812,207 @@ ul.is-unstyled, ul.unstyled { } /* ----------------------------- */ -/* ==Media object */ +/* ==Alerts */ /* ----------------------------- */ -/* recommended HTML :
*/ -/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */ -@media (min-width: 480px) { - .media { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: start; - -ms-flex-align: start; - align-items: flex-start; - } - .media-content { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1; - } - .media-figure--center { - -ms-flex-item-align: center; - -ms-grid-row-align: center; - align-self: center; - } - .media--reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; - } -} - -/* ----------------------------- */ -/* ==skip links */ -/* ----------------------------- */ -/* see https://www.alsacreations.com/article/lire/572-Les-liens-d-evitement.html */ -/* styling skip links */ -.skip-links { - position: absolute; -} - -.skip-links a { - position: absolute; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - padding: 0.5em; - background: black; - color: white; - text-decoration: none; -} - -.skip-links a:focus { - position: static; - overflow: visible; - clip: auto; -} - -/* ----------------------------- */ -/* ==Tables */ -/* ----------------------------- */ -table, -.table { - width: 100%; - max-width: 100%; - table-layout: fixed; - border-collapse: collapse; - vertical-align: top; - margin-bottom: 2rem; -} - -.table { - display: table; - border: 1px solid #acb3c2; - background: transparent; -} - -.table--zebra tbody tr:nth-child(odd) { - background: #e7e9ed; -} - -.table caption { - caption-side: bottom; - padding: 1rem; - color: #333; - font-style: italic; - text-align: right; -} - -.table td, -.table th { - padding: 0.3rem 0.6rem; - min-width: 2rem; - vertical-align: top; - border: 1px #acb3c2 dotted; - text-align: left; - cursor: default; -} - -.table thead { +/* use .alert-- classes for variants */ +.alert, .alert--primary, .alert--success, .alert--info, .alert--warning, .alert--danger, .alert--inverse, .alert--ghost { + padding: 1rem 1rem; + margin-top: 0.75em; + margin-bottom: 0; color: #212529; - background: transparent; -} - -.table--auto { - table-layout: auto; -} - -/* ----------------------------- */ -/* ==Forms */ -/* ----------------------------- */ -/* thanks to HTML5boilerplate and https://shoelace.style/ */ -/* forms items */ -form, -fieldset { - border: none; -} - -fieldset { - padding: 2rem; -} - -fieldset legend { - padding: 0 0.5rem; - border: 0; - white-space: normal; -} - -label { - display: inline-block; - cursor: pointer; -} - -[type="color"], -[type="date"], -[type="datetime-local"], -[type="email"], -[type="month"], -[type="number"], -[type="password"], -[type="search"], -[type="submit"], -[type="tel"], -[type="text"], -[type="time"], -[type="url"], -[type="week"], -select, -textarea { - font-family: inherit; - font-size: inherit; - border: 0; - -webkit-box-shadow: 0 0 0 1px #333 inset; - box-shadow: 0 0 0 1px #333 inset; - color: #212529; - vertical-align: middle; - padding: 0.5rem 1rem; - margin: 0; - -webkit-transition: 0.25s; - transition: 0.25s; - -webkit-transition-property: background-color, color, border, -webkit-box-shadow; - transition-property: background-color, color, border, -webkit-box-shadow; - transition-property: box-shadow, background-color, color, border; - transition-property: box-shadow, background-color, color, border, -webkit-box-shadow; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} - -[type="submit"] { - background-color: #333; - color: #fff; - cursor: pointer; -} - -input[readonly] { + border-radius: 0; background-color: #e7e9ed; } -select { - padding-right: 2rem; - border-radius: 0; - background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); - background-position: right .6rem center; - background-repeat: no-repeat; - background-size: 1.2rem; +.alert a, .alert--primary a, .alert--success a, .alert--info a, .alert--warning a, .alert--danger a, .alert--inverse a, .alert--ghost a { + color: inherit; + text-decoration: underline; } -/* hiding IE11 arrow */ -select::-ms-expand { +.alert--primary { + background-color: #0275D8; + color: #fff; + -webkit-box-shadow: none; + box-shadow: none; +} + +.alert--success { + background-color: #5CB85C; + color: #fff; + -webkit-box-shadow: none; + box-shadow: none; +} + +.alert--info { + background-color: #5BC0DE; + color: #000; + -webkit-box-shadow: none; + box-shadow: none; +} + +.alert--warning { + background-color: #F0AD4E; + color: #000; + -webkit-box-shadow: none; + box-shadow: none; +} + +.alert--danger { + background-color: #D9534F; + color: #fff; + -webkit-box-shadow: none; + box-shadow: none; +} + +.alert--inverse { + background-color: #333; + color: #fff; + -webkit-box-shadow: none; + box-shadow: none; +} + +.alert--ghost { + background-color: transparent; + color: #fff; + -webkit-box-shadow: 0 0 0 1px #fff inset; + box-shadow: 0 0 0 1px #fff inset; +} + +.alert--small { + font-size: 1.2rem; +} + +.alert--big { + font-size: 2rem; +} + +.alert--block { + width: 100% !important; + display: block; +} + +.alert.disabled, .disabled.alert--primary, .disabled.alert--success, .disabled.alert--info, .disabled.alert--warning, .disabled.alert--danger, .disabled.alert--inverse, .disabled.alert--ghost, .alert--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.alert:empty, .alert--primary:empty, .alert--success:empty, .alert--info:empty, .alert--warning:empty, .alert--danger:empty, .alert--inverse:empty, .alert--ghost:empty { display: none; } -textarea { - min-height: 5em; - vertical-align: top; - resize: vertical; - white-space: pre-wrap; -} - -/* 'x' appears on right of search input when text is entered. This removes it */ -[type="search"]::-webkit-search-decoration, [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-results-button, [type="search"]::-webkit-search-results-decoration { - display: none; -} - -::-webkit-input-placeholder { - color: #777; -} - -::-moz-placeholder { - color: #777; -} - -:-ms-input-placeholder { - color: #777; -} - -::-ms-input-placeholder { - color: #777; -} - -::placeholder { - color: #777; -} - -input::-webkit-input-placeholder, -textarea::-webkit-input-placeholder { - color: #777; -} - -input::-moz-placeholder, -textarea::-moz-placeholder { - color: #777; -} - -input:-ms-input-placeholder, -textarea:-ms-input-placeholder { - color: #777; -} - -input::-ms-input-placeholder, -textarea::-ms-input-placeholder { - color: #777; -} - -input::placeholder, -textarea::placeholder { - color: #777; -} - -progress { - width: 100%; - vertical-align: middle; -} - /* ----------------------------- */ -/* ==Buttons */ +/* ==Arrows */ +/* ----------------------------- */ +/* see https://knacss.com/styleguide.html#arrows */ +[class*="icon-arrow--"] { + vertical-align: middle; +} + +[class*="icon-arrow--"]::after { + content: ""; + display: inline-block; + width: 1em; + height: 1em; + -webkit-mask-size: cover; + mask-size: cover; + background-color: #000; + line-height: 1; +} + +.icon-arrow--down::after { + -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); +} + +.icon-arrow--up::after { + -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); +} + +.icon-arrow--right::after { + -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%2011.685%2010.321%20L%205.308%2016.758%20C%204.346%2017.817%206.561%2019.786%207.49%2018.776%20L%207.49%2018.776%20L%2014.482%2011.787%20C%2015.069%2011.142%2015.088%209.626%2014.482%208.991%20L%2014.482%208.991%20L%207.49%201.791%20C%206.472%200.724%204.399%202.916%205.444%204.019%20L%205.444%204.019%20L%2011.685%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%2011.685%2010.321%20L%205.308%2016.758%20C%204.346%2017.817%206.561%2019.786%207.49%2018.776%20L%207.49%2018.776%20L%2014.482%2011.787%20C%2015.069%2011.142%2015.088%209.626%2014.482%208.991%20L%2014.482%208.991%20L%207.49%201.791%20C%206.472%200.724%204.399%202.916%205.444%204.019%20L%205.444%204.019%20L%2011.685%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); +} + +.icon-arrow--left::after { + -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%208.315%2010.321%20L%2014.692%2016.758%20C%2015.654%2017.817%2013.439%2019.786%2012.51%2018.776%20L%2012.51%2018.776%20L%205.518%2011.787%20C%204.931%2011.142%204.912%209.626%205.518%208.991%20L%205.518%208.991%20L%2012.51%201.791%20C%2013.528%200.724%2015.601%202.916%2014.556%204.019%20L%2014.556%204.019%20L%208.315%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%208.315%2010.321%20L%2014.692%2016.758%20C%2015.654%2017.817%2013.439%2019.786%2012.51%2018.776%20L%2012.51%2018.776%20L%205.518%2011.787%20C%204.931%2011.142%204.912%209.626%205.518%208.991%20L%205.518%208.991%20L%2012.51%201.791%20C%2013.528%200.724%2015.601%202.916%2014.556%204.019%20L%2014.556%204.019%20L%208.315%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); +} + +/* ----------------------------- */ +/* ==Badges */ +/* ----------------------------- */ +/* use .badge-- classes for variants */ +.badge, .badge--primary, .badge--success, .badge--info, .badge--warning, .badge--danger, .badge--inverse, .badge--ghost { + display: inline-block; + padding: 0.5rem; + border-radius: 50%; + color: #212529; + background-color: #e7e9ed; + line-height: 1; +} + +.badge::before, .badge--primary::before, .badge--success::before, .badge--info::before, .badge--warning::before, .badge--danger::before, .badge--inverse::before, .badge--ghost::before { + content: ""; + display: inline-block; + vertical-align: middle; + padding-top: 100%; +} + +.badge--primary { + background-color: #0275D8; + color: #fff; +} + +.badge--success { + background-color: #5CB85C; + color: #fff; +} + +.badge--info { + background-color: #5BC0DE; + color: #000; +} + +.badge--warning { + background-color: #F0AD4E; + color: #000; +} + +.badge--danger { + background-color: #D9534F; + color: #fff; +} + +.badge--inverse { + background-color: #333; + color: #fff; +} + +.badge--ghost { + background-color: transparent; + color: #fff; +} + +.badge--small { + font-size: 1.2rem; +} + +.badge--big { + font-size: 2rem; +} + +.badge.disabled, .disabled.badge--primary, .disabled.badge--success, .disabled.badge--info, .disabled.badge--warning, .disabled.badge--danger, .disabled.badge--inverse, .disabled.badge--ghost, .badge--disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.badge:empty, .badge--primary:empty, .badge--success:empty, .badge--info:empty, .badge--warning:empty, .badge--danger:empty, .badge--inverse:empty, .badge--ghost:empty { + display: none; +} + +/* ----------------------------- */ +/* ==Buttons styling */ /* ----------------------------- */ /* preferably use