Initial commit

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_base.scss

@@ -0,0 +1,68 @@
+@font-face {
+	font-family: "Manometer";
+	src: url("/fonts/manometer.woff2") format("woff2"),
+		 url("/fonts/manometer.woff") format("woff");
+}
+
+@font-face {
+	font-family: "Bitter";
+    font-style: normal;
+	src: url("/fonts/Bitter-Regular.woff") format("woff");
+}
+
+$basefont: Bitter;
+$brandfont: Manometer;
+
+
+body {
+    font-family: $basefont;
+    margin: 0;
+    padding: 0;
+}
+
+.brand {
+    font-family: $brandfont;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: Manometer;
+    font-weight: normal;
+}
+
+h1 {
+    font-size: 2.5em;
+}
+
+h2 {
+    font-size: 1.3em;
+}
+
+h3 {
+    font-size: 1em;
+}
+
+h4 {
+    font-size: 0.8em;
+}
+
+p {
+    font-size: 1em;
+}
+
+#content {
+    margin-top: 3em;
+}
+
+.container {
+    margin: auto;
+    max-width: 1000px;
+}
+
+.cap {
+    text-transform: uppercase;
+}
+
+a {
+    text-decoration: none;
+    color: $brandblue;
+}

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_breakpoints.scss

@@ -0,0 +1,3 @@
+
+$breakpoint-prone: 600px !default;
+$breakpoint-tablet: 992px !default;

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_bubbles.scss

@@ -0,0 +1,18 @@
+
+$bubbleshape: '<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 757.18 757.18"><path d="M755.59,378.59c0-1.81,0-3.62,0-5.43,0-14.52-.25-29-.85-43.23-3.4-94.25-19.29-182.2-84.5-243-60.77-65.09-148.54-81-242.62-84.44-14.4-.61-29-.86-43.62-.86H373.16c-14.65,0-29.21.25-43.61.86C235.47,5.87,147.69,21.79,86.92,86.88,21.71,147.73,5.83,235.68,2.42,329.93c-.59,14.28-.84,28.71-.84,43.23,0,1.81,0,3.62,0,5.43s0,3.61,0,5.42c0,14.53.25,29,.84,43.23,3.41,94.25,19.29,182.21,84.5,243.06,60.77,65.08,148.55,81,242.63,84.44,14.4.6,29,.86,43.61.86H384c14.66,0,29.22-.26,43.62-.86,94.08-3.44,181.85-19.36,242.62-84.44,65.21-60.85,81.1-148.81,84.5-243.06.6-14.27.85-28.7.85-43.23C755.6,382.2,755.59,380.4,755.59,378.59Z"/></svg>';
+
+.bg-bubble {
+    mask-image: url("data:image/svg+xml;charset=utf-8,#{$bubbleshape}");
+}
+
+.icon-bubble {
+    display: flex;
+    text-align: center;
+
+    img {
+        justify-content: center;
+        align-items: center;
+        margin: auto;
+        width: 65%;
+    }
+}

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_colors.scss

