@touchpoll/tp-survey 0.0.1

package/styles/platform/survey.mixins.tablet.scss

@@ -0,0 +1,132 @@
+@use "sass:map";
+@use "component/survey.checkbox" as mixinCheckbox;
+@use "component/survey.radio.button" as mixinRadioButton;
+@use '@angular/material' as mat;
+
+@mixin link-tablet($theme) {
+ //@include mixinCheckbox.link-survey-checkbox($theme);
+ //@include mixinRadioButton.link-survey-radio-button($theme);
+ //surface-container  secondary-container secondary primary-container
+ $custom-colors: map-get($theme, custom-colors);
+ $background-color: mat.get-theme-color($theme, secondary-container);
+ $checked-background-color: mat.get-theme-color($theme, tertiary-container);
+ $color: mat.get-theme-color($theme, on-secondary-container);
+ $checked-color: mat.get-theme-color($theme, on-tertiary-container);
+
+
+ .alternative-sl{
+  .mdc-label{
+   display: none;
+  }
+ }
+
+ .container-ms-ss-alternatives{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+  display: block;
+ }
+
+ .alternative-ss-ms{
+
+  &.mdc-checkbox--disabled{
+   background-color: var(--mdc-checkbox-disabled-unselected-icon-color);
+   opacity: 0.5;
+  }
+
+  &.mat-mdc-checkbox-checked:not(.mdc-checkbox--disabled){
+   background-color: $checked-background-color;
+   .alternative-ss-ms-caption{
+    color: $checked-color;
+   }
+  }
+
+  &.mat-mdc-radio-checked{
+   background-color: $checked-background-color;
+   .alternative-ss-ms-caption{
+    color: $checked-color;
+   }
+  }
+ }
+
+
+
+ .alternative-ss-ms{
+  position: absolute;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 2.5em; /* ~ 40 px if font size 16px */
+  background-color: $background-color;
+  -webkit-border-radius: .50em;
+  -moz-border-radius: .5em;
+  border-radius: .5em;
+  -webkit-box-shadow: 0 10px 2px rgba(0,0,0,.2);
+  -moz-box-shadow: 0 10px 2px rgba(0,0,0,.2);
+  box-shadow: 0 2px 2px rgba(0,0,0,.2);
+  border: solid  2px #000;
+  overflow: hidden;
+  box-sizing: border-box;
+  -moz-box-sizing:border-box;
+  word-break: break-word;
+  cursor: pointer;
+
+  .mdc-radio{
+   width: 0;
+   height: 0;
+   padding: 0;
+  }
+
+  .mdc-label{
+   width: 100%;
+   height: 100%;
+   justify-content: center;
+   padding: 0;
+   box-sizing: border-box;
+  }
+
+  .mdc-form-field{
+   width: 100%;
+   height: 100%;
+  }
+
+  .mdc-radio__background{
+   display: none;
+  }
+
+  .mdc-form-field{
+   font-size: 100%;
+   align-items: unset;
+  }
+
+  .mdc-checkbox{
+   display: none;
+  }
+
+
+  .alternative-ss-ms-caption{
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   color: map-get($custom-colors, survey-font);
+   text-align: center;
+   font-size: 1.1em;
+   width: 100%;
+   height: 100%;
+   box-sizing: border-box;
+   padding: 0.5em;
+   line-height: 1.1;
+  }
+
+
+
+  //&.mat-mdc-radio-checked, &.mat-mdc-checkbox-checked{
+  // background-color: #e6382f;
+  // .alternative-ss-ms-caption{
+  //  //color: map-get($custom-colors, survey-tablet-font-active-color);
+  // }
+  //}
+ }
+}

package/styles/survey.mixins.scss

