@agorapulse/ui-theme 0.0.1

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

@@ -0,0 +1,434 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+%ap-button {
+    color: map_get($colors-grey, 80);
+    font-weight: bold;
+    min-width: 100px;
+    line-height: 16px;
+    padding: 10px $padding-m;
+    height: 36px;
+    &.active {
+        color: map_get($colors-electric-blue, 100);
+    }
+
+    .mat-button-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        ap-symbol {
+            display: inline-block;
+            &.left-symbol {
+                margin-right: $padding-s;
+            }
+            &.right-symbol {
+                margin-left: $padding-s;
+            }
+            height: 16px;
+            width: 16px;
+        }
+    }
+    .mat-button-focus-overlay {
+        display: none;
+    }
+    .mat-ripple-element {
+        display: none;
+    }
+    // Width
+    &.full-width {
+        width: 100%;
+    }
+
+    &.drop-down {
+        ap-symbol {
+            height: 12px;
+            width: 12px;
+            padding-left: 2px;
+            padding-top: 2px;
+        }
+    }
+    // Size
+    &.small {
+        font-size: 12px;
+        line-height: 12px;
+        height: 28px;
+        padding: $padding-s;
+        ap-symbol {
+            height: 12px;
+            width: 12px;
+            &.left-symbol {
+                margin-right: $padding-sl;
+            }
+            &.right-symbol {
+                margin-left: $padding-sl;
+            }
+        }
+    }
+    &.medium {
+        font-size: 14px;
+        line-height: 14px;
+        height: 32px;
+        padding: 9px $padding-ml;
+        ap-symbol {
+            height: 14px;
+            width: 14px;
+            &.left-symbol {
+                margin-right: 7px;
+            }
+            &.right-symbol {
+                margin-left: 7px;
+            }
+        }
+    }
+    &.large {
+        font-size: 16px;
+        line-height: 16px;
+        height: 44px;
+        padding: 14px $padding-l;
+        ap-symbol {
+            height: 16px;
+            width: 16px;
+            &.left-symbol {
+                margin-right: $padding-s;
+            }
+            &.right-symbol {
+                margin-left: $padding-s;
+            }
+        }
+    }
+    // Shape
+    &.circle {
+        border-radius: 30px;
+        min-width: 36px;
+        padding: 0;
+        &.small {
+            border-radius: 28px;
+            min-width: 28px;
+            max-height: 28px;
+        }
+        &.medium {
+            border-radius: 32px;
+            min-width: 32px;
+            max-height: 32px;
+        }
+        &.large {
+            border-radius: 44px;
+            min-width: 44px;
+            max-height: 44px;
+        }
+        &.active {
+            ap-symbol {
+                color: map_get($colors-electric-blue, 100);
+            }
+        }
+        &:not(.mat-accent):not(.mat-primary):not(.mat-success):not(.mat-warn):not(.mat-secondary):not(.mat-facebook):not(.mat-instagram):not(.mat-linkedin):not(.mat-twitter):not(.mat-youtube):not(.active) {
+            ap-symbol {
+                color: map_get($colors-grey, 60);
+            }
+        }
+    }
+    &.square {
+        min-width: 36px;
+        padding: 0;
+        &.small {
+            min-width: 28px;
+        }
+        &.medium {
+            min-width: 32px;
+        }
+        &.large {
+            min-width: 44px;
+        }
+    }
+}
+
+@mixin flat-button-color($background-color, $hover-background-color, $active-background-color) {
+    background-color: $background-color;
+    color: #fff;
+    ap-symbol {
+        color: #fff!important;
+    }
+    &:hover, &.force-hover {
+        background-color: $hover-background-color;
+    }
+    &:active {
+        background-color: $active-background-color;
+    }
+}
+
+button.mat-flat-button {
+    @extend %ap-button;
+    background-color: transparent;
+    &:not([disabled]):hover, &.force-hover {
+        background-color: map_get($colors-grey, 5);
+        &.active {
+            background-color: map_get($colors-electric-blue, 10);
+        }
+    }
+    &:not([disabled]):active {
+        background-color: map_get($colors-grey, 10);
+        &.active {
+            background-color: map_get($colors-electric-blue, 20);
+        }
+    }
+    &[disabled],
+    &[disabled][disabled] {
+        background: none;
+        color: map_get($colors-grey, 20);
+    }
+    &.mat-accent[disabled],
+    &.mat-primary[disabled],
+    &.mat-success[disabled],
+    &.mat-warn[disabled],
+    &.mat-secondary[disabled],
+    &.mat-facebook[disabled],
+    &.mat-instagram[disabled],
+    &.mat-linkedin[disabled],
+    &.mat-twitter[disabled],
+    &.mat-youtube[disabled],
+    &.mat-google[disabled] {
+        background-color: map_get($colors-grey, 20);
+        color: #fff;
+    }
+    &.mat-accent:not([disabled]) {
+        @include flat-button-color(map_get($colors-electric-blue, 100), map_get($colors-electric-blue, 85), map_get($colors-electric-blue, 60));
+    }
+    &.mat-primary:not([disabled]) {
+        @include flat-button-color(map_get($colors-orange, 100), map_get($colors-orange, 85), map_get($colors-orange, 60));
+    }
+    &.mat-success:not([disabled]) {
+        @include flat-button-color(map_get($colors-green, 100), map_get($colors-green, 85), map_get($colors-green, 60));
+    }
+    &.mat-warn:not([disabled]) {
+        @include flat-button-color(map_get($colors-red, 100), map_get($colors-red, 85), map_get($colors-red, 60));
+    }
+    // Social networks
+    &.mat-facebook:not([disabled]) {
+        @include flat-button-color($color-facebook, $color-facebook, $color-facebook);
+    }
+    &.mat-instagram:not([disabled]) {
+        @include flat-button-color($color-instagram, $color-instagram, $color-instagram);
+    }
+    &.mat-linkedin:not([disabled]) {
+        @include flat-button-color($color-linkedin, $color-linkedin, $color-linkedin);
+    }
+    &.mat-twitter:not([disabled]) {
+        @include flat-button-color($color-twitter, $color-twitter, $color-twitter);
+    }
+    &.mat-youtube:not([disabled]) {
+        @include flat-button-color($color-youtube, $color-youtube, $color-youtube);
+    }
+    &.mat-google:not([disabled]) {
+        @include flat-button-color($color-google, $color-google, $color-google);
+    }
+}
+
+@mixin stroked-button-color($color, $border-color, $hover-border-color) {
+    color: $color;
+    border-color: $border-color;
+    &:hover, &.force-hover {
+        border-color: $hover-border-color;
+    }
+    &:active {
+        border-color: $color;
+    }
+}
+@mixin ghost-button-color($color, $hover-background-color, $active-background-color) {
+    background-color: transparent;
+    border: none;
+    color: $color;
+    ap-symbol {
+        color: $color;
+    }
+    &:hover, &.force-hover {
+        background-color: $hover-background-color;
+    }
+    &:active {
+        background-color: $active-background-color;
+    }
+    &[disabled] {
+        background-color: transparent;
+        color: $active-background-color;
+    }
+}
+
+button.mat-stroked-button {
+    &.ghost {
+        border: none;
+        color: map_get($colors-grey, 80);
+        ap-symbol {
+            color: map_get($colors-grey, 60);
+        }
+        &:hover, &.force-hover {
+            background-color: map_get($colors-grey, 10);
+        }
+        &:active {
+            background-color: map_get($colors-grey, 20);
+        }
+        &[disabled] {
+            background-color: transparent;
+            color: map_get($colors-grey, 20);
+        }
+    }
+    @extend %ap-button;
+    &.background-grey {
+        background-color: $color-grey-background;
+    }
+    &.background-white {
+        background-color: $color-white;
+    }
+    &:not([disabled]) {
+        border-color: map_get($colors-grey, 20);
+        &.active {
+            border-color: map_get($colors-electric-blue, 40);
+        }
+    }
+    &:not([disabled]):hover, &.force-hover {
+        border-color: map_get($colors-grey, 40);
+        &.active {
+            border-color: map_get($colors-electric-blue, 85);
+        }
+    }
+    &:not([disabled]):active {
+        border-color: map_get($colors-grey, 60);
+        &.active {
+            border-color: map_get($colors-electric-blue, 100);
+        }
+    }
+    &[disabled],
+    &[disabled][disabled] {
+        border-color: map_get($colors-grey, 20);
+        color: map_get($colors-grey, 20);
+    }
+
+    &.mat-accent:not([disabled]) {
+        @include stroked-button-color(map_get($colors-electric-blue, 100), map_get($colors-electric-blue, 60), map_get($colors-electric-blue, 85));
+    }
+    &.mat-primary:not([disabled]) {
+        @include stroked-button-color(map_get($colors-orange, 100), map_get($colors-orange, 60), map_get($colors-orange, 85));
+    }
+    &.mat-success:not([disabled]) {
+        @include stroked-button-color(map_get($colors-green, 100), map_get($colors-green, 60), map_get($colors-green, 85));
+    }
+    &.mat-warn:not([disabled]) {
+        @include stroked-button-color(map_get($colors-red, 100), map_get($colors-red, 60), map_get($colors-red, 85));
+    }
+    &.mat-warn.ghost {
+        @include ghost-button-color(map_get($colors-red, 100), map_get($colors-red, 10), map_get($colors-red, 20));
+        &[disabled] {
+            background-color: transparent;
+            color: map_get($colors-red, 20);
+            ap-symbol {
+                color: map_get($colors-red, 20);
+            }
+        }
+    }
+    &.mat-primary.ghost {
+        @include ghost-button-color(map_get($colors-orange, 100), map_get($colors-orange, 60), map_get($colors-orange, 85));
+        &[disabled] {
+            background-color: transparent;
+            color: map_get($colors-orange, 85);
+            ap-symbol {
+                color: map_get($colors-orange, 85);
+            }
+        }
+    }
+    &.mat-accent.ghost {
+        @include ghost-button-color(map_get($colors-electric-blue, 100), map_get($colors-electric-blue, 60), map_get($colors-electric-blue, 85));
+        &[disabled] {
+            background-color: transparent;
+            color: map_get($colors-electric-blue, 85);
+            ap-symbol {
+                color: map_get($colors-electric-blue, 85);
+            }
+        }
+    }
+    &.mat-success.ghost {
+        @include ghost-button-color(map_get($colors-green, 100), map_get($colors-green, 60), map_get($colors-green, 85));
+        &[disabled] {
+            background-color: transparent;
+            color: map_get($colors-green, 85);
+            ap-symbol {
+                color: map_get($colors-green, 85);
+            }
+        }
+    }
+    &.mat-facebook:not([disabled]) {
+        @include stroked-button-color($color-facebook, $color-facebook, 'none');
+    }
+    &.mat-instagram:not([disabled]) {
+        @include stroked-button-color($color-instagram, $color-instagram, 'none');
+    }
+    &.mat-linkedin:not([disabled]) {
+        @include stroked-button-color($color-linkedin, $color-linkedin, 'none');
+    }
+    &.mat-twitter:not([disabled]) {
+        @include stroked-button-color($color-twitter, $color-twitter, 'none');
+    }
+    &.mat-youtube:not([disabled]) {
+        @include stroked-button-color($color-youtube, $color-youtube, 'none');
+    }
+    &.mat-google:not([disabled]) {
+        @include stroked-button-color($color-google, $color-google, 'none');
+    }
+}
+
+.split-button-dropdown {
+    display: flex;
+    %ap-button {
+        &.main-button {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+            margin-right: 1px !important;
+        }
+        &.drop-down-append {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+            width: 40px;
+
+        }
+    }
+}
+
+@mixin flat-secondary-button-color($text-color, $background-color, $hover-background-color, $active-background-color) {
+    background-color: $background-color;
+    color: $text-color;
+    border: none;
+    border-radius: $border-radius;
+    padding: 10px 16px;
+    font-family: $font-family;
+    font-size: $font-size;
+    font-weight: $font-weight-bold;
+
+    ap-symbol {
+        color: $text-color !important;
+    }
+    &:hover, &.force-hover {
+        cursor: pointer;
+        background-color: $hover-background-color;
+    }
+    &:active {
+        background-color: $active-background-color;
+    }
+}
+
+@mixin crop-text() {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+button.ap-button-secondary-orange {
+    @include flat-secondary-button-color(map_get($colors-orange, 100), map_get($colors-orange, 10), map_get($colors-orange, 20), map_get($colors-orange, 40));
+
+    &.ap-one-line {
+        @include crop-text();
+    }
+}
+
+button.ap-button-secondary-blue {
+    @include flat-secondary-button-color(map_get($colors-electric-blue, 100), map_get($colors-electric-blue, 10), map_get($colors-electric-blue, 20), map_get($colors-electric-blue, 40));
+
+    &.ap-one-line {
+        @include crop-text();
+    }
+}

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

@@ -0,0 +1,103 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+@mixin checkbox-state-style($color) {
+    .mat-checkbox-frame {
+        border-color:$color;
+    }
+    &.mat-checkbox-checked {
+        .mat-checkbox-background {
+            background-color: $color !important;
+        }
+    }
+}
+
+.mat-checkbox {
+    margin-right: $padding-m;
+    .mat-checkbox-frame {
+        background-color: white;
+        border-color: $form-control-default-border-color;
+        border-radius: $border-radius;
+        border-width: 1px;
+    }
+    .mat-checkbox-background {
+        border-radius: $border-radius;
+        .mat-checkbox-checkmark-path {
+            stroke-width: 4px;
+        }
+    }
+    .mat-checkbox-checkmark {
+        height: 10px;
+        top: 2px;
+    }
+    .mat-checkbox-layout {
+        align-items: center;
+
+        .mat-checkbox-label {
+            display: flex;
+            color: $form-control-default-font-color;
+            line-height: $font-line-height;
+            font-size: $font-size;
+        }
+    }
+    // Hover
+    /* Does not work?
+    &:hover {
+        .mat-checkbox-frame {
+            color: $form-control-hover-border-color !important;
+        }
+    }*/
+    // Checked
+    &.mat-checkbox-checked:not(.mat-checkbox-disabled) {
+        .mat-checkbox-background {
+            background-color: $form-control-selected-background-color !important;
+        }
+        .mat-checkbox-label {
+            color: $form-control-selected-font-color;
+        }
+    }
+    // Disabled
+    &.mat-checkbox-disabled {
+        .mat-checkbox-background {
+            background-color: $form-control-disabled-background-color;
+            border: 1px solid $form-control-disabled-border-color;
+        }
+        .mat-checkbox-label {
+            color: $form-control-disabled-font-color;
+        }
+        &.mat-checkbox-checked {
+            .mat-checkbox-background {
+                background-color: $form-control-disabled-selected-background-color !important;
+            }
+        }
+    }
+    // Invalid
+    &.invalid:not(.mat-checkbox-disabled),
+    &.ng-invalid.ng-dirty.ng-touched:not([disabled]) {
+        @include checkbox-state-style($color-error);
+    }
+    // Valid
+    &.valid:not(.mat-checkbox-disabled) {
+        @include checkbox-state-style($color-success);
+    }
+    // Full width
+    &.full-width {
+        width: 100%;
+        margin: 0;
+        .mat-checkbox-layout {
+            display: flex;
+            justify-content: space-between;
+            .mat-checkbox-inner-container {
+                margin: 0;
+            }
+        }
+    }
+}
+
+form.submitted {
+    .mat-checkbox {
+        // Invalid
+        &.ng-invalid {
+            @include checkbox-state-style($color-error);
+        }
+    }
+}

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

@@ -0,0 +1,36 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+.mat-dialog-actions {
+    background-color: $color-grey-white;
+    border-top: 1px solid $color-silver;
+    margin-top: $padding-l;
+    padding: $padding-l;
+
+    &[fxLayout] {
+        margin-left: -$padding-l;
+        margin-right: -$padding-l;
+    }
+
+    [fxFlex]:first-child {
+        margin-left: $padding-l;
+    }
+
+    [fxFlex]:last-child {
+        margin-right: $padding-l;
+    }
+}
+
+.dark-backdrop {
+    background: rgba(0, 0, 0, .75);
+}
+
+.white-backdrop {
+    background: rgba(255, 255, 255, .75);
+}
+
+.full-screen-modal {
+    .mat-dialog-container {
+        max-width: none;
+        background: transparent;
+    }
+}

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

@@ -0,0 +1,3 @@
+.mat-divider {
+    border-color: map_get($colors-grey, 10);
+}

package/assets/lib-ui-theme/style/components-custom-style/_mat-expansion-panel.scss

@@ -0,0 +1,21 @@
+.mat-accordion {
+    .mat-expansion-panel-spacing {
+        margin: 0;
+    }
+
+    .mat-action-row {
+        background-color: $color-grey-white;
+        padding: $padding-l;
+        &[fxLayout] {
+            margin-left: -$padding-l;
+            margin-right: -$padding-l;
+        }
+        [fxFlex]:first-child {
+            margin-left: $padding-l;
+        }
+        [fxFlex]:last-child {
+            margin-right: $padding-l;
+        }
+    }
+
+}

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

@@ -0,0 +1,19 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+.mat-list-option {
+    .mat-pseudo-checkbox {
+        border-color: $color-silver;
+        border-radius: $border-radius;
+        border-width: 1px;
+        &.mat-pseudo-checkbox-checked {
+            background: $color-success;
+            &::after {
+                left: 2px;
+            }
+        }
+    }
+}
+
+.mat-list-base {
+    padding-top: 0 !important;
+}