[#64040] Ajout de nouveaux sass ... Généraux.

app/assets/sass/functions/_functions.scss

@@ -0,0 +1,21 @@
+//----------------------------------*\
+// FUNCTIONS
+//----------------------------------*/
+
+// Srtips the units from a value. e.g. 12px -> 12
+@function strip-units($val) {
+  @return ($val / ($val * 0 + 1));
+}
+
+// Convert pixels to ems
+// eg. for a relational value of 12px write em(12) when the parent is 16px
+// if the parent is another value say 24px write em(12, 24)
+@function em($pxval, $base: 16px) {
+  @if not unitless($pxval) {
+      $pxval: strip-units($pxval);
+  }
+  @if not unitless($base) {
+      $base: strip-units($base);
+  }
+  @return ($pxval / $base) * 1em;
+}

app/assets/sass/global/_color-schemes.scss

@@ -0,0 +1,33 @@
+//----------------------------------*\
+// COLOR SCHEMES
+//----------------------------------*/
+
+// Light Scheme
+//----------------------------------*/
+.color-scheme--light {
+
+    %colorLink {
+        color:$_color_light_epsilon;
+
+        &:hover {color:orange;}
+    }
+
+    %colorBorderThin {border-color:$_color_light_gamma;}
+
+    %colorBkgTopbarPanel {background:$_color_light_gamma;}
+}
+
+// Dark Scheme
+//----------------------------------*/
+.color-scheme--dark {
+
+    %colorLink {
+        color:$_color_dark_epsilon;
+
+        &:hover {color:white;}
+    }
+
+    %colorBorderThin {border-color:$_color_dark_gamma;}
+
+    %colorBkgTopbarPanel {background:$_color_dark_gamma;}
+}

app/assets/sass/global/_helpers.scss

@@ -0,0 +1,120 @@
+//----------------------------------*\
+// BOILERPLATE LIKE HELPERS
+//----------------------------------*/
+
+%ir,
+.ir {
+    background-color: transparent;
+    border: 0;
+    overflow: hidden;
+    text-indent: -9999px;
+    &:before {
+        content: "";
+        display: block;
+        width: 0;
+        height: 150%
+    }
+}
+
+%hidden,
+.hidden {
+    display: none !important;
+    visibility: hidden;
+}
+
+%visuallyhidden,
+.visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+
+	&.focusable:active,
+	&.focusable:focus {
+		clip: auto;
+		height: auto;
+		margin: 0;
+		overflow: visible;
+		position: static;
+		width: auto;
+	}
+
+}
+
+%clearfix,
+.clearfix {
+    *zoom: 1;
+    &:before,
+    &:after {
+        display: table;
+        content: "";
+        line-height: 0;
+    }
+
+    &:after {
+        clear: both;
+    }
+
+}
+
+%invisible,
+.invisible {
+    visibility: hidden;
+}
+
+%hiddenfocus,
+.hiddenfocus {
+    @extend %visuallyhidden;
+    &:active,
+    &:focus {
+        clip: auto;
+        height: auto;
+        margin: 0;
+        overflow: visible;
+        position: static;
+        width: auto;
+    }
+
+}
+
+// Add media queries data for detection
+body:after {
+    display:none;
+    font-size:$_base_font_size + 0px;
+    line-height:$_base_line_height;
+}
+
+@include xsmall-screen {
+    body:after {content:'css @media width => x-small screen (min #{$_screen_xsmall}px)';}
+}
+
+@include small-screen {
+    body:after {content:'css @media width => small screen (min #{$_screen_small}px)';}
+}
+
+
+@include medium-screen {
+    body:after {content:'css @media width => medium screen (min #{$_screen_medium}px)';}
+}
+
+@include large-screen {
+    body:after {content:'css @media width => large screen (min #{$_screen_large}px)';}
+}
+
+@include xlarge-screen {
+    body:after {content:'css @media width => x-large screen (min #{$_screen_xlarge}px +)';}
+}
+
+//----------------------------------*\
+// JAVASCRIPT CLASSES
+//----------------------------------*/
+
+.js-is--hidden {display:none;}
+.js-is--visible {display:block;}
+//.js-is--current {}
+//.js-is--open {}
+//.js-is--close {}

app/assets/sass/global/_print.scss

@@ -0,0 +1,51 @@
+@include print {
+  * {
+    background: transparent !important;
+    color: #000 !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+  abbr[title]:after {
+    content: " (" attr(title) ")";
+  }
+  .ir a:after,
+   a[href^="javascript:"]:after,
+   a[href^="#"]:after {
+    content: "";
+  }
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+  thead {
+    display: table-header-group;
+  }
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+  img {
+    max-width: 100% !important;
+  }
+  @page {
+    margin: 0.5cm;
+  }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}

app/assets/sass/mixins/_calc.scss

@@ -0,0 +1,10 @@
+//----------------------------------*\
+// CALC
+//----------------------------------*/
+
+// A mixin for vendor-prefixing the CSS3 calc function. It accepts a property and a value.
+
+@mixin calc($property, $value) {
+    #{$property}: -webkit-calc(#{$value});
+    #{$property}:         calc(#{$value});
+}

app/assets/sass/mixins/_line-height.scss

@@ -0,0 +1,8 @@
+//----------------------------------*\
+// LINE HEIGHT
+//----------------------------------*/
+
+// Sets the line-height to a multiple of $base-line-height that's not smaller than $font-size
+@mixin line-height($font-size, $base-line-height) {
+    line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
+}

