modularisation des dossiers

sass/library/_base.scss

@@ -0,0 +1,195 @@
+/* ----------------------------- */
+/* ==Base (basic styles)         */
+/* ----------------------------- */
+
+/* switching to border-box model for all elements */
+html {
+  box-sizing: border-box;
+}
+
+* {
+  box-sizing: inherit;
+}
+
+ul,
+ol {
+  padding-left: 2em;
+}
+
+img {
+  vertical-align: middle;
+}
+
+/* height auto only for non SVG images */
+img:not([src$=".svg"]) {
+  height: auto;
+}
+
+blockquote,
+figure {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+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 */
+  /* thanks to @guardian, @victorbritopro and @eQRoeil */
+  font-size: calc(1em * 0.625);
+}
+
+body {
+  font-size: $base-font-size;
+  background-color: $base-background;
+  color: $base-color;
+  font-family: $font-stack-common;
+  line-height: $line-height;
+}
+
+a {
+  color: $base-color-link;
+  &:hover, &:focus, &:active {
+    color: $base-color-link-hover;
+  }
+}
+
+/* font-sizing for content */
+p,
+.#{$kna-namespace}p-like,
+ul,
+ol,
+dl,
+blockquote,
+pre,
+td,
+th,
+label,
+textarea,
+caption,
+details,
+figure {
+  margin-top: 0.75em;
+  margin-bottom: 0;
+  line-height: $line-height;
+}
+
+h1, .#{$kna-namespace}h1-like {
+  font-size: $h1-size;
+  font-family: $font-stack-headings;
+}
+
+h2, .#{$kna-namespace}h2-like {
+  font-size: $h2-size;
+  font-family: $font-stack-headings;
+}
+
+h3, .#{$kna-namespace}h3-like {
+  font-size: $h3-size;
+}
+
+h4, .#{$kna-namespace}h4-like {
+  font-size: $h4-size;
+}
+
+h5, .#{$kna-namespace}h5-like {
+  font-size: $h5-size;
+}
+
+h6, .#{$kna-namespace}h6-like {
+  font-size: $h6-size;
+}
+
+/* alternate font-sizing */
+.#{$kna-namespace}smaller {
+  font-size: 0.6em;
+}
+
+.#{$kna-namespace}small {
+  font-size: 0.8em;
+}
+
+.#{$kna-namespace}big {
+  font-size: 1.2em;
+}
+
+.#{$kna-namespace}bigger {
+  font-size: 1.5em;
+}
+
+.#{$kna-namespace}biggest {
+  font-size: 2em;
+}
+
+code,
+pre,
+samp,
+kbd {
+  /* IE fix */
+  white-space: pre-line;
+  white-space: pre-wrap;
+  font-family: $font-stack-monospace;
+  line-height: normal;
+}
+
+em,
+.#{$kna-namespace}italic,
+address,
+cite,
+i,
+var {
+  font-style: italic;
+}
+
+/* avoid top margins on first content element */
+p,
+.#{$kna-namespace}p-like,
+ul,
+ol,
+dl,
+blockquote,
+pre,
+h1,
+.#{$kna-namespace}h1-like,
+h2,
+.#{$kna-namespace}h2-like,
+h3,
+.#{$kna-namespace}h3-like,
+h4,
+.#{$kna-namespace}h4-like,
+h5,
+.#{$kna-namespace}h5-like,
+h6,
+.#{$kna-namespace}h6-like {
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+/* avoid margins on nested elements */
+li p,
+li .#{$kna-namespace}p-like,
+li ul,
+li ol {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* max values */
+img,
+table,
+td,
+blockquote,
+code,
+pre,
+textarea,
+input,
+video,
+svg {
+  max-width: 100%;
+}
+
+/* margin-bottom on tables */
+table {
+  margin-bottom: $medium-value;
+}

sass/library/_forms.scss

@@ -0,0 +1,110 @@
+/* ----------------------------- */
+/* ==Forms                       */
+/* ----------------------------- */
+
+/* thanks to HTML5boilerplate,
+* github.com/nathansmith/formalize and www.sitepen.com
+*/
+
+/* buttons */
+.#{$kna-namespace}btn {
+  display: inline-block;
+}
+
+/* forms items */
+form,
+fieldset {
+  border: none;
+}
+
+input,
+button,
+select,
+label,
+.#{$kna-namespace}btn {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: $base-color;
+}
+
+label {
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+legend {
+  border: 0;
+  white-space: normal;
+}
+
+textarea {
+  min-height: 5em;
+  vertical-align: top;
+  font-family: inherit;
+  font-size: inherit;
+  resize: vertical;
+}
+
+select {
+  -webkit-appearance: menulist-button;
+}
+
+/* if select styling bugs on WebKit */
+/* select { -webkit-appearance: none; } */
+
+/* 'x' appears on right of search input when text is entered. This removes it */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+::-webkit-input-placeholder {
+  color: #777;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #777;
+}
+
+.#{$kna-namespace}btn:focus,
+input[type="button"]:focus,
+button:focus {
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+/* unstyled forms */
+
+button.#{$kna-namespace}unstyled,
+input[type="button"].#{$kna-namespace}unstyled,
+input[type="submit"].#{$kna-namespace}unstyled,
+input[type="reset"].#{$kna-namespace}unstyled {
+  padding: 0;
+  border: none;
+  line-height: 1;
+  text-align: left;
+  background: none;
+  border-radius: 0;
+  box-shadow: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+
+  &:focus {
+    box-shadow: none;
+    outline: none;
+  }
+}

sass/library/_misc.scss

@@ -0,0 +1,48 @@
+/* ----------------------------- */
+/* ==Misc (skip links, hyphens)  */
+/* ----------------------------- */
+
+/* styling skip links */
+.#{$kna-namespace}skip-links {
+  position: absolute;
+
+  & a {
+    position: absolute;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    padding: 0.5em;
+    background: black;
+    color: white;
+    text-decoration: none;
+
+    &:focus {
+      position: static;
+      overflow: visible;
+      clip: auto;
+    }
+  }
+}
+
+// hyphens on tiny screens
+@media (max-width: $tiny) {
+  /* you shall not pass */
+  div,
+  textarea,
+  table,
+  td,
+  th,
+  code,
+  pre,
+  samp {
+    word-wrap: break-word;
+    hyphens: auto;
+  }
+}
+
+// use .no-wrapping to disallow hyphens on small screens
+@media (max-width: $tiny) {
+  .no-wrapping {
+    word-wrap: normal;
+    hyphens: manual;
+  }
+}

