@agorapulse/ui-theme 0.0.1

package/assets/lib-ui-theme/style/_variables.scss

@@ -0,0 +1,104 @@
+@use "sass:math";
+
+@import 'colors';
+
+$font-family: "Averta";
+$font-family-header: "Averta";
+$font-weight: 400;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-extra-bold: 800;
+$font-weight-black: 900;
+$font-size-h1: 28px;
+$font-line-height-h1: 35px;
+$font-size-h2: 24px;
+$font-line-height-h2: 30px;
+$font-size-h3: 18px;
+$font-line-height-h3: 22px;
+$font-size-h4: 16px;
+$font-line-height-h4: 20px;
+$font-size: 14px;
+$font-line-height: 17px;
+$font-size-icon: 16px;
+$font-size-s: 12px;
+$font-line-height-s: 15px;
+$font-line-height-s: 18px;
+$font-size-sl: 10px;
+$font-line-height-sm: 14px;
+$font-size-sm: 8px;
+
+$font-color: map_get($colors-grey, 80);
+
+$border-color: map_get($colors-grey, 20); //$color-pale-grey,
+$border-radius: 4px;
+$border-radius-l: 8px;
+$border-radius-lg: 10px;
+
+$color-error: map_get($colors-red, 100);
+$color-info: map_get($colors-electric-blue, 100);
+$color-success: map_get($colors-green, 100);
+$color-warning: map_get($colors-yellow, 100);
+
+$link-color:  map_get($colors-electric-blue, 100);
+
+$padding-xxl: 48px;
+$padding-xl: 32px;
+$padding-l: 24px;
+$padding-m: 16px;
+$padding-ml: 12px;
+$padding-s: 8px;
+$padding-sl: 6px;
+$padding-sm: 4px;
+
+// Forms controls
+$form-control-selected-background-color: map_get($colors-electric-blue, 100);
+$form-control-selected-border-color: map_get($colors-electric-blue, 100);
+$form-control-selected-font-color: map_get($colors-grey, 100);
+$form-control-default-background-color: map_get($colors-grey, 40);
+$form-control-default-border-color: map_get($colors-grey, 40);
+$form-control-default-font-color: map_get($colors-grey, 80);
+$form-control-default-label-color: map_get($colors-grey, 60);
+$form-control-disabled-background-color: map_get($colors-grey, 10);
+$form-control-disabled-border-color: map_get($colors-grey, 20);
+$form-control-disabled-font-color: map_get($colors-grey, 20);
+$form-control-disabled-selected-background-color: map_get($colors-grey, 20);
+$form-control-hover-border-color: map_get($colors-grey, 60);
+$form-input-default-border-color: map_get($colors-grey, 20);
+$form-input-disabled-background-color: map_get($colors-grey, 5);
+$form-input-placeholder-font-color: map_get($colors-grey, 40);
+$form-input-hover-border-color: map_get($colors-grey, 40);
+
+// Avatar
+
+$avatar-size-large: 64px;
+$avatar-size-normal: 48px;
+$avatar-size-medium: 40px;
+$avatar-size-medium-sm: 36px;
+$avatar-size-small: 32px;
+$avatar-size-mini: 24px;
+$avatar-size-mini-sm: 16px;
+$avatar-size-micro: 12px;
+
+$button-height: 32px;
+
+// Responsive Media Query Ranges
+
+$small-screen-up: 601px !default;
+$medium-screen-up: 993px !default;
+$large-screen-up: 1201px !default;
+$small-screen: 600px !default;
+$medium-screen: 992px !default;
+$large-screen: 1200px !default;
+
+$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
+$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
+$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
+$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
+$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
+$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
+
+
+// Grid
+
+$num-cols: 12 !default;
+$gutter-width: 1.5rem !default;

package/assets/lib-ui-theme/style/components-custom-style/_alert.scss

@@ -0,0 +1,35 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+.alert {
+    font-weight: bold;
+    padding: $padding-m $padding-m;
+    position: relative;
+
+    a {
+        color: #fff;
+        text-decoration: underline;
+        &.alert-close {
+            position: absolute;
+            right: 16px;
+            top: 22px;
+            &:hover {
+                cursor: pointer;
+            }
+        }
+    }
+
+    &.error {
+        background-color: $color-error;
+        color: $color-white;
+    }
+
+    &.success {
+        background-color: $color-success;
+        color: $color-white;
+    }
+
+    &.warning {
+        background-color: map_get($colors-orange, 100);
+        color: $color-white;
+    }
+}

package/assets/lib-ui-theme/style/components-custom-style/_clickable-text.scss

@@ -0,0 +1,8 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+span, a {
+    &.ap-clickable-text {
+        color: map_get($colors-electric-blue, 100);
+        cursor: pointer;
+    }
+}

package/assets/lib-ui-theme/style/components-custom-style/_form.scss

@@ -0,0 +1,35 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+%small-font {
+    font-size: $font-size-s;
+    font-weight: normal;
+    line-height: 15px;
+}
+
+.form-field {
+    margin-bottom: $padding-m;
+
+    label:not(.mat-checkbox-layout):not(.mat-radio-label) {
+        @extend %small-font;
+        color: $form-control-default-label-color;
+        display: block;
+        margin-bottom: $padding-sm;
+    }
+    &.required label:not(.mat-radio-label):after {
+        content: '*';
+    }
+}
+
+.form-message,
+.form-field-message {
+    @extend %small-font;
+    margin: $padding-sm 0;
+
+    &.invalid {
+        color: $color-error;
+    }
+
+    &.valid {
+        color: $color-success;
+    }
+}