@@ -0,0 +1,111 @@
+$brandblue: #243887 !default;
+$green: #6cc11f !default;
+$orange: #ff5300 !default;
+$yellow: #ffdd00 !default;
+$red: #ff1300 !default;
+$lightblue: #00beff !default;
+$blue: #907eff !default;
+$white: #ffffff !default;
+
+/* Defaults parameters */
+
+$primarycolor: $brandblue !default;
+$secondarycolor: $green !default;
+$warningcolor: $red !default;
+$backgroundcolor: $white !default;
+$reversecolor: $white !default;
+
+/* TEXT COLORS */
+.primary {
+    color: $primarycolor;
+}
+
+.secondary {
+    color: $secondarycolor;
+}
+
+.warning {
+    color: $warningcolor;
+}
+
+.reverse {
+    color: $reversecolor;
+}
+
+.brandblue {
+    color: $brandblue;
+}
+
+.green {
+    color: $green;
+}
+
+.orange {
+    color: $orange;
+}
+
+.yellow {
+    color: $yellow;
+}
+
+.red {
+    color: $red;
+}
+
+.lightblue {
+    color: $lightblue;
+}
+
+.blue {
+    color: $blue;
+}
+
+.white {
+    color: $white;
+}
+
+/* BACKGROUNDS */
+
+.bg-primary {
+    background-color: $primarycolor;
+}
+
+.bg-secondary {
+    background-color: $secondarycolor;
+}
+
+.bg-warning {
+    background-color: $warningcolor;
+}
+
+.bg-brandblue {
+    background-color: $brandblue;
+}
+
+.bg-green {
+    background-color: $green;
+}
+
+.bg-orange {
+    background-color: $orange;
+}
+
+.bg-yellow {
+    background-color: $yellow;
+}
+
+.bg-red {
+    background-color: $red;
+}
+
+.bg-lightblue {
+    background-color: $lightblue;
+}
+
+.bg-blue {
+    background-color: $blue;
+}
+
+.bg-white {
+    background-color: $white;
+}

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_flexbox.scss

@@ -0,0 +1,23 @@
+.flex-row {
+    display: flex;
+}
+
+.flex-1 {
+    flex: 1;
+}
+
+.wrap {
+    flex-wrap: wrap;
+}
+
+.j-center {
+    justify-content: center;
+}
+
+.ai-center {
+    align-items: center;
+}
+
+.direction-row-reverse {
+    flex-direction: row-reverse;
+}

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_helpers.scss

@@ -0,0 +1,77 @@
+/* WIDTH */ 
+
+$widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1024);
+
+@each $width in $widthvalues {
+    .w-#{$width} {
+        width: #{$width}px;
+    }
+
+    .max-w-#{$width} {
+        max-width: #{$width}px;
+    }
+
+    .min-w-#{$width} {
+        min-width: #{$width}px;
+    }
+
+    .h-#{$width} {
+        height: #{$width}px;
+    }
+
+    .max-h-#{$width} {
+        max-height: #{$width}px;
+    }
+
+    .min-h-#{$width} {
+        min-height: #{$width}px;
+    }
+}
+
+
+.w-full {
+    width: 100% !important;
+}
+
+/* POSITIONING */
+
+.ta-r {
+    text-align: right;
+}
+.ta-l {
+    text-align: left;
+}
+.ta-c {
+    text-align: center;
+}
+.ta-j {
+    text-align: justify;
+}
+
+/* SPACINGS */ 
+.m-auto {
+    margin: auto;
+}
+
+$spaceamounts: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 200, 300);
+$sides: (top, bottom, left, right);
+
+@each $space in $spaceamounts {
+
+    .m-#{$space} {
+        margin: #{$space}px !important;
+    }
+    .p-#{$space} {
+        padding: #{$space}px !important;
+    }
+
+    @each $side in $sides {
+        .m-#{str-slice($side, 0, 1)}-#{$space} {
+            margin-#{$side}: #{$space}px !important;
+        }
+
+        .p-#{str-slice($side, 0, 1)}-#{$space} {
+            padding-#{$side}: #{$space}px !important;
+        }
+    }
+}

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_nav.scss

@@ -0,0 +1,28 @@
+nav {
+    z-index: 100;
+    height: 3em;
+    display: flex;
+    justify-content: flex-between;
+    align-items: center;
+    position: fixed; /* Set the navbar to fixed position */
+    top: 0; /* Position the navbar at the top of the page */
+    width: 100%;
+
+    /* Menus */
+    ul {
+        justify-content: flex-evenly;
+        display: flex;
+
+        li {
+            flex: 1;
+            display: inline;
+            text-align: center;
+            list-style: none;
+
+            a {
+                color: inherit;
+                text-decoration: none;
+            }
+        }
+    }
+}

themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/styles.scss

@@ -0,0 +1 @@
+@import 'colors', 'breakpoints', 'base', 'helpers', 'nav', 'flexbox', 'bubbles'