From 520f5f6c86c020461f3b2a45d68eb30064f43a46 Mon Sep 17 00:00:00 2001
From: Hugo Soucy <hugo.soucy@savoirfairelinux.com>
Date: Thu, 22 Jan 2015 13:47:51 -0500
Subject: [PATCH] =?UTF-8?q?[#64040]=20Ajout=20de=20nouveaux=20sass=20...?=
 =?UTF-8?q?=20G=C3=A9n=C3=A9raux.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/sass/functions/_functions.scss     |  21 +++
 app/assets/sass/global/_color-schemes.scss    |  33 +++++
 app/assets/sass/global/_helpers.scss          | 120 ++++++++++++++++++
 app/assets/sass/global/_print.scss            |  51 ++++++++
 app/assets/sass/mixins/_calc.scss             |  10 ++
 app/assets/sass/mixins/_line-height.scss      |   8 ++
 app/assets/sass/mixins/_media-queries.scss    |  65 ++++++++++
 app/assets/sass/mixins/_position.scss         |  38 ++++++
 app/assets/sass/mixins/_vendor.scss           |   7 +
 .../sass/modules-objects/_togglable-tabs.scss |  27 ++++
 app/assets/sass/modules-simples/_buttons.scss |  14 ++
 app/assets/sass/settings/_variables.scss      |  42 ++++++
 12 files changed, 436 insertions(+)
 create mode 100644 app/assets/sass/functions/_functions.scss
 create mode 100644 app/assets/sass/global/_color-schemes.scss
 create mode 100644 app/assets/sass/global/_helpers.scss
 create mode 100644 app/assets/sass/global/_print.scss
 create mode 100644 app/assets/sass/mixins/_calc.scss
 create mode 100644 app/assets/sass/mixins/_line-height.scss
 create mode 100644 app/assets/sass/mixins/_media-queries.scss
 create mode 100644 app/assets/sass/mixins/_position.scss
 create mode 100644 app/assets/sass/mixins/_vendor.scss
 create mode 100644 app/assets/sass/modules-objects/_togglable-tabs.scss
 create mode 100644 app/assets/sass/modules-simples/_buttons.scss
 create mode 100644 app/assets/sass/settings/_variables.scss

diff --git a/app/assets/sass/functions/_functions.scss b/app/assets/sass/functions/_functions.scss
new file mode 100644
index 0000000..95b5a50
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/app/assets/sass/global/_color-schemes.scss b/app/assets/sass/global/_color-schemes.scss
new file mode 100644
index 0000000..7a5e42b
--- /dev/null
+++ b/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;}
+}
diff --git a/app/assets/sass/global/_helpers.scss b/app/assets/sass/global/_helpers.scss
new file mode 100644
index 0000000..94e13b5
--- /dev/null
+++ b/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 {}
diff --git a/app/assets/sass/global/_print.scss b/app/assets/sass/global/_print.scss
new file mode 100644
index 0000000..a14b08a
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/app/assets/sass/mixins/_calc.scss b/app/assets/sass/mixins/_calc.scss
new file mode 100644
index 0000000..a08c10e
--- /dev/null
+++ b/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});
+}
diff --git a/app/assets/sass/mixins/_line-height.scss b/app/assets/sass/mixins/_line-height.scss
new file mode 100644
index 0000000..557e244
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/app/assets/sass/mixins/_media-queries.scss b/app/assets/sass/mixins/_media-queries.scss
new file mode 100644
index 0000000..e9b3dfa
--- /dev/null
+++ b/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;
+    }
+}
+
+/*  */
\ No newline at end of file
diff --git a/app/assets/sass/mixins/_position.scss b/app/assets/sass/mixins/_position.scss
new file mode 100644
index 0000000..232622a
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/app/assets/sass/mixins/_vendor.scss b/app/assets/sass/mixins/_vendor.scss
new file mode 100644
index 0000000..4638b37
--- /dev/null
+++ b/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;
+}
diff --git a/app/assets/sass/modules-objects/_togglable-tabs.scss b/app/assets/sass/modules-objects/_togglable-tabs.scss
new file mode 100644
index 0000000..61fd929
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/app/assets/sass/modules-simples/_buttons.scss b/app/assets/sass/modules-simples/_buttons.scss
new file mode 100644
index 0000000..3574016
--- /dev/null
+++ b/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;
+}
+
diff --git a/app/assets/sass/settings/_variables.scss b/app/assets/sass/settings/_variables.scss
new file mode 100644
index 0000000..1efe104
--- /dev/null
+++ b/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;