@net7/components 3.0.2-rc.2

package/src/lib/styles/generic/_variables.scss

@@ -0,0 +1,385 @@
+//
+// VARIABLES
+//
+// Definition of all variables used by the components library
+//
+
+// ------------------------------------ //
+// #SPACING-UNIT
+// ------------------------------------ //
+$space: 8px;
+
+
+// ------------------------------------ //
+// #LAYOUT
+// ------------------------------------ //
+$page-max-width: 1350px;
+
+
+// ------------------------------------ //
+// #GRIDS
+// ------------------------------------ //
+$grid-gutter-h: $space*3;
+$grid-gutter-v: $space*2;
+
+
+// ------------------------------------ //
+// #FONTS
+// ------------------------------------ //
+@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i');
+
+
+// ------------------------------------ //
+// TYPOGRAPHY
+// ------------------------------------ //
+$font-family-main: 'Lato', sans-serif;
+$font-family-headings: 'Lato', sans-serif;
+
+$font-size-xxxl: 38px; // 2.875rem; // 46px
+$font-size-xxl: 30px; // 1.85rem; // 40px
+$font-size-xl: 26px; // 1.425rem; // 26px
+$font-size-l: 20px; // 1.25rem; // 20px
+$font-size-m: 16px; // 1rem; // 16px
+$font-size-s: 14px; // 0.875rem; // 14px
+$font-size-xs: 12px; // 0.75rem; // 12px
+
+// Font weight
+$font-weight-normal: 400;
+$font-weight-bold: 700;
+
+
+// ------------------------------------ //
+// COLORS
+// ------------------------------------ //
+// Text Colors
+$color-text: $color-gray-05;
+$color-text-inverse: $color-gray-00;
+$color-text-light: $color-gray-04;
+$color-text-link: $color-main;
+$color-text-link-hover: $color-text-hover;
+$color-text-link-visited: $color-text-hover;
+$color-text-form-placeholder: $color-gray-04;
+
+// Borders
+$color-border-light: $color-gray-02;
+$color-border-normal: $color-gray-03;
+
+// Backgrounds
+$color-background-base: $color-gray-00;
+$color-background-light: $color-gray-01;
+$color-background-medium: $color-gray-02;
+$color-background-dark: $color-gray-03;
+
+
+// ------------------------------------ //
+// #MEDIA-QUERIES-BREAKPOINT
+// ------------------------------------ //
+$breakpoint-desktop-wide: 1180px;
+$breakpoint-laptop: 960px;
+$breakpoint-ipad-portrait: 768px;
+$breakpoint-mobile: 650px;
+$breakpoint-smartphone-landscape: 480px;
+$breakpoint-smartphone-portrait: 400px;
+
+/* Inner title brealpoints */
+$breakpoint-inner-title-medium: $breakpoint-desktop-wide - 1;
+$breakpoint-inner-title-small: $breakpoint-ipad-portrait - 1;
+
+
+// ------------------------------------ //
+// #BORDER-RADIUS
+// ------------------------------------ //
+$border-radius: 3px;
+$border-radius-hard: 8px;
+
+
+// ------------------------------------ //
+// #BUTTONS
+// ------------------------------------ //
+$button-border-width: 1px;
+$button-border-radius: $border-radius;
+$button-small-height: 24px;
+$button-normal-height: 30px;
+$button-large-height: 50px;
+
+// Normal button
+$color-button-text: $color-text-light;
+$color-button-text-hover: $color-text-link;
+$color-button-text-disabled: rgba($color-text, .4);
+
+$color-button-bg: $color-gray-02;
+$color-button-bg-hover: $color-gray-01;
+$color-button-bg-disabled: $color-gray-01;
+
+$color-button-border: $color-border-normal;
+$color-button-border-hover: $color-border-normal;
+
+// Call to action button
+$color-button-cta-text: $color-text-inverse;
+$color-button-cta-text-hover: $color-text-inverse;
+$color-button-cta-text-disabled: rgba($color-text-inverse, .4);
+
+$color-button-cta-bg: $color-main;
+$color-button-cta-bg-hover: $color-text-hover;
+$color-button-cta-bg-active: $color-text-hover;
+$color-button-cta-bg-disabled: rgba($color-main, .4);
+
+$color-button-cta-border: $color-main; // Change this if you want a darker button border.
+
+// Light button (no background or border, only text)
+$color-button-light-text: $color-text-link;
+$color-button-light-text-hover: $color-text-link-hover;
+$color-button-light-text-disabled: $color-text-light;
+$color-button-light-text-active: $color-text-link-hover;
+
+
+// ------------------------------------ //
+// #FORMS
+// ------------------------------------ //
+$form-input-height: 38px;
+$form-input-small-height: 26px;
+$form-border-radius: $border-radius;
+$form-border-size: 1px;
+
+
+// ------------------------------------ //
+// #TRANSITIONS
+// ------------------------------------ //
+$transition-durations: 0.2s;
+
+
+// ------------------------------------ //
+// #HEADER
+// ------------------------------------ //
+$header-height: 80px;
+$header-height-mobile: 60px;
+$header-bg-color: $color-background-base;
+$header-logo-height: $header-height - ($space*2);
+$header-logo-height-mobile: $header-height-mobile - ($space*2);
+$header-user-thumb-size: 40px;
+$header-user-thumb-size-mobile: 28px;
+$header-search-input-height: 36px;
+$header-search-input-height-mobile: 28px;
+$header-breakpoint-mobile: 1180px;
+$header-breakpoint-mobile-small: 600px;
+
+
+// ------------------------------------ //
+// #LOADER
+// ------------------------------------ //
+$loader-size: 70px;
+$loader-thickness: 5px;
+$loader-color-front: $color-main;
+$loader-color-back: rgba($color-main, .3);
+
+
+// ------------------------------------ //
+// #TABLE
+// ------------------------------------ //
+$table-border-color: $color-border-normal;
+$table-border-size: 2px;
+/* Header */
+$table-header-font-size: $font-size-m;
+$table-header-text-color: $color-text;
+$table-header-bg: $color-background-medium;
+/* Contents */
+$table-font-size: $font-size-s;
+$table-text-color: $color-text;
+$table-bg-odd: $color-background-base;
+$table-bg-even: $color-background-medium;
+/* Footer */
+$table-footer-font-size: $font-size-s;
+$table-footer-text-color: $color-text-light;
+$table-footer-bg: $color-background-medium;
+
+
+// ------------------------------------ //
+// #BREADCRUMBS
+// ------------------------------------ //
+$breadcrumbs-background: $color-background-light;
+$breadcrumbs-arrow-color: $color-text-light;
+$breadcrumbs-current-color: $color-text;
+$breadcrumbs-arrow: '\e90a';
+$breadcrumbs-arrow-mobile: '\e908';
+
+
+// ------------------------------------ //
+// #PAGINATION
+// ------------------------------------ //
+$pagination-item-width: 40px;
+$pagination-item-height: 40px;
+$pagination-border: 1px solid $color-border-normal;
+$pagination-background: $color-background-base;
+$pagination-border-current: 0;
+$pagination-background-current: $color-background-dark;
+$pagination-radius: $border-radius;
+$pagination-color: $color-text;
+$pagination-color-hover: $color-text-link;
+$pagination-color-disabled: $color-text-light;
+$pagination-color-current: $color-text-inverse;
+
+
+// ------------------------------------ //
+// #ALERT
+// ------------------------------------ //
+$alert-background: $color-background-medium;
+$alert-background-success: $color-success;
+$alert-background-warning: $color-warning;
+$alert-background-error: $color-error;
+$alert-color-text: $color-text;
+$alert-color-text-success: $color-text-inverse;
+$alert-color-text-warning: $color-text-inverse;
+$alert-color-text-error: $color-text-inverse;
+
+
+// ------------------------------------ //
+// #ITEM-PREVIEW
+// ------------------------------------ //
+$item-preview-image-width: 60px;
+$item-preview-image-height: $item-preview-image-width;
+$item-preview-vertical-image-height: 180px;
+$item-preview-height: 250px;
+
+
+// ------------------------------------ //
+// #HERO
+// ------------------------------------ //
+$hero-height: 500px;
+$hero-content-width: 1140px;
+$hero-image-text-width: 300px;
+$hero-background-color: $color-gray-05;
+
+
+// ------------------------------------ //
+// #WIZARD
+// ------------------------------------ //
+$wizard-height: 40px;
+$wizard-number-circle-margin: 5px;
+$wizard-past-bg-color: $color-main;
+$wizard-past-number-bg-color: rgba($color-background-base, .2);
+$wizard-past-text-color: $color-text-inverse;
+$wizard-present-bg-color: $color-second;
+$wizard-present-number-bg-color: rgba($color-background-base, .2);
+$wizard-present-text-color: $color-text-inverse;
+$wizard-future-bg-color: $color-background-medium;
+$wizard-future-number-bg-color: rgba($color-background-dark, .4);
+$wizard-future-text-color: $color-text;
+$wizard-number-size: $font-size-s;
+$wizard-text-size: $font-size-s;
+
+
+// ------------------------------------ //
+// #TREE
+// ------------------------------------ //
+$tree-image-size:28px;
+$tree-indent: $space;
+
+
+// ------------------------------------ //
+// #SIDEBAR-HEADER
+// ------------------------------------ //
+$sidebar-header-height: 44px;
+$sidebar-header-background-color: $color-text;
+$sidebar-header-text-color: $color-text-inverse;
+$sidebar-left-background-color: $sidebar-header-background-color;
+$sidebar-left-text-color: $sidebar-header-text-color;
+$sidebar-right-background-color: $color-text-link;
+$sidebar-right-text-color: $color-text-inverse;
+
+
+// ------------------------------------ //
+// #TOAST
+// ------------------------------------ //
+$toast-background-color: $color-background-medium;
+$toast-border-size: 1px;
+$toast-border-color: $color-border-normal;
+$toast-title-color: $color-text;
+$toast-text-color: $color-text;
+$toast-max-width: 300px;
+
+
+// ------------------------------------ //
+// #SIGNUP
+// ------------------------------------ //
+$signup-max-width: 400px;
+$signup-input-background: $color-gray-01;
+$signup-error-color: $color-error;
+
+
+// ------------------------------------ //
+// #ADVANCED-AUTOCOMPLETE
+// ------------------------------------ //
+$advanced-autocomplete-results-max-height: 300px;
+$advanced-autocomplete-group-title-width: 180px;
+$advanced-autocomplete-empty-height: 180px;
+$advanced-autocomplete-action-bar-shadow: 0 -5px 15px -5px rgba(0, 0, 0, 0.3);
+
+
+// ------------------------------------ //
+// #FACET-HEADER
+// ------------------------------------ //
+$facet-header-text-color: $color-text-inverse;
+$facet-header-background: $color-gray-05;
+$facet-header-icon-background: $color-second;
+$facet-header-height: 30px;
+
+
+// ------------------------------------ //
+// #FACET
+// ------------------------------------ //
+$facet-inner-padding: $space;
+$facet-links-max-height: 200px;
+
+
+// ------------------------------------ //
+// #INNER-TITLE
+// ------------------------------------ //
+$inner-title-filters-height: $button-normal-height;
+$inner-title-image-size: 60px;
+
+
+// ------------------------------------ //
+// #IMAGE-VIEWER
+// ------------------------------------ //
+$image-viewer-height: 400px;
+$image-viewer-thumb-height: 110px;
+$image-viewer-thumb-width: 110px;
+$image-viewer-control-height: 40px;
+$image-viewer-control-width: 40px;
+$image-viewer-control-icon-size: 24px;
+$image-viewer-background-color: $color-gray-05;
+$image-viewer-thumb-active-border-color: $color-gray-04;
+$image-viewer-thumb-hover-border-color: $color-main;
+$image-viewer-tools-control-color: $color-main;
+$image-viewer-tools-control-color-active: $color-second;
+
+
+// ------------------------------------ //
+// #FOOTER
+// ------------------------------------ //
+$footer-image-height: 50px;
+$footer-background-color: $color-gray-03;
+$footer-breakpoint-desktop: $page-max-width + $grid-gutter-h;
+$footer-breakpoint-mobile: 700px;
+
+
+// ------------------------------------ //
+// #CAROUSEL
+// ------------------------------------ //
+$carousel-content-width:960px;
+$carousel-height: 400px;
+
+
+// ------------------------------------ //
+// #NAV
+// ------------------------------------ //
+$nav-image-height: 50px;
+$nav-image-width: 50px;
+
+
+// ------------------------------------ //
+// #PROGRESS-LINE
+// ------------------------------------ //
+$progress-line-bg-color: $color-gray-02;
+$progress-line-front-color: $color-main;
+$progress-line-height: $space*3;