app/assets/sass/mixins/_media-queries.scss

@@ -0,0 +1,65 @@
+//----------------------------------*\
+// MEDIA QUERIES
+//----------------------------------*/
+
+@mixin xsmall-screen {
+    @media (min-width: #{em($_screen_xsmall)}) and (max-width: #{em($_screen_small - 1)}) {
+        @content;
+    }
+}
+
+@mixin small-screen {
+    @media (min-width: #{em($_screen_small)}) and (max-width: #{em($_screen_medium - 1)}) {
+        @content;
+    }
+}
+
+@mixin medium-screen {
+    @media (min-width: #{em($_screen_medium)}) and (max-width: #{em($_screen_large - 1)}) {
+        @content;
+    }
+}
+
+@mixin medium-and-up-screen {
+    @media (min-width: #{em($_screen_medium)}) {
+        @content;
+    }
+}
+
+@mixin large-screen {
+    @media (min-width: #{em($_screen_large)}) and (max-width: #{em($_screen_xlarge - 1)}) {
+        @content;
+    }
+}
+
+@mixin large-xlarge-screen {
+    @media (min-width: #{em($_screen_large)}) {
+        @content;
+    }
+}
+
+@mixin xlarge-screen {
+    @media (min-width: #{em($_screen_xlarge)}) {
+        @content;
+    }
+}
+
+@mixin retina {
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (min--moz-device-pixel-ratio: 2),
+    only screen and (-o-min-device-pixel-ratio: 2/1),
+    only screen and (min-device-pixel-ratio: 2),
+    only screen and (min-resolution: 192dpi),
+    only screen and (min-resolution: 2dppx) {
+        @content;
+    }
+}
+
+@mixin print {
+    @media print {
+        @content;
+    }
+}
+
+/*  */

app/assets/sass/mixins/_position.scss

@@ -0,0 +1,38 @@
+@mixin position ($position: relative, $coordinates: 0 0 0 0) {
+    @if type-of($position) == list {
+        $coordinates:$position;
+        $position:relative;
+    }
+
+    $top:nth($coordinates, 1);
+    $right:nth($coordinates, 2);
+    $bottom:nth($coordinates, 3);
+    $left:nth($coordinates, 4);
+
+    position: $position;
+
+    @if $top == auto {
+        top:$top;
+    }
+    @else if not(unitless($top)) {
+        top:$top;
+    }
+    @if $right == auto {
+        right:$right;
+    }
+    @else if not(unitless($right)) {
+        right:$right;
+    }
+    @if $bottom == auto {
+        bottom:$bottom;
+    }
+    @else if not(unitless($bottom)) {
+        bottom:$bottom;
+    }
+    @if $left == auto {
+        left:$left;
+    }
+    @else if not(unitless($left)) {
+        left:$left;
+    }
+}

app/assets/sass/mixins/_vendor.scss

@@ -0,0 +1,7 @@
+@mixin vendor ($property, $value...) {
+    -webkit-#{$property}:$value;
+    -moz-#{$property}:$value;
+    -ms-#{$property}:$value;
+    -o-#{$property}:$value;
+    #{$property}:$value;
+}

app/assets/sass/modules-objects/_togglable-tabs.scss

@@ -0,0 +1,27 @@
+//----------------------------------*\
+// TOGGLABLE TABS
+//----------------------------------*/
+/*  */
+.tabpanel {
+    .tablist__item {
+        display:inline-block;
+    }
+    
+    .tabpanel__tab {
+        color:white;
+        border-bottom:5px solid white;
+        width:50%;
+    }
+}
+
+.tab-content {
+    > .tab-pane {
+        display:none;
+        visibility:hidden;
+    }
+
+    > .active {
+        display:block;
+        visibility:visible;
+    }
+}

app/assets/sass/modules-simples/_buttons.scss

@@ -0,0 +1,14 @@
+//----------------------------------*\
+// BUTTON MODULE
+//----------------------------------*/
+%button-reset {
+    background:transparent;    
+    border:0;
+    display:inline-block;
+    padding:0;
+}
+
+.button {
+    //@extend %button-reset;
+}
+

app/assets/sass/settings/_variables.scss

@@ -0,0 +1,42 @@
+//----------------------------------*\
+// VARIABLES
+//----------------------------------*/
+
+// Image Path
+//----------------------------------*/
+$_img_path: "../images/" !default;
+
+// Color Schemes
+//----------------------------------*/
+// Light scheme
+$_color_light_alpha: '' !default;
+$_color_light_beta: '' !default;
+$_color_light_gamma: '' !default;
+$_color_light_delta: '' !default;
+$_color_light_epsilon: red !default;
+
+// Dark scheme
+$_color_dark_alpha: #353D48 !default;
+$_color_dark_beta: #49515C !default;
+$_color_dark_gamma: #23282E !default;
+$_color_dark_delta: #2e353d !default;
+$_color_dark_epsilon: #aeb5bf !default;
+
+// Typography
+$_base_font_size: 14 !default;
+$_base_line_height: 18 !default;
+
+// Fonts Family
+//----------------------------------*/
+$_font_family_alpha: sans-serif !default;
+$_font_family_beta: sans-serif !default;
+$_font_family_gamma: serif !default;
+
+
+// Media Queries Breakpoints
+//----------------------------------*/
+$_screen_xsmall: 320 !default;
+$_screen_small: 480 !default;
+$_screen_medium: 768 !default;
+$_screen_large: 992 !default;
+$_screen_xlarge: 1200 !default;