Added newsletter

public/sidebar/unnic/scss/colors.scss

@@ -0,0 +1,45 @@
+/* Background */
+$unnic-color-background-solo: #E8F4F4;
+$unnic-color-background-sky: #F3FFFE;
+$unnic-color-background-grass: #F5F6F6;
+$unnic-color-background-carpet: #F9F9F9;
+$unnic-color-background-snow: #FFFFFF;
+
+/* Neutral */
+$unnic-color-neutral-black: #272B33;
+$unnic-color-neutral-darkest: #3B414D;
+$unnic-color-neutral-dark: #4E5666;
+$unnic-color-neutral-cloudy: #758199;
+$unnic-color-neutral-cleanest: #9CACCC;
+$unnic-color-neutral-clean: #E2E6ED;
+$unnic-color-neutral-soft: #E2E6ED;
+$unnic-color-neutral-lightest: #F4F6F8;
+$unnic-color-neutral-light: #F9F9F9;
+$unnic-color-neutral-snow: #FFFFFF;
+
+/* Feedback colors */
+$unnic-color-feedback-red: #FF4545;
+$unnic-color-feedback-green: #47D66F;
+$unnic-color-feedback-yellow: #FDBA38;
+$unnic-color-feedback-blue: #2856FC;
+$unnic-color-feedback-grey: #ECECEC;
+
+/* Auxiliary colors */
+$unnic-color-aux-blue: #00DED3;
+$unnic-color-aux-purple: #8416DE;
+$unnic-color-aux-orange: #F4691F;
+$unnic-color-aux-lemon: #CCDE0B;
+$unnic-color-aux-pink: #DE16BA;
+
+/* Brand */
+$unnic-color-brand-ilha: #00DED2;
+$unnic-color-brand-ilha-dark: #005E5A;
+$unnic-color-brand-ilha-soft: #009E96;
+$unnic-color-brand-sec-dark: #2F343D;
+$unnic-color-brand-sec-soft: #808080;
+$unnic-color-brand-sec: #D0D0D0;
+
+
+
+
+

public/sidebar/unnic/scss/fonts.scss

@@ -0,0 +1,43 @@
+@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Slabo+13px&display=swap');
+
+// Font family
+$unnic-font-family-primary: 'Slabo 13px';
+$unnic-font-family-secondary: Lato;
+
+// Font weight
+$unnic-font-weight-black: 900;
+$unnic-font-weight-bold: 700;
+$unnic-font-weight-regular: 400;
+$unnic-font-weight-black: 300;
+
+// Font size
+$unnic-font-size-body-sm: 8px;
+$unnic-font-size-body-md: 12px;
+$unnic-font-size-body-lg: 16px;
+
+$unnic-font-size-title-sm: 20px;
+$unnic-font-size-title-md: 24px;
+$unnic-font-size-titley-lg: 32px;
+
+$unnic-font-size-h4: 40px;
+$unnic-font-size-h3: 48px;
+$unnic-font-size-h2: 56px;
+$unnic-font-size-h1: 72px;
+
+// Line height
+$unnic-line-height-small: 4px;
+$unnic-line-height-medium: 8px;
+$unnic-line-height-large: 16px;
+
+
+
+
+
+
+
+
+
+
+
+

public/sidebar/unnic/scss/grid.scss

@@ -0,0 +1,52 @@
+.unnic-grid-xs {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
+    padding: 0 16px;
+}
+
+.unnic-grid-sm {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
+    padding: 0 16px;
+    box-sizing: border-box;
+}
+
+.unnic-grid-md {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/6)*100% - (16px * 5/6)));
+    padding: 0 48px;
+    box-sizing: border-box;
+}
+
+.unnic-grid-lg {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 64px;
+    box-sizing: border-box;
+}
+
+.unnic-grid-xl {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 176px;
+    box-sizing: border-box;
+}
+
+.unnic-grid-giant {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 24px;
+    box-sizing: border-box;
+}
+
+@for $i from 1 to 12 {
+    .unnic-grid-span-#{$i} {
+        grid-column: span #{$i};
+    }
+}

public/sidebar/unnic/scss/spacing.scss

@@ -0,0 +1,73 @@
+// Icon size
+
+$unnic-icon-size-xl: 40px;
+$unnic-icon-size-lg: 32px;
+$unnic-icon-size-md: 24px;
+$unnic-icon-size-sm: 16px;
+$unnic-icon-size-xs: 12px;
+
+// Icon size
+$unnic-avatar-size-lg: 120px;
+$unnic-avatar-size-md: 104px;
+$unnic-avatar-size-sm: 72px;
+$unnic-avatar-size-xs: 40px;
+$unnic-avatar-size-nano: 20px;
+
+// Border radius
+$unnic-border-radius-none: 0px;
+$unnic-border-radius-sm: 4px;
+$unnic-border-radius-md: 8px;
+$unnic-border-radius-lg: 16px;
+$unnic-border-radius-pill: 600px;
+
+// Border width
+$unnic-border-width-none: 0px;
+$unnic-border-width-thinner: 1px;
+$unnic-border-width-thin: 2px;
+$unnic-border-width-thick: 4px;
+
+// Shadow levels
+$unnic-shadow-level-near: 0px 4px 8px rgba(0, 0, 0, .12);
+$unnic-shadow-level-separated: 0px 8px 16px rgba(0, 0, 0, .08);
+$unnic-shadow-level-far: 0px 12px 32px rgba(0, 0, 0, .08);
+$unnic-shadow-level-far: 0px 20px 40px rgba(0, 0, 0, .06);
+
+// Opacity levels
+$unnic-opacity-level-darkest: 0.8;
+$unnic-opacity-level-dark: 0.64;
+$unnic-opacity-level-clarifying: 0.48;
+$unnic-opacity-level-clear: 0.32;
+$unnic-opacity-level-light: 0.16;
+
+// Spacing
+$unnic-inset-nano: 8px;
+$unnic-inset-xs: 12px;
+$unnic-inset-sm: 16px;
+$unnic-inset-md: 24px;
+$unnic-inset-lg: 32px;
+
+$unnic-squish-nano: 8px 16px;
+$unnic-squish-xs: 12px 16px;
+$unnic-squish-sm: 12px 24px;
+$unnic-squish-md: 16px 24px;
+$unnic-squish-lg: 24px 32px;
+
+$unnic-inline-nano: 4px;
+$unnic-inline-xs: 8px;
+$unnic-inline-sm: 16px;
+$unnic-inline-md: 24px;
+$unnic-inline-lg: 32px;
+$unnic-inline-xl: 40px;
+$unnic-inline-giant: 48px;
+$unnic-inline-xgiant: 64px;
+$unnic-inline-awesome: 80px;
+
+$unnic-spacing-stack-nano: 4px;
+$unnic-spacing-stack-xs: 8px;
+$unnic-spacing-stack-sm: 16px;
+$unnic-spacing-stack-md: 24px;
+$unnic-spacing-stack-lg: 32px;
+$unnic-spacing-stack-xl: 40px;
+$unnic-spacing-stack-giant: 48px;
+$unnic-spacing-stack-xgiant: 64px;
+$unnic-spacing-stack-awesome: 80px;

public/sidebar/unnic/scss/unnic.scss

@@ -0,0 +1,10 @@
+@import './colors.scss';
+@import './fonts.scss';
+@import './spacing.scss';
+@import './grid.scss';
+
+.unnic {
+    &--clickable {
+        cursor: pointer;
+    }
+}