@carefirst/library 1.0.3 → 1.0.6

package/public/styles/font.scss

@@ -1,73 +1,73 @@
 @font-face {
   font-family: 'Mulish';
   font-weight: 200;
-  src: url(/assets/fonts/Mulish-200.ttf) format('truetype');
+  src: url(./fonts/Mulish-200.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Mulish';
   font-weight: 300;
-  src: url(/assets/fonts/Mulish-300.ttf) format('truetype');
+  src: url(./fonts/Mulish-300.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Mulish';
   font-weight: 400;
-  src: url(/assets/fonts/Mulish-400.ttf) format('truetype');
+  src: url(./fonts/Mulish-400.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Mulish';
   font-weight: 500;
-  src: url(/assets/fonts/Mulish-500.ttf) format('truetype');
+  src: url(./fonts/Mulish-500.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Mulish';
   font-weight: 600;
-  src: url(/assets/fonts/Mulish-600.ttf) format('truetype');
+  src: url(./fonts/Mulish-600.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Mulish';
   font-weight: 700;
-  src: url(/assets/fonts/Mulish-700.ttf) format('truetype');
+  src: url(./fonts/Mulish-700.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Mulish';
   font-weight: 800;
-  src: url(/assets/fonts/Mulish-800.ttf) format('truetype');
+  src: url(./fonts/Mulish-800.ttf) format('truetype');
 }
 @font-face {
   font-family: 'Mulish';
   font-weight: 900;
-  src: url(/assets/fonts/Mulish-900.ttf) format('truetype');
+  src: url(./fonts/Mulish-900.ttf) format('truetype');
 }
 //--- Roboto
 @font-face {
   font-family: 'Roboto';
   font-weight: 100;
-  src: url(/assets/fonts/Roboto-100.woff2) format('woff2');
+  src: url(./fonts/Roboto-100.woff2) format('woff2');
 }
 @font-face {
   font-family: 'Roboto';
   font-weight: 300;
-  src: url(/assets/fonts/Roboto-300.woff2) format('woff2');
+  src: url(./fonts/Roboto-300.woff2) format('woff2');
 }
 @font-face {
   font-family: 'Roboto';
   font-weight: 400;
-  src: url(/assets/fonts/Roboto-400.woff2) format('woff2');
+  src: url(./fonts/Roboto-400.woff2) format('woff2');
 }
 @font-face {
   font-family: 'Roboto';
   font-weight: 500;
-  src: url(/assets/fonts/Roboto-500.woff2) format('woff2');
+  src: url(./fonts/Roboto-500.woff2) format('woff2');
 }
 @font-face {
   font-family: 'Roboto';
   font-weight: 700;
-  src: url(/assets/fonts/Roboto-700.woff2) format('woff2');
+  src: url(./fonts/Roboto-700.woff2) format('woff2');
 }
 @font-face {
   font-family: 'Roboto';
   font-weight: 900;
-  src: url(/assets/fonts/Roboto-900.woff2) format('woff2');
+  src: url(./fonts/Roboto-900.woff2) format('woff2');
 }
 
 /*===============================================
@@ -75,10 +75,9 @@
 ===============================================*/
 
 :root {
-  --cf-app-text-color-default: #4a4a4a;
+  --cf-app-text-color-default: #000;
   --cf-app-text-color-light: #fff;
-  --cf-app-text-color-alt1: #6b6b6b;
-  --cf-app-text-color-alt2: #9d9d9d;
+  --cf-app-text-color-grey: #6b6b6b;
 }
 
 /*===============================================
@@ -105,7 +104,7 @@ h4 {
   font-weight: 900;
   margin: 0;
   display: inline-block;
-  color: var(--cf-app-color-primary);
+  color: var(--cf-app-text-color-default);
 }
 
 h1.light,
@@ -115,6 +114,13 @@ h4.light {
   color: var(--cf-app-text-color-light);
 }
 
+h1.grey,
+h2.grey,
+h3.grey,
+h4.grey {
+  color: var(--cf-app-text-color-grey);
+}
+
 /*================== Mobile ==================*/
 h1 {
   font-size: 4.2rem;
@@ -166,14 +172,18 @@ p {
   color: var(--cf-app-color-primary);
 }
 
-p[class^='body-'].bold {
+p.bold {
   font-weight: 500;
 }
 
-p[class^='body-'].light {
+p.light {
   color: var(--cf-app-text-color-light);
 }
 
+p.grey {
+  color: var(--cf-app-text-color-grey);
+}
+
 /*================== Mobile ==================*/
 
 p.body-large {

package/public/styles/forms.scss

@@ -1,17 +1,47 @@
-//--- Design
+/*===============================================
+================== Form Items ===================
+===============================================*/
 ion-input,
 ion-textarea,
-ion-select {
+ion-select,
+ion-radio {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 1.6rem;
+  color: var(--cf-app-color-primary);
+  text-align: start;
+  --border-radius: 8px !important; //--- important overrides the fill option
+  --highlight-color-focused: var(--cf-app-color-primary);
+  --highlight-color-invalid: var(--cf-app-system-color-error);
+  --highlight-color-valid: var(--cf-app-color-primary);
+
   label {
-    font-family: "Roboto", sans-serif;
+    font-family: 'Roboto', sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 1.6rem;
-    color: var(--app-color-primary);
+    color: var(--cf-app-color-primary);
+    text-align: start;
+  }
+}
+
+/*===============================================
+================ Select Popovers ================
+===============================================*/
+
+ion-popover {
+  ion-select-popover {
+    ion-list[class*='popover'] {
+      background: var(--cf-app-background-light);
+      ion-item[class*='popover'] {
+        --background: transparent;
+        --border-radius: 8px;
+        --background-focused: var(--cf-app-color-accent);
+        --background-focused-opacity: 0.5;
+        --background-hover: var(--cf-app-color-primary);
+        --background-hover-opacity: 0.1;
+      }
+    }
   }
-  --border-radius: 8px !important; //--- important overrides the fill option
-  --highlight-color-focused: var(--app-color-primary) !important;
-  --highlight-color-invalid: var(app-system-color-error) !important;
-  --highlight-color-valid: var(--app-color-primary) !important;
-  text-align: start;
 }