package/src/lib/styles/global/_forms.scss

@@ -0,0 +1,122 @@
+/**
+ * FORMS
+ *
+ * Style for forms elements
+ */
+
+/* ------------------------------------ *\
+   #GENERAL
+\* ------------------------------------ */
+select, textarea, input[type="date"], input[type="datetime"],
+input[type="datetime-local"], input[type="email"],
+input[type="month"], input[type="number"], input[type="password"],
+input[type="search"], input[type="tel"], input[type="text"],
+input[type="time"], input[type="url"], input[type="week"] {
+    box-sizing: border-box;
+    padding: 0 $space;
+    border-width: $form-border-size;
+    border-style: solid;
+    border-color: $color-border-normal;
+    background-color: $color-background-base;
+    border-radius: $form-border-radius;
+    color: $color-text;
+    font-size: $font-size-s;
+    font-weight: $font-weight-normal;
+    outline: none;
+    // box-shadow: inset 0px 0px 6px 0px rgba(0,0,0,0.05);
+    // transition-property: border;
+    // transition-duration: $transition-durations;
+
+    &:hover {
+    }
+
+    &:focus,
+    &:active {
+        // border-color: $color-brand;
+        // box-shadow: inset 0 0 6px 0 rgba(0,0,0,0.05), 0 0 2px fade($color-brand, 20%);
+    }
+
+    &.small {
+        // height: $form-input-small-height;
+        // padding: 0 8px;
+        // font-size: $font-size-s;
+        // line-height: $form-input-small-height;
+    }
+
+    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+        color: $color-text-light !important;
+        font-weight: $font-weight-normal!important;
+    }
+    &::-moz-placeholder { /* Firefox 19+ */
+        color: $color-text-light !important;
+        font-weight: $font-weight-normal !important;
+    }
+    &:-ms-input-placeholder { /* IE 10+ */
+        color: $color-text-light !important;
+        font-weight: $font-weight-normal !important;
+    }
+    &:-moz-placeholder { /* Firefox 18- */
+        color: $color-text-light !important;
+        font-weight: $font-weight-normal !important;
+    }
+}
+
+/* Set Height */
+textarea, input[type="date"], input[type="datetime"],
+input[type="datetime-local"], input[type="email"],
+input[type="month"], input[type="number"], input[type="password"],
+input[type="search"], input[type="tel"], input[type="text"],
+input[type="time"], input[type="url"], input[type="week"] {
+    height: $form-input-height;
+    line-height: $form-input-height;
+}
+
+/* Select */
+select, #new_post select {
+    height: $form-input-height;
+}
+
+/* Labels */
+label {
+    margin-bottom: $space;
+    font-size: $font-size-s;
+    font-weight: $font-weight-normal;
+    line-height: 1.2;
+    color: $color-text;
+}
+
+/* Textarea */
+textarea, .form-control textarea {
+    line-height: 1.2;
+    padding: $space;
+}
+
+
+/* ------------------------------------ *\
+   #DISABLED
+\* ------------------------------------ */
+select, textarea, input[type="date"], input[type="datetime"],
+input[type="datetime-local"], input[type="email"],
+input[type="month"], input[type="number"], input[type="password"],
+input[type="search"], input[type="tel"], input[type="text"],
+input[type="time"], input[type="url"], input[type="week"] {
+    &:disabled, &.is-disabled {
+        border-color: $color-border-light;
+        background-color: $color-background-medium;
+        color: $color-text-light;
+
+        /* Placeholder text for disableds */
+        &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+            color: rgba($color-text-light, .5);
+        }
+        &::-moz-placeholder { /* Firefox 19+ */
+            color: rgba($color-text-light, .5);
+        }
+        &:-ms-input-placeholder { /* IE 10+ */
+            color: rgba($color-text-light, .5);
+        }
+        &:-moz-placeholder { /* Firefox 18- */
+            color: rgba($color-text-light, .5);
+        }
+    }
+}

package/src/lib/styles/global/_global.scss

@@ -0,0 +1,46 @@
+/**
+ * GLOBAL
+ *
+ * Global styles, tags and common classes
+ */
+
+// TODO: Decide if we want to style the "body" level and if we want to differentiate between the embed and standalone usage.
+
+/* ------------------------------------ *\
+   #TAGS
+\* ------------------------------------ */
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-size: 16px;
+}
+
+body {
+    box-sizing: border-box;
+    background-color: $color-background-base;
+    color: $color-text;
+    font-family: $font-family-main;
+    -webkit-font-smoothing: antialiased;
+}
+
+:focus {
+    outline: 0;
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}