sass/library/_print.scss

@@ -0,0 +1,95 @@
+/* ----------------------------- */
+/* ==Print (quick print reset)   */
+/* ----------------------------- */
+
+@media print {
+  * {
+    background: transparent !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  body {
+    width: auto;
+    margin: auto;
+    font-family: serif;
+    font-size: 12pt;
+  }
+
+  p,
+  .#{$kna-namespace}p-like,
+  h1,
+  .#{$kna-namespace}h1-like,
+  h2,
+  .#{$kna-namespace}h2-like,
+  h3,
+  .#{$kna-namespace}h3-like,
+  h4,
+  .#{$kna-namespace}h4-like,
+  h5,
+  .#{$kna-namespace}h5-like,
+  h6,
+  .#{$kna-namespace}h6-like,
+  blockquote,
+  ul,
+  ol {
+    color: #000;
+    margin: auto;
+  }
+
+  .#{$kna-namespace}print {
+    display: block;
+  }
+
+  .#{$kna-namespace}no-print {
+    display: none;
+  }
+
+  /* no orphans, no widows */
+  p,
+  .#{$kna-namespace}p-like,
+  blockquote {
+    orphans: 3;
+    widows: 3;
+  }
+
+  /* no breaks inside these elements */
+  blockquote,
+  ul,
+  ol {
+    page-break-inside: avoid;
+  }
+
+  /* page break before main headers
+  h1,
+  .h1-like {
+    page-break-before: always;
+  }
+  */
+
+  /* no breaks after these elements */
+  h1,
+  .#{$kna-namespace}h1-like,
+  h2,
+  .#{$kna-namespace}h2-like,
+  h3,
+  .#{$kna-namespace}h3-like,
+  caption {
+    page-break-after: avoid;
+  }
+
+  a {
+    color: #000;
+  }
+
+  /* displaying URLs
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+  */
+
+  a[href^="javascript:"]::after,
+  a[href^="#"]::after {
+    content: "";
+  }
+}

sass/library/_styling.scss

@@ -0,0 +1,113 @@
+/* ----------------------------- */
+/* ==Stylings (minor stylings)   */
+/* ----------------------------- */
+
+/* styling elements */
+code, kbd, mark {
+  border-radius: 2px;
+}
+
+kbd {
+  padding: 0 2px;
+  border: 1px solid #999;
+}
+
+code {
+  padding: 2px 4px;
+  background: rgba(0,0,0,0.04);
+  color: #b11;
+}
+
+pre code {
+  padding: 0;
+  background: none;
+  color: inherit;
+  border-radius: 0;
+}
+
+mark {
+  padding:2px 4px;
+}
+
+sup,
+sub {
+  vertical-align: 0;
+}
+
+sup {
+  bottom: 1ex;
+}
+
+sub {
+  top: 0.5ex;
+}
+
+blockquote {
+  position: relative;
+  padding-left: 3em;
+}
+
+blockquote::before {
+  content: "\201C";
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-family: georgia, serif;
+  font-size: 5em;
+  line-height: 0.9;
+  color: rgba(0, 0, 0, .3);
+}
+
+blockquote > footer {
+  margin-top: .75em;
+  font-size: 0.9em;
+  color: rgba(0, 0, 0, .7);
+}
+
+blockquote > footer::before {
+  content: "\2014 \0020";
+}
+
+q {
+  font-style: normal;
+}
+
+q,
+.#{$kna-namespace}q {
+  quotes: "“\00a0" "\00a0”";
+}
+
+q:lang(fr),
+.#{$kna-namespace}q:lang(fr) {
+  quotes: "«\00a0" "\00a0»";
+}
+
+hr {
+  display: block;
+  clear: both;
+  height: 1px;
+  margin: 1em 0 2em;
+  padding: 0;
+  border: 0;
+  color: #ccc;
+  background-color: #ccc;
+}
+
+/* tables */
+table,
+.#{$kna-namespace}table {
+  border: 1px solid #ccc;
+}
+
+caption {
+  padding: $small-value;
+  color: #555;
+  font-style: italic;
+}
+
+td,
+th {
+  padding: 0.3em 0.8em;
+  border: 1px #aaa dotted;
+  text-align: left;
+}

sass/library/_tables.scss

@@ -0,0 +1,28 @@
+/* ----------------------------- */
+/* ==Tables                      */
+/* ----------------------------- */
+
+table,
+.#{$kna-namespace}table {
+  width: 100%;
+  max-width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  vertical-align: top;
+}
+
+.#{$kna-namespace}table {
+  display: table;
+}
+
+#recaptcha_table,
+.#{$kna-namespace}table-auto {
+  table-layout:auto;
+}
+
+td,
+th {
+  vertical-align: top;
+  min-width: $medium-value;
+  cursor: default;
+}