@@ -0,0 +1,76 @@
+@use "platform/survey.mixins.desktop" as mixinDesktop;
+@use "platform/survey.mixins.tablet" as mixinTablet;
+@use "@angular/material" as mat;
+@use "sass:map";
+
+@mixin survey-theme($theme) {
+  $custom-colors: map-get($theme, custom-colors);
+
+  &.survey-container-main{
+    background-color: map-get($custom-colors, survey-background);
+    color: var(--mat-app-text-color);
+  }
+
+  ::ng-deep {
+    .question-caption-helper-font {
+      color: map-get($custom-colors, survey-caption-helper);
+    }
+  }
+
+  &.tp-view-desktop {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    ::ng-deep {
+      @include mixinDesktop.link-desktop($theme);
+    }
+  }
+
+  &.tp-view-tablet {
+    ::ng-deep {
+      @include mixinTablet.link-tablet($theme);
+    }
+  }
+
+
+  &.survey-theme-cyan-orange-dark  {
+    ::ng-deep {
+      .question-caption-font {
+        background-image: linear-gradient(to right, rgb(237, 34, 36), rgb(243, 91, 34), rgb(249, 150, 33), rgb(245, 193, 30), rgb(241, 235, 27) 27%, rgb(241, 235, 27), rgb(241, 235, 27) 33%, rgb(99, 199, 32), rgb(12, 155, 73), rgb(33, 135, 141), rgb(57, 84, 165), rgb(97, 55, 155), rgb(147, 40, 142));
+        background-size: 100%;
+        background-repeat: repeat;
+
+        /* Use the text as a mask for the background. */
+        /* This will show the gradient as a text color rather than element bg. */
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        -moz-background-clip: text;
+        -moz-text-fill-color: transparent;
+      }
+    }
+  }
+
+  //::-webkit-scrollbar-thumb {
+  //  //background-color: map.get($custom-colors, ms-select-background);
+  //  background-color: red;
+  //  border-radius: 10px;
+  //}
+  //::-webkit-scrollbar {
+  //  width: 10px;
+  //}
+  //::-webkit-scrollbar-track {
+  //  background-color: transparent;
+  //  border-radius: 10px;
+  //}
+  //::-webkit-scrollbar-corner {
+  //  background-color:transparent;
+  //}
+
+}
+
+
+
+
+
+
+

package/styles/survey.themes.scss

@@ -0,0 +1,56 @@
+@use '@angular/material' as mat;
+@use "survey.mixins" as mixin;
+@use "theme/cyan.orange" as cyanOrange;
+@use "theme/rose.red" as roseRed;
+@use "theme/azure.blue" as azureBlue;
+
+@include mat.core();
+
+.survey-container-main{
+  @include mat.all-component-themes(azureBlue.$theme-azure-blue-light);
+
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+
+  p{
+    margin: 0;
+  }
+}
+
+.survey-theme-azure-blue-light{
+  @include mat.typography-hierarchy(azureBlue.$theme-azure-blue-light);
+  @include mixin.survey-theme(azureBlue.$theme-azure-blue-light);
+}
+
+.survey-theme-azure-blue-dark {
+  @include mat.all-component-colors(azureBlue.$theme-azure-blue-dark);
+  @include mat.typography-hierarchy(azureBlue.$theme-azure-blue-dark);
+  @include mixin.survey-theme(azureBlue.$theme-azure-blue-dark);
+}
+
+.survey-theme-cyan-orange-light{
+  @include mat.all-component-colors(cyanOrange.$theme-cyan-orange-light);
+  @include mat.typography-hierarchy(cyanOrange.$theme-cyan-orange-light);
+  @include mixin.survey-theme(cyanOrange.$theme-cyan-orange-light);
+}
+
+.survey-theme-cyan-orange-dark {
+  @include mat.all-component-colors(cyanOrange.$theme-cyan-orange-dark);
+  @include mat.typography-hierarchy(cyanOrange.$theme-cyan-orange-dark);
+  @include mixin.survey-theme(cyanOrange.$theme-cyan-orange-dark);
+}
+
+.survey-theme-rose-red-light {
+  @include mat.all-component-colors(roseRed.$theme-rose-red-light);
+  @include mat.typography-hierarchy(roseRed.$theme-rose-red-light);
+  @include mixin.survey-theme(roseRed.$theme-rose-red-light);
+}
+
+.survey-theme-rose-red-dark {
+  @include mat.all-component-colors(roseRed.$theme-rose-red-dark);
+  @include mat.typography-hierarchy(roseRed.$theme-rose-red-dark);
+  @include mixin.survey-theme(roseRed.$theme-rose-red-dark);
+}
+
+
+
+

package/styles/theme/azure.blue.scss

