@nappr/nappr-styles 0.2.23 → 0.2.26

package/dist/styles.css

@@ -4,227 +4,6 @@
  * !!! DO NOT REORDER -> Declarative loading
  *
  */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  -webkit-overflow-scrolling: touch;
-  padding: 0;
-}
-
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  /* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-  */
-  border: 0;
-  font: inherit;
-  font-size: 100%;
-  margin: 0;
-  padding: 0;
-  vertical-align: baseline;
-}
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-
-html,
-body {
-  margin: 0;
-  min-height: 100vh;
-  padding: 0;
-}
-
-body {
-  color: #000000;
-  font-family: Helvetica, Arial, Verdana, sans-serif;
-  font-size: 16px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  line-height: 1;
-  width: 100vw;
-}
-
-hr,
-input,
-button,
-textarea,
-[role=reset],
-[role=submit],
-[role=button] {
-  margin: 0;
-  padding: 0;
-}
-
-ul,
-ol,
-li {
-  list-style-type: none;
-}
-
-ol + ol,
-li + li {
-  margin-top: 12px;
-}
-
-blockquote,
-q {
-  quotes: none;
-}
-
-blockquote::before,
-blockquote::after,
-q::before,
-q::after {
-  content: "";
-  content: none;
-}
-
-a,
-button {
-  cursor: pointer;
-}
-
-pre {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-p {
-  white-space: initial;
-}
-
-button,
-[role=reset],
-[role=submit],
-[role=button] {
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  font-size: 1rem;
-  overflow: hidden;
-  text-align: center;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  user-select: none;
-  white-space: nowrap;
-}
-
-.disabled,
-:disabled,
-:disabled:link,
-:disabled:visited,
-:disabled:hover,
-:disabled:active {
-  box-shadow: inherit;
-  cursor: default;
-  cursor: not-allowed;
-  pointer-events: none;
-  text-shadow: inherit;
-}
-
-/*
-// @NOTE
-// a:hover DOIT venir après a:link et a:visited
-// a:active DOIT venir après un a:hover
-a:not(.is-underline),
-a:link:not(.is-underline),
-a:visited:not(.is-underline),
-a:hover:not(.is-underline),
-a:active:not(.is-underline) {
-  text-decoration: none;
-}
-*/
 /**
  * Ce fichier permet de transformer
  * Les fichiers de variables
@@ -236,6 +15,57 @@ a:active:not(.is-underline) {
 SOURCE: https://github.com/pierreburel/sass-rem
 
 ------------------------------------ */
+:root {
+  --nappr-black: #000000;
+  --nappr-white: #ffffff;
+  --nappr-grey: #7f7f7f;
+  --nappr-blue: #0000ff;
+  --nappr-red: #ff0000;
+  --nappr-green: #00ff00;
+  --nappr-yellow: #f0f00f;
+  --nappr-magenta: #800080;
+  --nappr-orange: #ffa500;
+  --nappr-warning: #2b2925;
+  --nappr-success: #268744;
+  --nappr-info: #0762c8;
+  --nappr-error: #ff0000;
+  --nappr-g100: #f8f8f8;
+  --nappr-g200: #f0f0f0;
+  --nappr-g300: #e7e7e7;
+  --nappr-g400: #cecece;
+  --nappr-g500: #9c9c9c;
+  --nappr-g600: #6a6a6a;
+  --nappr-g700: #383838;
+  --nappr-g750: #2a2a2a;
+  --nappr-g800: #1e1e1e;
+  --nappr-pastel-blue: #5db0d7;
+  --nappr-pastel-yellow: #f9da9b;
+  --nappr-pastel-red: #db8c62;
+  --nappr-pastel-green: #42b983;
+  --nappr-pastel-purple: #9a7fd5;
+  --nappr-pastel-verde: #40d4c7;
+  --nappr-pastel-kaki: #b9c580;
+  --nappr-pastel-gold: #c7b654;
+  --nappr-chrome-red: #ff8080;
+  --nappr-chrome-yellow: #ffdd9e;
+  --nappr-chrome-black: #242424;
+  --nappr-chrome-grey: #333333;
+  --nappr-chrome-light: #525252;
+  --nappr-chrome-white: #e6e6e6;
+  --nappr-airbnb: #ff385c;
+  --nappr-amazon: #ff9900;
+  --nappr-twitch: #9147ff;
+  --nappr-youtube: #ff0000;
+  --nappr-twitter: #1da1f2;
+  --nappr-facebook: #365899;
+  --nappr-instagram: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
+  --nappr-breakpoints-xs: 320px;
+  --nappr-breakpoints-sm: 576px;
+  --nappr-breakpoints-md: 768px;
+  --nappr-breakpoints-lg: 1024px;
+  --nappr-breakpoints-xl: 1248px;
+}
+
 .b1 {
   border-width: 1px;
   border-width: 0.0625rem;
@@ -322,55 +152,331 @@ SOURCE: https://github.com/pierreburel/sass-rem
   border-style: solid;
 }
 
-.bb2 {
-  border-bottom-width: 2px;
-  border-bottom-width: 0.125rem;
+.bb2 {
+  border-bottom-width: 2px;
+  border-bottom-width: 0.125rem;
+  border-style: solid;
+}
+
+.b3 {
+  border-width: 3px;
+  border-width: 0.1875rem;
+  border-style: solid;
+}
+
+.by3 {
+  border-top-width: 3px;
+  border-top-width: 0.1875rem;
+  border-bottom-width: 3px;
+  border-bottom-width: 0.1875rem;
+  border-style: solid;
+}
+
+.bx3 {
+  border-left-width: 3px;
+  border-left-width: 0.1875rem;
+  border-right-width: 3px;
+  border-right-width: 0.1875rem;
+  border-style: solid;
+}
+
+.bt3 {
+  border-top-width: 3px;
+  border-top-width: 0.1875rem;
+  border-style: solid;
+}
+
+.bl3 {
+  border-left-width: 3px;
+  border-left-width: 0.1875rem;
+  border-style: solid;
+}
+
+.br3 {
+  border-right-width: 3px;
+  border-right-width: 0.1875rem;
+  border-style: solid;
+}
+
+.bb3 {
+  border-bottom-width: 3px;
+  border-bottom-width: 0.1875rem;
+  border-style: solid;
+}
+
+.b4 {
+  border-width: 4px;
+  border-width: 0.25rem;
+  border-style: solid;
+}
+
+.by4 {
+  border-top-width: 4px;
+  border-top-width: 0.25rem;
+  border-bottom-width: 4px;
+  border-bottom-width: 0.25rem;
+  border-style: solid;
+}
+
+.bx4 {
+  border-left-width: 4px;
+  border-left-width: 0.25rem;
+  border-right-width: 4px;
+  border-right-width: 0.25rem;
+  border-style: solid;
+}
+
+.bt4 {
+  border-top-width: 4px;
+  border-top-width: 0.25rem;
+  border-style: solid;
+}
+
+.bl4 {
+  border-left-width: 4px;
+  border-left-width: 0.25rem;
+  border-style: solid;
+}
+
+.br4 {
+  border-right-width: 4px;
+  border-right-width: 0.25rem;
+  border-style: solid;
+}
+
+.bb4 {
+  border-bottom-width: 4px;
+  border-bottom-width: 0.25rem;
+  border-style: solid;
+}
+
+.b5 {
+  border-width: 5px;
+  border-width: 0.3125rem;
+  border-style: solid;
+}
+
+.by5 {
+  border-top-width: 5px;
+  border-top-width: 0.3125rem;
+  border-bottom-width: 5px;
+  border-bottom-width: 0.3125rem;
+  border-style: solid;
+}
+
+.bx5 {
+  border-left-width: 5px;
+  border-left-width: 0.3125rem;
+  border-right-width: 5px;
+  border-right-width: 0.3125rem;
+  border-style: solid;
+}
+
+.bt5 {
+  border-top-width: 5px;
+  border-top-width: 0.3125rem;
+  border-style: solid;
+}
+
+.bl5 {
+  border-left-width: 5px;
+  border-left-width: 0.3125rem;
+  border-style: solid;
+}
+
+.br5 {
+  border-right-width: 5px;
+  border-right-width: 0.3125rem;
+  border-style: solid;
+}
+
+.bb5 {
+  border-bottom-width: 5px;
+  border-bottom-width: 0.3125rem;
+  border-style: solid;
+}
+
+.b6 {
+  border-width: 6px;
+  border-width: 0.375rem;
+  border-style: solid;
+}
+
+.by6 {
+  border-top-width: 6px;
+  border-top-width: 0.375rem;
+  border-bottom-width: 6px;
+  border-bottom-width: 0.375rem;
+  border-style: solid;
+}
+
+.bx6 {
+  border-left-width: 6px;
+  border-left-width: 0.375rem;
+  border-right-width: 6px;
+  border-right-width: 0.375rem;
+  border-style: solid;
+}
+
+.bt6 {
+  border-top-width: 6px;
+  border-top-width: 0.375rem;
+  border-style: solid;
+}
+
+.bl6 {
+  border-left-width: 6px;
+  border-left-width: 0.375rem;
+  border-style: solid;
+}
+
+.br6 {
+  border-right-width: 6px;
+  border-right-width: 0.375rem;
+  border-style: solid;
+}
+
+.bb6 {
+  border-bottom-width: 6px;
+  border-bottom-width: 0.375rem;
+  border-style: solid;
+}
+
+.b7 {
+  border-width: 7px;
+  border-width: 0.4375rem;
+  border-style: solid;
+}
+
+.by7 {
+  border-top-width: 7px;
+  border-top-width: 0.4375rem;
+  border-bottom-width: 7px;
+  border-bottom-width: 0.4375rem;
+  border-style: solid;
+}
+
+.bx7 {
+  border-left-width: 7px;
+  border-left-width: 0.4375rem;
+  border-right-width: 7px;
+  border-right-width: 0.4375rem;
+  border-style: solid;
+}
+
+.bt7 {
+  border-top-width: 7px;
+  border-top-width: 0.4375rem;
+  border-style: solid;
+}
+
+.bl7 {
+  border-left-width: 7px;
+  border-left-width: 0.4375rem;
+  border-style: solid;
+}
+
+.br7 {
+  border-right-width: 7px;
+  border-right-width: 0.4375rem;
+  border-style: solid;
+}
+
+.bb7 {
+  border-bottom-width: 7px;
+  border-bottom-width: 0.4375rem;
+  border-style: solid;
+}
+
+.b8 {
+  border-width: 8px;
+  border-width: 0.5rem;
+  border-style: solid;
+}
+
+.by8 {
+  border-top-width: 8px;
+  border-top-width: 0.5rem;
+  border-bottom-width: 8px;
+  border-bottom-width: 0.5rem;
+  border-style: solid;
+}
+
+.bx8 {
+  border-left-width: 8px;
+  border-left-width: 0.5rem;
+  border-right-width: 8px;
+  border-right-width: 0.5rem;
+  border-style: solid;
+}
+
+.bt8 {
+  border-top-width: 8px;
+  border-top-width: 0.5rem;
+  border-style: solid;
+}
+
+.bl8 {
+  border-left-width: 8px;
+  border-left-width: 0.5rem;
+  border-style: solid;
+}
+
+.br8 {
+  border-right-width: 8px;
+  border-right-width: 0.5rem;
+  border-style: solid;
+}
+
+.bb8 {
+  border-bottom-width: 8px;
+  border-bottom-width: 0.5rem;
   border-style: solid;
 }
 
-.b3 {
-  border-width: 3px;
-  border-width: 0.1875rem;
+.b10 {
+  border-width: 10px;
+  border-width: 0.625rem;
   border-style: solid;
 }
 
-.by3 {
-  border-top-width: 3px;
-  border-top-width: 0.1875rem;
-  border-bottom-width: 3px;
-  border-bottom-width: 0.1875rem;
+.by10 {
+  border-top-width: 10px;
+  border-top-width: 0.625rem;
+  border-bottom-width: 10px;
+  border-bottom-width: 0.625rem;
   border-style: solid;
 }
 
-.bx3 {
-  border-left-width: 3px;
-  border-left-width: 0.1875rem;
-  border-right-width: 3px;
-  border-right-width: 0.1875rem;
+.bx10 {
+  border-left-width: 10px;
+  border-left-width: 0.625rem;
+  border-right-width: 10px;
+  border-right-width: 0.625rem;
   border-style: solid;
 }
 
-.bt3 {
-  border-top-width: 3px;
-  border-top-width: 0.1875rem;
+.bt10 {
+  border-top-width: 10px;
+  border-top-width: 0.625rem;
   border-style: solid;
 }
 
-.bl3 {
-  border-left-width: 3px;
-  border-left-width: 0.1875rem;
+.bl10 {
+  border-left-width: 10px;
+  border-left-width: 0.625rem;
   border-style: solid;
 }
 
-.br3 {
-  border-right-width: 3px;
-  border-right-width: 0.1875rem;
+.br10 {
+  border-right-width: 10px;
+  border-right-width: 0.625rem;
   border-style: solid;
 }
 
-.bb3 {
-  border-bottom-width: 3px;
-  border-bottom-width: 0.1875rem;
+.bb10 {
+  border-bottom-width: 10px;
+  border-bottom-width: 0.625rem;
   border-style: solid;
 }
 
@@ -1710,11 +1816,11 @@ SOURCE: https://github.com/pierreburel/sass-rem
 }
 
 .is-grey {
-  color: #dddddd;
+  color: #7f7f7f;
 }
 
 .bg-grey {
-  background-color: #dddddd;
+  background-color: #7f7f7f;
 }
 
 .is-blue {
@@ -1749,11 +1855,11 @@ SOURCE: https://github.com/pierreburel/sass-rem
   background-color: #f0f00f;
 }
 
-.is-purple {
+.is-magenta {
   color: #800080;
 }
 
-.bg-purple {
+.bg-magenta {
   background-color: #800080;
 }
 
@@ -1766,11 +1872,11 @@ SOURCE: https://github.com/pierreburel/sass-rem
 }
 
 .is-warning {
-  color: #ffb344;
+  color: #2b2925;
 }
 
 .bg-warning {
-  background-color: #ffb344;
+  background-color: #2b2925;
 }
 
 .is-success {
@@ -2037,6 +2143,227 @@ SOURCE: https://github.com/pierreburel/sass-rem
   background-color: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
 }
 
+* {
+  box-sizing: border-box;
+  margin: 0;
+  -webkit-overflow-scrolling: touch;
+  padding: 0;
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  /* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+  */
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100vh;
+  padding: 0;
+}
+
+body {
+  color: #000000;
+  font-family: Helvetica, Arial, Verdana, sans-serif;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1;
+  width: 100vw;
+}
+
+hr,
+input,
+button,
+textarea,
+[role=reset],
+[role=submit],
+[role=button] {
+  margin: 0;
+  padding: 0;
+}
+
+ul,
+ol,
+li {
+  list-style-type: none;
+}
+
+ol + ol,
+li + li {
+  margin-top: 12px;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: "";
+  content: none;
+}
+
+a,
+button {
+  cursor: pointer;
+}
+
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+p {
+  white-space: initial;
+}
+
+button,
+[role=reset],
+[role=submit],
+[role=button] {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-size: 1rem;
+  overflow: hidden;
+  text-align: center;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.disabled,
+:disabled,
+:disabled:link,
+:disabled:visited,
+:disabled:hover,
+:disabled:active {
+  box-shadow: inherit;
+  cursor: default;
+  cursor: not-allowed;
+  pointer-events: none;
+  text-shadow: inherit;
+}
+
+/*
+// @NOTE
+// a:hover DOIT venir après a:link et a:visited
+// a:active DOIT venir après un a:hover
+a:not(.is-underline),
+a:link:not(.is-underline),
+a:visited:not(.is-underline),
+a:hover:not(.is-underline),
+a:active:not(.is-underline) {
+  text-decoration: none;
+}
+*/
 /* -------------------------------------------------
 
  NEGATES
@@ -2539,6 +2866,18 @@ a.no-no-underline:visited {
   align-items: flex-end;
 }
 
+.self-start {
+  align-self: flex-start;
+}
+
+.self-end {
+  align-self: flex-end;
+}
+
+.self-center {
+  align-self: center;
+}
+
 .clearfix {
   *zoom: 1;
 }