@agorapulse/ui-theme 0.0.4 → 1.0.0-SNAPSHOT

package/assets/style/_tooltip.scss

@@ -0,0 +1,138 @@
+.ap-tooltip {
+    --ap-arrow-width: 16px;
+    --ap-arrow-height: 8px;
+    --ap-arrow-offset: 10px;
+
+    width: fit-content;
+    max-width: 350px;
+    background: var(--comp-tooltip-text-color-main-default-bg);
+    border-radius: var(--ref-border-radius-md);
+    position: absolute;
+    z-index: 9999999;
+    animation: fadeIn var(--ref-animation-short) ease-in-out;
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    .ap-content-container {
+        padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
+        border-radius: var(--ref-border-radius-md);
+
+        .ap-tooltip-text {
+            color: var(--comp-tooltip-text-default-color);
+            font-family: var(--comp-tooltip-text-style-font-family);
+            font-size: var(--comp-tooltip-text-style-size);
+            font-weight: var(--comp-tooltip-text-style-weight);
+            line-height: var(--comp-tooltip-text-style-line-height);
+        }
+
+        .ap-tooltip-arrow {
+            color: var(--ref-color-grey-100);
+            position: absolute;
+            z-index: 10000;
+            width: var(--ap-arrow-width);
+            height: var(--ap-arrow-height);
+            display: block;
+
+            path {
+                fill: currentColor;
+            }
+        }
+    }
+    &.ap-tooltip-top,
+    &.ap-tooltip-bottom {
+        .ap-tooltip-arrow {
+            margin: auto;
+            right: 0;
+            left: 0;
+        }
+    }
+
+    &.ap-tooltip-top,
+    &.ap-tooltip-bottom,
+    &.ap-tooltip-top-left,
+    &.ap-tooltip-top-right,
+    &.ap-tooltip-bottom-left,
+    &.ap-tooltip-bottom-right {
+        .ap-tooltip-arrow {
+            transform: translateY(7px) rotate(180deg);
+        }
+    }
+
+    &.ap-tooltip-top-left,
+    &.ap-tooltip-bottom-left {
+        .ap-tooltip-arrow {
+            left: var(--ap-arrow-offset);
+        }
+    }
+
+    &.ap-tooltip-top-right,
+    &.ap-tooltip-bottom-right {
+        .ap-tooltip-arrow {
+            right: var(--ap-arrow-offset);
+        }
+    }
+
+    &.ap-tooltip-bottom,
+    &.ap-tooltip-bottom-right,
+    &.ap-tooltip-bottom-left {
+        .ap-tooltip-arrow {
+            top: 0;
+            rotate: 180deg;
+        }
+    }
+
+    &.ap-tooltip-top,
+    &.ap-tooltip-top-right,
+    &.ap-tooltip-top-left {
+        .ap-tooltip-arrow {
+            bottom: 0;
+        }
+    }
+
+    &.ap-tooltip-right {
+        .ap-tooltip-arrow {
+            top: 0;
+            left: 0;
+            transform: scale(-1) translateY(-11px) translateX(calc((var(--ap-tooltip-height) / 2 - 4px) * -1));
+            rotate: 90deg;
+        }
+    }
+
+    &.ap-tooltip-left {
+        .ap-tooltip-arrow {
+            top: 0;
+            right: 0;
+            rotate: 90deg;
+            transform: translateY(-11px) translateX(calc((var(--ap-tooltip-height) / 2 - 4px)));
+        }
+    }
+
+    &.ap-tooltip-custom-template {
+        background-color: var(--ref-color-white);
+        filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.08));
+
+        .ap-tooltip-text {
+            color: var(--ref-color-grey-100);
+        }
+
+        .ap-tooltip-arrow {
+            color: var(--ref-color-white);
+            position: absolute;
+            z-index: 10000;
+            width: var(--ap-arrow-width);
+            height: var(--ap-arrow-height);
+            display: block;
+
+            path {
+                fill: currentColor;
+            }
+        }
+    }
+}

package/assets/style/_variables.scss

@@ -1,9 +1,9 @@
-@use "sass:math";
+@use 'sass:math';
 
 @import 'colors';
 
-$font-family: "Averta";
-$font-family-header: "Averta";
+$font-family: 'Averta';
+$font-family-header: 'Averta';
 $font-weight: 400;
 $font-weight-semibold: 600;
 $font-weight-bold: 700;