@@ -0,0 +1,54 @@
+@use "@angular/material" as mat;
+
+$theme-density: (scale:-1);
+$theme-typography: (
+  brand-family: 'Roboto',
+  bold-weight: 900
+);
+
+$theme-azure-blue-light: map-merge(
+    mat.define-theme(
+        (
+          color: (
+            theme-type: light,
+            primary: mat.$azure-palette,
+            tertiary: mat.$blue-palette,
+          ),
+          typography: $theme-typography,
+          density: $theme-density
+        )
+    ),
+    (
+      custom-colors: (
+        survey-background: var(--mat-app-background-color),
+        survey-font: var(--mat-app-text-color),
+        survey-caption-helper: #f26030,
+        survey-caption-delimiter: #26292936,
+        survey-red: #a71f2a,
+      )
+    )
+);
+
+$theme-azure-blue-dark: map-merge(
+    mat.define-theme(
+        (
+          color: (
+            theme-type: dark,
+            primary: mat.$azure-palette,
+            tertiary: mat.$blue-palette,
+          ),
+          typography: $theme-typography,
+          density: $theme-density
+        )
+    ),
+    (
+      custom-colors: (
+        survey-background: var(--mat-app-background-color),
+        survey-font: var(--mat-app-text-color),
+        survey-caption-helper: #f26030,
+        survey-desktop-input-color: #9a9a9a,
+        survey-caption-delimiter: #26292936,
+        survey-red: #a71f2a,
+      )
+    )
+);

package/styles/theme/cyan.orange.scss

@@ -0,0 +1,54 @@
+@use "@angular/material" as mat;
+
+$theme-density: (scale:-1);
+$theme-typography: (
+  brand-family: 'Roboto',
+  bold-weight: 900
+);
+
+$theme-cyan-orange-light: map-merge(
+    mat.define-theme(
+        (
+          color: (
+            theme-type: light,
+            primary: mat.$cyan-palette,
+            tertiary: mat.$orange-palette,
+          ),
+          typography: $theme-typography,
+          density: $theme-density
+        )
+    ),
+    (
+      custom-colors: (
+        survey-background: var(--mat-app-background-color),
+        survey-font: var(--mat-app-text-color),
+        survey-caption-helper: #f26030,
+        survey-caption-delimiter: #26292936,
+        survey-red: #a71f2a,
+      )
+    )
+);
+
+$theme-cyan-orange-dark: map-merge(
+    mat.define-theme(
+        (
+          color: (
+            theme-type: dark,
+            primary: mat.$cyan-palette,
+            tertiary: mat.$orange-palette,
+          ),
+          typography: $theme-typography,
+          density: $theme-density
+        )
+    ),
+    (
+      custom-colors: (
+        survey-background: var(--mat-app-background-color),
+        survey-font: var(--mat-app-text-color),
+        survey-caption-helper: #f26030,
+        survey-desktop-input-color: #9a9a9a,
+        survey-caption-delimiter: #26292936,
+        survey-red: #a71f2a,
+      )
+    )
+);

package/styles/theme/rose.red.scss

@@ -0,0 +1,54 @@
+@use "@angular/material" as mat;
+
+$theme-density: (scale:-1);
+$theme-typography: (
+  brand-family: 'Roboto',
+  bold-weight: 900
+);
+
+$theme-rose-red-light: map-merge(
+    mat.define-theme(
+        (
+          color: (
+            theme-type: light,
+            primary: mat.$rose-palette,
+            tertiary: mat.$red-palette,
+          ),
+          typography: $theme-typography,
+          density: $theme-density
+        )
+    ),
+    (
+      custom-colors: (
+        survey-background: var(--mat-app-background-color),
+        survey-font: var(--mat-app-text-color),
+        survey-caption-helper: #f26030,
+        survey-caption-delimiter: #26292936,
+        survey-red: #a71f2a,
+      )
+    )
+);
+
+$theme-rose-red-dark: map-merge(
+    mat.define-theme(
+        (
+          color: (
+            theme-type: dark,
+            primary: mat.$rose-palette,
+            tertiary: mat.$red-palette,
+          ),
+          typography: $theme-typography,
+          density: $theme-density
+        )
+    ),
+    (
+      custom-colors: (
+        survey-background: var(--mat-app-background-color),
+        survey-font: var(--mat-app-text-color),
+        survey-caption-helper: #f26030,
+        survey-desktop-input-color: #9a9a9a,
+        survey-caption-delimiter: #26292936,
+        survey-red: #a71f2a,
+      )
+    )
+);