mise à jour du reset (suppression reset vendor)

changelog.md

@@ -2,7 +2,7 @@
 
 ## Changelog v8.0.0 (xxx 2019)
 
-- mise à jour du reset
+- mise à jour du reset, suppression des reset vendors (reboot)
 - 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`

sass/abstracts/_variables.scss

@@ -75,6 +75,9 @@ $weight-bold    : 700 !default;
 // Activate hyphenation on small screens
 $hyphens: false !default;
 
+// Activate IE10-IE11 fixes
+$ie: true !default;
+
 // ------------
 // Spacing zone
 // ------------

sass/base/_reset.scss

@@ -1,8 +1,7 @@
 /* ----------------------------- */
-/* ==Reset                       */
+/* ==Reset (global)              */
 /* ----------------------------- */
 
-
 /**
  * disable animations styles when reduced motion is enabled
  */
@@ -144,9 +143,9 @@ ul ul {
   margin-bottom: 0;
 }
 
-/**
+/* ----------------------------- */
- * common elements styling
+/* ==Reset (common styling)      */
- */
+/* ----------------------------- */
 
 a,
 area,
@@ -191,15 +190,6 @@ svg:not([fill]) {
   fill: currentColor;
 }
 
-
-/**
- * hide overflow in IE
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
 ul,
 ol {
   padding-left: 2em;
@@ -219,11 +209,151 @@ var {
   font-style: italic;
 }
 
+/* ----------------------------- */
+/* ==Reset (buttons)             */
+/* ----------------------------- */
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
 
 /**
- * monospace tags and mark tag styling
+* 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; /* 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: $spacer-medium;
+}
+
+legend {
+  padding: 0 $spacer-tiny;
+  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;
+}
+
+::-webkit-search-cancel-button,
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+/* ----------------------------- */
+/* ==Reset (misc styling)        */
+/* ----------------------------- */
+
 pre,
 code,
 kbd,
@@ -342,3 +472,29 @@ figure {
   margin-left: 0;
   margin-right: 0;
 }
+
+
+@if variable-exists(ie) and $ie==true {
+  
+  /* ----------------------------- */
+  /* ==Reset (IE rules)            */
+  /* ----------------------------- */
+
+  @-ms-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;
+  }
+
+}
+

sass/components/_buttons.scss

@@ -1,6 +1,7 @@
 /* ----------------------------- */
-/* ==Buttons                     */
+/* ==Buttons styling             */
 /* ----------------------------- */
+
 /* preferably use <button> for buttons !*/
 /* use .btn-- or .button-- classes for variants */
 
@@ -19,9 +20,6 @@
   border: none;
   border-radius: $border-radius;
   background-color: $color-muted;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: 1;
 }
 
 .btn,

sass/components/_forms.scss

@@ -1,28 +1,6 @@
 /* ----------------------------- */
-/* ==Forms                       */
+/* ==Forms styling               */
 /* ----------------------------- */
-/* thanks to HTML5boilerplate and https://shoelace.style/ */
-
-/* forms items */
-form,
-fieldset {
-  border: none;
-}
-
-fieldset {
-  padding: $spacer-medium;
-
-  & legend {
-    padding: 0 $spacer-tiny;
-    border: 0;
-    white-space: normal;
-  }
-}
-
-label {
-  display: inline-block;
-  cursor: pointer;
-}
 
 [type="color"],
 [type="date"],
@@ -107,8 +85,3 @@ input::placeholder,
 textarea::placeholder {
   color: #777;
 }
-
-progress {
-  width: 100%;
-  vertical-align: middle;
-}

sass/knacss.scss

@@ -30,8 +30,6 @@
   - Alerts
 */
 
-@import "vendor/reboot"; // Bootstrap reboot (basic reset) (CSS file renamed and imported as if it was a partial because of libsass)
-
 // WARNING : you should comment the following @import (variables)
 // and move variables file from knacss folder to your own project folder!
 @import "abstracts/variables";
@@ -39,7 +37,7 @@
 @import "abstracts/mixins";
 
 // Core Libraries
-@import "base/reset";         // basic styles
+@import "base/reset";        // basic styles
 @import "base/print";        // print quick reset
 @import "base/layout";       // alignment, modules, positionning
 @import "base/utilities";    // width and spacer helpers
@@ -51,14 +49,14 @@
 @import "base/grillade-grid"; // grid system with Grid Layout
 
 // Components
+@import "components/alerts";     // alerts styles
+@import "components/arrows";     // arrows styles
+@import "components/badges";     // badges styles
+@import "components/buttons";    // buttons styles
+@import "components/checkbox";   // checkbox, radio, switch styles
+@import "components/forms";      // forms consistency and styles
 @import "components/media";      // media object
 @import "components/skip-links"; // skip links
 @import "components/tables";     // data tables consistency
-@import "components/forms";      // forms consistency and styles
-@import "components/buttons";    // buttons styles
-@import "components/checkbox";   // checkbox, radio, switch styles
 @import "components/tabs";       // tabs styles
-@import "components/arrows";     // arrows styles
+@import "components/tags";       // tags styles
-@import "components/tags";        // tags styles
-@import "components/badges";     // badges styles
-@import "components/alerts";     // alerts styles

sass/vendor/_reboot.scss

@@ -1,334 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: sans-serif;
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -ms-overflow-style: scrollbar;
-  -webkit-tap-highlight-color: transparent;
-}
-
-@-ms-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 {
-  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;
-  -webkit-text-decoration-skip: objects;
-}
-
-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;
-  -ms-overflow-style: scrollbar;
-}
-
-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;
-}
-
-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"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
-  -webkit-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;
-}
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-::-webkit-file-upload-button {
-  font: inherit;
-  -webkit-appearance: button;
-}
-
-output {
-  display: inline-block;
-}
-
-summary {
-  display: list-item;
-}
-
-template {
-  display: none;
-}
-
-[hidden] {
-  display: none !important;
-}