@@ -21,7 +21,6 @@ $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;
@@ -39,7 +38,7 @@ $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);
+$link-color: map_get($colors-electric-blue, 100);
 
 $padding-xxl: 48px;
 $padding-xl: 32px;
@@ -71,6 +70,7 @@ $form-input-hover-border-color: map_get($colors-grey, 40);
 // Avatar
 
 $avatar-size-large: 64px;
+$avatar-size-large-normal: 56px;
 $avatar-size-normal: 48px;
 $avatar-size-medium: 40px;
 $avatar-size-medium-sm: 36px;
@@ -90,13 +90,12 @@ $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;
-
+$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
 

package/assets/style/components-custom-style/_clickable-text.scss

@@ -1,6 +1,6 @@
 @import '../variables';
 
-span, a {
+span {
     &.ap-clickable-text {
         color: map_get($colors-electric-blue, 100);
         cursor: pointer;

package/assets/style/components-custom-style/_form.scss

@@ -1,35 +1,34 @@
-@import '../variables';
-
-%small-font {
-    font-size: $font-size-s;
-    font-weight: normal;
-    line-height: 15px;
-}
-
 .form-field {
-    margin-bottom: $padding-m;
+    margin-bottom: var(--ref-spacing-sm);
 
-    label:not(.mat-checkbox-layout):not(.mat-radio-label) {
-        @extend %small-font;
-        color: $form-control-default-label-color;
+    label:not(ap-radio label, ap-select label, ap-input label, ap-textarea-label) {
+        font-size: var(--comp-forms-label-size);
+        font-weight: var(--comp-forms-label-font-weight);
+        line-height: var(--comp-forms-label-line-height);
+        font-family: var(--comp-forms-label-font-family);
+        color: var(--comp-forms-label-text-color);
         display: block;
-        margin-bottom: $padding-sm;
+        margin-bottom: var(--comp-forms-label-padding-bottom);
     }
-    &.required label:not(.mat-radio-label):after {
+
+    &.required label:not(ap-radio label):after {
         content: '*';
     }
 }
 
 .form-message,
 .form-field-message {
-    @extend %small-font;
-    margin: $padding-sm 0;
+    font-size: var(--comp-forms-status-text-size);
+    font-weight: var(--comp-forms-status-text-font-weight);
+    line-height: var(--comp-forms-status-text-line-height);
+    font-family: var(--comp-forms-status-text-font-family);
+    margin: var(--comp-forms-label-padding-bottom) 0;
 
     &.invalid {
-        color: $color-error;
+        color: var(--comp-forms-status-text-error-color);
     }
 
     &.valid {
-        color: $color-success;
+        color: var(--comp-forms-status-text-success-color);
     }
 }

package/assets/style/components-custom-style/_input.scss

@@ -1,6 +1,7 @@
-@import '../variables';
-
-textarea, select, input, button {
+textarea,
+select,
+input,
+button {
     outline: none;
     &.full-width {
         box-sizing: border-box;
@@ -9,41 +10,45 @@ textarea, select, input, button {
 }
 
 form.full-width {
-    textarea, select, input, button {
+    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;
+input,
+textarea {
+    border: 1px solid var(--comp-input-border-default-color);
+    border-radius: var(--comp-input-border-radius);
+    color: var(--comp-input-text-default-color);
+    font-family: var(--comp-input-text-font-family);
+    font-size: var(--comp-input-text-size);
+    font-weight: var(--comp-input-text-font-weight);
+    padding: var(--ref-spacing-xxs) var(--ref-spacing-sm);
+
     &::placeholder {
-        color: $form-input-placeholder-font-color;
+        color: var(--comp-input-text-placeholder-color);
     }
     // Disabled
     &:disabled {
-        background: $form-input-disabled-background-color;
-        border-color: $form-control-disabled-border-color;
-        color: $form-input-placeholder-font-color;
+        background-color: var(--comp-input-fill-disabled-color);
+        color: var(--comp-input-text-disabled-color);
     }
     // Focus
     &:focus:not(.transparent) {
-        border-color: $form-control-selected-border-color;
+        border-color: var(--comp-input-border-focused-color);
     }
     // Invalid
-    &.invalid:not([disabled]):not(.transparent),
-    &.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent) {
-        border: 1px solid $color-error;
+    &.invalid:not([disabled]):not(.transparent):not(:focus):not(:hover),
+    &.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(:focus):not(:hover):not(.transparent) {
+        border: 1px solid var(--comp-input-border-error-color);
     }
     // Valid
-    &.valid:not([disabled]):not(.transparent) {
-        border: 1px solid $color-success;
+    &.valid:not([disabled]):not(:focus):not(:hover):not(.transparent) {
+        border: 1px solid var(--comp-input-border-success-color);
     }
 
     // Transparent
@@ -58,7 +63,7 @@ input, textarea {
 
     // Hover
     &:not(.transparent):not(.valid):not(.invalid):not(:focus):not([disabled]):hover {
-        border-color: $form-input-hover-border-color
+        border-color: var(--comp-input-border-hover-color);
     }
 }
 
@@ -66,12 +71,12 @@ input, textarea {
     display: flex;
     flex-direction: row;
     width: 180px;
-    color: map_get($colors-grey, 100);
-    border-radius: $border-radius;
+    color: var(--comp-input-text-default-color);
+    border-radius: var(--comp-input-border-radius);
 
     input {
         box-sizing: border-box;
-        padding: $padding-s $padding-xl $padding-s $padding-m;
+        padding: var(--ref-spacing-xxs) var(--ref-spacing-lg) var(--ref-spacing-xxs) var(--ref-spacing-sm);
         width: 100%;
     }
 
@@ -81,21 +86,16 @@ input, textarea {
         right: 26px;
         height: 15px;
         width: 0;
-        color: map_get($colors-grey, 60);
+        color: var(--comp-input-icon-color);
     }
 
     input:focus + .input-group-append {
-        color: map_get($colors-electric-blue, 100);
+        color: var(--comp-input-border-focused-color);
     }
 
     &.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);
-        }
+        background-color: var(--comp-input-fill-disabled-color);
+        color: var(--comp-input-border-disabled-color);
     }
 
     &.full-width {
@@ -105,15 +105,15 @@ input, textarea {
 }
 
 form.submitted {
-    input, textarea {
+    input,
+    textarea {
         // Invalid
         &.ng-invalid:not([disabled]):not(.transparent) {
-            border: 1px solid $color-error;
+            border: 1px solid var(--comp-input-border-error-color);
         }
     }
 }
 
-
 textarea {
     resize: none;
 }

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

@@ -3,24 +3,22 @@
 .mat-button-toggle-group {
     height: 36px;
     border-radius: 4px;
-    border:none;
+    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;
+        border: 1px solid map_get($colors-grey, 20);
 
         &.mat-button-toggle-checked {
             color: map_get($colors-electric-blue, 100);
-            border: 1px solid map_get($colors-electric-blue, 100);
+            border: 1px solid map_get($colors-electric-blue, 100) !important;
             background: white;
             z-index: 1;
 
             &:hover {
-                border: 1px solid map_get($colors-electric-blue, 100);
+                border: 1px solid map_get($colors-electric-blue, 100) !important;
                 color: map_get($colors-electric-blue, 100);
                 background: white;
                 z-index: 1;
@@ -31,23 +29,22 @@
         &:hover {
             background: white;
             box-sizing: border-box;
-            border: 1px solid map_get($colors-electric-blue, 100);
+            border: 1px solid map_get($colors-electric-blue, 100) !important;
             color: map_get($colors-grey, 100);
             height: 100%;
             z-index: 1;
             .mat-button-toggle-focus-overlay {
-                opacity: 0!important;
+                opacity: 0 !important;
             }
         }
 
         button {
-            margin-top: -2px;
             height: 36px;
             line-height: 36px;
         }
 
         span {
-            margin-top: -2px;
+            padding: 0 $padding-m;
             height: 36px;
             line-height: 36px;
             &.mat-button-toggle-focus-overlay {
@@ -58,11 +55,10 @@
     .mat-button-toggle:first-of-type {
         border-bottom-left-radius: $border-radius;
         border-top-left-radius: $border-radius;
-        margin-left: 0px !important;
+        margin-left: 0 !important;
     }
     .mat-button-toggle:last-of-type {
         border-bottom-right-radius: $border-radius;
         border-top-right-radius: $border-radius;
     }
 }
-