package/assets/lib-ui-theme/style/components-custom-style/_input-error.scss

@@ -0,0 +1,7 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+.ap-input-error {
+    color: map-get($colors-red, 100);
+    font-weight: $font-weight;
+    font-size: $font-size-s;
+}

package/assets/lib-ui-theme/style/components-custom-style/_input.scss

@@ -0,0 +1,127 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+textarea, select, input, button {
+    outline: none;
+    &.full-width {
+        box-sizing: border-box;
+        width: 100%;
+    }
+}
+
+form.full-width {
+    textarea, select, input, button {
+        box-sizing: border-box;
+        width: 100%;
+    }
+}
+
+input, textarea {
+    border: 1px solid $form-input-default-border-color;
+    border-radius: $border-radius;
+    color: $form-control-selected-font-color;
+    font-family: $font-family;
+    font-size: $font-size;
+    font-weight: $font-weight;
+    padding: $padding-s $padding-m;
+    &::placeholder {
+        color: $form-input-placeholder-font-color;
+    }
+    // Disabled
+    &:disabled {
+        background: $form-input-disabled-background-color;
+        border-color: $form-control-disabled-border-color;
+        color: $form-input-placeholder-font-color;
+    }
+    // Focus
+    &:focus:not(.transparent) {
+        border-color: $form-control-selected-border-color;
+    }
+    // Invalid
+    &.invalid:not([disabled]):not(.transparent),
+    &.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent) {
+        border: 1px solid $color-error;
+    }
+    // Valid
+    &.valid:not([disabled]):not(.transparent) {
+        border: 1px solid $color-success;
+    }
+
+    // Transparent
+    &.transparent {
+        border: 0;
+        background-color: transparent;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    // Hover
+    &:not(.transparent):not(.valid):not(.invalid):not(:focus):not([disabled]):hover {
+        border-color: $form-input-hover-border-color
+    }
+}
+
+.input-group {
+    display: flex;
+    flex-direction: row;
+    width: 180px;
+    color: map_get($colors-grey, 100);
+
+    input {
+        box-sizing: border-box;
+        padding: $padding-s $padding-xl $padding-s $padding-m;
+        width: 100%;
+    }
+
+    .input-group-append {
+        position: relative;
+        top: 10px;
+        right: 26px;
+        height: 15px;
+        width: 0;
+        color: map_get($colors-grey, 60);
+    }
+
+    input:focus + .input-group-append {
+        color: map_get($colors-electric-blue, 100);
+    }
+
+    &.disabled {
+        color: map_get($colors-grey, 20);
+        background: map_get($colors-grey, 5);
+
+        .input-group-append {
+            background: map_get($colors-grey, 5);
+            color: map_get($colors-grey, 20);
+        }
+    }
+
+    &.full-width {
+        box-sizing: border-box;
+        width: 100%;
+    }
+}
+
+form.submitted {
+    input, textarea {
+        // Invalid
+        &.ng-invalid:not([disabled]):not(.transparent) {
+            border: 1px solid $color-error;
+        }
+    }
+}
+
+
+textarea {
+    resize: none;
+}
+
+/* Hide HTML5 Up and Down arrows on number inputs */
+/*input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+input[type="number"] {
+    -moz-appearance: textfield;
+}*/

package/assets/lib-ui-theme/style/components-custom-style/_mat-button-toggle-group.scss

@@ -0,0 +1,68 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+.mat-button-toggle-group {
+    height: 36px;
+    border-radius: 4px;
+    border:none;
+
+    .mat-button-toggle {
+        margin-left: -1px;
+        height: 34px;
+        line-height: 34px;
+        color: map_get($colors-grey, 100);
+        font-weight: bold;
+        border: 1px solid #D6DAE0;
+
+        &.mat-button-toggle-checked {
+            color: map_get($colors-electric-blue, 100);
+            border: 1px solid map_get($colors-electric-blue, 100);
+            background: white;
+            z-index: 1;
+
+            &:hover {
+                border: 1px solid map_get($colors-electric-blue, 100);
+                color: map_get($colors-electric-blue, 100);
+                background: white;
+                z-index: 1;
+                height: 100%;
+            }
+        }
+
+        &:hover {
+            background: white;
+            box-sizing: border-box;
+            border: 1px solid map_get($colors-electric-blue, 100);
+            color: map_get($colors-grey, 100);
+            height: 100%;
+            z-index: 1;
+            .mat-button-toggle-focus-overlay {
+                opacity: 0!important;
+            }
+        }
+
+        button {
+            margin-top: -2px;
+            height: 36px;
+            line-height: 36px;
+        }
+
+        span {
+            margin-top: -2px;
+            height: 36px;
+            line-height: 36px;
+            &.mat-button-toggle-focus-overlay {
+                opacity: 0;
+            }
+        }
+    }
+    .mat-button-toggle:first-of-type {
+        border-bottom-left-radius: $border-radius;
+        border-top-left-radius: $border-radius;
+        margin-left: 0px !important;
+    }
+    .mat-button-toggle:last-of-type {
+        border-bottom-right-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+    }
+}
+