organisation css

assets/css/abstracts/_mixins.scss

@@ -0,0 +1,32 @@
+@mixin icon($size){
+    width: $size;
+    height: $size;
+
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+
+@mixin chart-edit($size){
+    width: $size;
+    height: $size;
+
+    svg {
+        width: 100%;
+        height: 100%;
+
+        circle{
+            fill: #cfcfcf;
+        }
+
+        .filled{
+            fill: lightgreen;
+        }
+
+        .verified{
+            fill: green;
+        }
+    }
+}

assets/css/abstracts/_var.scss

@@ -0,0 +1,84 @@
+:root {
+
+   
+    --font-title: 'Borna', Arial, sans-serif;
+    --font: 'Nunito', Arial, sans-serif;
+
+    --fs-small: 11px;
+    --fs-normal: 14px;
+
+    font-size: 14px;
+    --unit: 24px;
+
+    --padding-body: 32px;
+    --padding-inner: 16px;
+
+    --radius-small: 3px;
+    --radius-btn: 6px;
+
+
+
+
+    --header-h: 60px;
+    --header-z: 9000;
+
+    --white: white;
+    --color-bg: white;
+
+
+    --color-violet:          #6e62a4;
+    --color-violet-medium:   #9b92c4;
+    --color-violet-light:    #e1dfec;
+
+    --color-yellow:          #c4a233;
+    --color-yellow-medium:   #e0c46a;
+    --color-yellow-light:    #f5f0d5;
+    --color-map:        #ad8422;
+
+    --color-blue:          #0f70c0;
+    --color-blue-medium:   #5aa0da;
+    --color-blue-light:    #d1e5f7;
+
+    --color-orange:          #f17f2d;
+    --color-orange-medium:   #f3a066;
+    --color-orange-light:    #f3e7e0;
+
+    --color-green:          #007953;
+    --color-green-medium:   #a1ccbe;;
+    --color-green-light:    #d5ebe4;
+    --color-green-black:    #016042;
+
+    --color-txt:       rgb(41, 41, 41);
+    --color-txt-light: #a5a9a9;
+    --color-light:      #DCDDDD;
+    --color-x-light:    #eaebeb;
+
+
+    --color: var(--color-green);
+    --color-medium: var(--color-green-medium);
+    --color-light: var(--color-green-light);
+
+ 
+
+    
+}
+
+
+[data-type="livret"]{
+    --color: var(--color-violet);
+    --color-medium: var(--color-violet-medium);
+    --color-light: var(--color-violet-light);
+}
+
+
+[data-type="base-connaissance"]{
+    --color: var(--color-yellow);
+    --color-medium: var(--color-yellow-medium);
+    --color-light: var(--color-yellow-light);
+}
+
+[data-type="atelier"]{
+    --color: var(--color-orange);
+    --color-medium: var(--color-orange-medium);
+    --color-light: var(--color-orange-light);
+}