richie-education 2.24.0 → 2.25.0-b2.dev101

package/scss/objects/_form.scss

@@ -2,369 +2,28 @@
 // Form objects
 //
 
-//
-// For accessibility and user experience purposes, an input should be always
-// associated to a label.
-//
-//
 // Example of a form class structure:
 // .form
-//  .form-group
-//    .form-field
-//      .form-field__box
-//        .form-field__input
-//        .form-field__label
-//      .form-field__message--error
-//    .form-field
-//      .form-field__box
-//        .form-field__input
-//        .form-field__label
-//    .form-field
-//      .form-field__box
-//        .form-field__checkbox-input
-//        .form-field__checkbox-control
-//        .form-field__label
-//  .form-field
-//    .form-field__box
-//      .form-field__label
-//      .form-field__select-container
-//        .form-field__select-input
-//        .form-field__select-arrow
-
-@mixin input-base-style() {
-  -webkit-appearance: none;
-  appearance: none;
-  background: none;
-  border-radius: 4px;
-  border: 2px solid r-theme-val(form, input-border);
-  box-sizing: border-box;
-  color: r-theme-val(form, input-color);
-  min-height: 3rem;
-  display: block;
-  padding: 1rem 1rem 0 1rem;
-  width: 100%;
-
-  &::placeholder {
-    color: transparent;
-  }
-
-  &:focus {
-    border-color: r-theme-val(form, input-border-focus);
-    box-shadow: 0 0 0 2px r-theme-val(form, input-outline);
-    outline: none;
-  }
-
-  &[disabled] {
-    background-color: r-theme-val(form, input-disabled-background);
-    cursor: not-allowed;
-  }
-}
-
+//  .form-row
+//    .c__field ( should be form-field when cunningham is improved)
 .form {
-  &-group {
+  .c__field {
+    width: auto;
     display: flex;
-    flex-direction: row;
-
-    & > .form-field {
-      flex: 1;
-      margin-bottom: 2rem;
-      margin-left: 0.5rem;
-      margin-right: 0.5rem;
-    }
-
-    margin: 0 -0.5rem;
+    flex: 1;
   }
 
-  &-field {
-    font-family: $r-font-family-hind;
-    font-size: 1rem;
-    line-height: 1rem;
-    margin: 0;
-    position: relative;
-
-    &:hover {
-      // Wanted to use &__input syntax but it compiles as .form-field:hover__input :(
-      .form-field__input,
-      .form-field__textarea,
-      .form-field__select-input,
-      .form-field__radio-control,
-      .form-field__checkbox-control {
-        border-color: r-theme-val(form, input-hover-color);
-      }
-
-      .form-field__checkbox-input + .form-field__label,
-      .form-field__radio-input + .form-field__label {
-        color: r-theme-val(form, input-hover-color);
-      }
-    }
-
-    &:not(:last-child) {
-      margin-bottom: 2rem;
-    }
-
-    // Common elements
-    &__box {
-      display: block;
-      position: relative;
-    }
-
-    &__label {
-      color: r-theme-val(form, input-placeholder);
-      cursor: pointer;
-      margin: 0;
-      position: relative;
-    }
-
-    // Text inputs & Textarea
-    &__input,
-    &__textarea {
-      @include input-base-style;
-    }
-
-    &__textarea {
-      padding-top: 1.5rem;
-    }
-
-    &__input + &__label,
-    &__textarea + &__label {
-      left: 0;
-      margin: 0 1rem;
-      max-width: calc(100% - 2rem);
-      overflow: hidden;
-      padding: 0.33rem 0;
-      pointer-events: none;
-      position: absolute;
-      text-overflow: ellipsis;
-      transform-origin: top left;
-      transition: transform 300ms $r-ease-out;
-      white-space: nowrap;
-      width: 100%;
-    }
-
-    &__input + &__label {
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    &__textarea + &__label {
-      top: 0.5rem;
-      z-index: 1;
-    }
-
-    &__input:focus + &__label,
-    &__input:not(:placeholder-shown) + &__label {
-      transform: scale(0.66) translateY(-100%);
-    }
-
-    &__textarea:focus + &__label,
-    &__textarea:not(:placeholder-shown) + &__label {
-      transform: scale(0.66) translateY(-0.25rem);
-    }
-
-    // Checkbox & Radio
-    &__checkbox-input,
-    &__radio-input {
-      opacity: 0;
-      position: absolute;
-      z-index: -1;
-
-      &[disabled] ~ label {
-        cursor: not-allowed;
-
-        span {
-          background-color: r-theme-val(form, input-disabled-background);
-        }
-      }
-    }
-
-    &__checkbox-input + &__label,
-    &__radio-input + &__label {
-      color: r-theme-val(form, input-color);
-    }
-
-    &__checkbox-input:focus + &__label > &__checkbox-control,
-    &__radio-input:focus + &__label > &__radio-control {
-      box-shadow: 0 0 0 2px r-theme-val(form, input-outline);
-    }
-
-    &__checkbox-control,
-    &__radio-control {
-      $tick-size: 1.125rem;
-      align-items: center;
-      background-color: r-theme-val(form, input-unchecked-background);
-      border-radius: 100vw;
-      border: 2px solid r-theme-val(form, input-unchecked-border);
-      box-sizing: border-box;
-      color: r-theme-val(form, input-unchecked-color);
-      display: inline-flex;
-      height: $tick-size;
-      justify-content: center;
-      margin-right: 0.625rem;
-      position: relative;
-      vertical-align: middle;
-      width: $tick-size;
-    }
-
-    &__checkbox-control {
-      svg {
-        fill: currentColor;
-        max-height: 100%;
-        transform: translate(-$onepixel * 0.45, $onepixel * 0.45);
-        width: 65%;
-      }
-    }
-
-    &__radio-control:before {
-      background: transparent;
-      border-radius: 100vw;
-      content: '';
-      display: block;
-      height: 60%;
-      left: 50%;
-      position: absolute;
-      top: 50%;
-      transform-origin: center center;
-      transform: translate(-50%, -50%) scale(calc(100 / 60));
-      transition: transform 400ms $r-ease-out;
-      width: 60%;
-    }
-
-    &__checkbox-input:checked + &__label > &__checkbox-control,
-    &__radio-input:checked + &__label > &__radio-control {
-      background-color: r-theme-val(form, input-checked-background);
-      border-color: r-theme-val(form, input-checked-border);
-      color: r-theme-val(form, input-checked-color);
-    }
-
-    &__radio-input:checked + &__label > &__radio-control:before {
-      background-color: r-theme-val(form, input-checked-color);
-      transform: translate(-50%, -50%) scale(1);
-    }
-
-    // Select
-    &__select-container {
-      display: block;
-      position: relative;
-    }
-
-    &__select-input {
-      @include input-base-style;
-      background-color: transparent;
-      cursor: pointer;
-      line-height: 1em;
-      padding: 1rem 1rem 0.75rem 1rem;
-      position: relative;
-    }
-
-    &__select-input + &__select-arrow {
-      border-left: 6px solid transparent;
-      border-radius: 6px;
-      border-right: 6px solid transparent;
-      border-top: 6px solid currentColor;
-      height: 6px;
-      pointer-events: none;
-      position: absolute;
-      right: 6px;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 6px;
-    }
-
-    &__label + &__select-container {
-      margin-top: 0.5rem;
-    }
-
-    // Message
-    &__message {
-      color: r-theme-val(form, message-color);
-      display: inline-block;
-      font-size: 0.875rem;
-      line-height: 1.75em;
-      padding: 0 2px;
-      text-align: justify;
-
-      &__icon {
-        fill: currentColor;
-        height: 1em;
-        margin-right: 0.25rem;
-        width: 1em;
-      }
-    }
-
-    // == Modifiers
-    &--minimal {
-      display: inline-block;
-      margin: 0;
-      width: inherit;
-
-      .form-field__label {
-        position: absolute;
-        left: -9999rem;
-      }
-
-      .form-field__select-container {
-        display: inline-block;
-        margin-top: 0;
-      }
-
-      .form-field__select-input {
-        border: none;
-        box-sizing: content-box;
-        min-height: inherit;
-        padding: 0 1.5rem 0 0;
-        text-overflow: ellipsis;
-      }
-    }
-
-    &--align-right {
-      text-align: right;
-
-      .form-field__input,
-      .form-field__select-input,
-      .form-field__textarea {
-        text-align: right;
-      }
-
-      .form-field__input + .form-field__label,
-      .form-field__textarea + .form-field__label {
-        left: inherit;
-        right: 0;
-        transform-origin: top right;
-      }
-    }
-
-    // Required
-    &--required &__label:after {
-      color: r-theme-val(form, required-note-color);
-      content: '*';
-      position: absolute;
-      vertical-align: super;
-    }
-
-    // Error
-    &--error {
-      .form-field__label {
-        color: r-theme-val(form, input-color-error);
-      }
-
-      .form-field__input,
-      .form-field__textarea,
-      .form-field__select-input,
-      .form-field__radio-control,
-      .form-field__checkbox-control {
-        border-color: r-theme-val(form, input-border-error);
-      }
-
-      .form-field__message {
-        color: r-theme-val(form, input-color-error);
-      }
+  &-row {
+    display: flex;
+    flex-direction: row;
+    gap: rem-calc(16px);
+    margin-bottom: rem-calc(10px);
+    &:last-child {
+      margin-bottom: 0;
     }
-  }
 
-  &__required-fields-note {
-    font-style: italic;
-    span {
-      color: r-theme-val(form, required-note-color);
+    @include media-breakpoint-down(xs) {
+      flex-direction: column;
     }
   }
 }

package/scss/objects/_index.scss

@@ -2,6 +2,7 @@
 @import './banner';
 @import './breadcrumbs';
 @import './dashboard';
+@import './list';
 @import './course_glimpses';
 @import './blogpost_glimpses';
 @import './organization_glimpses';

package/scss/objects/_list.scss

@@ -0,0 +1,8 @@
+.list {
+  &__count-description {
+    flex-basis: 100%; // Should not wrap as mozaic list elements
+    color: r-theme-val(course-glimpse-list, count-color);
+    text-align: right;
+    align-self: self-end;
+  }
+}

package/scss/objects/_organization_glimpses.scss

@@ -131,18 +131,12 @@
   }
 
   &__logo {
-    position: relative;
+    height: 100%;
     width: 100%;
-    padding-bottom: 56.25%; // Aspect ratio 16/9
 
     & > img {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      width: 100%;
       height: 100%;
+      width: 100%;
       object-fit: contain;
       object-position: center;
     }

package/scss/objects/_selector.scss

@@ -66,6 +66,7 @@
       min-width: 10rem;
       padding: 0.5rem 1.5rem;
       text-align: left;
+      white-space: nowrap;
 
       &:hover {
         color: r-theme-val(selector, hover-color);

package/scss/trumps/_bootstrap.scss

@@ -0,0 +1,4 @@
+// Without this, bootstrap overrides Cunningham buttons style.
+a.c__button:hover {
+  text-decoration: none;
+}

package/scss/vendors/css/cunningham-tokens.css

@@ -1,15 +1,5 @@
 :root {
-  --c--theme--colors--primary-text: #ffffff;
-  --c--theme--colors--primary-100: #ffcad1;
-  --c--theme--colors--primary-200: #f19597;
-  --c--theme--colors--primary-300: #e86a6f;
-  --c--theme--colors--primary-400: #f2444b;
-  --c--theme--colors--primary-500: #f72c30;
-  --c--theme--colors--primary-600: #e81f2f;
-  --c--theme--colors--primary-700: #d60f29;
-  --c--theme--colors--primary-800: #c90022;
-  --c--theme--colors--primary-900: #bb0014;
-  --c--theme--colors--secondary-text: #555f6b;
+  --c--theme--colors--secondary-text: var(--c--theme--colors--greyscale-700);
   --c--theme--colors--secondary-100: #eff8ff;
   --c--theme--colors--secondary-200: #eaf3fd;
   --c--theme--colors--secondary-300: #e2ebf5;
@@ -19,7 +9,16 @@
   --c--theme--colors--secondary-700: #656c75;
   --c--theme--colors--secondary-800: #454d55;
   --c--theme--colors--secondary-900: #242b32;
-  --c--theme--colors--greyscale-000: #ffffff;
+  --c--theme--colors--info-text: var(--c--theme--colors--greyscale-000);
+  --c--theme--colors--info-100: #ebf2fc;
+  --c--theme--colors--info-200: #8cb5ea;
+  --c--theme--colors--info-300: #5894e1;
+  --c--theme--colors--info-400: #377fdb;
+  --c--theme--colors--info-500: #055fd2;
+  --c--theme--colors--info-600: #0556bf;
+  --c--theme--colors--info-700: #044395;
+  --c--theme--colors--info-800: #033474;
+  --c--theme--colors--info-900: #022858;
   --c--theme--colors--greyscale-100: #fafafb;
   --c--theme--colors--greyscale-200: #f3f4f4;
   --c--theme--colors--greyscale-300: #e7e8ea;
@@ -29,7 +28,16 @@
   --c--theme--colors--greyscale-700: #555f6b;
   --c--theme--colors--greyscale-800: #303c4b;
   --c--theme--colors--greyscale-900: #0c1a2b;
-  --c--theme--colors--success-text: #ffffff;
+  --c--theme--colors--greyscale-000: #ffffff;
+  --c--theme--colors--primary-100: #ffcad1;
+  --c--theme--colors--primary-200: #f19597;
+  --c--theme--colors--primary-300: #e86a6f;
+  --c--theme--colors--primary-400: #f2444b;
+  --c--theme--colors--primary-500: #f72c30;
+  --c--theme--colors--primary-600: #e81f2f;
+  --c--theme--colors--primary-700: #d60f29;
+  --c--theme--colors--primary-800: #c90022;
+  --c--theme--colors--primary-900: #bb0014;
   --c--theme--colors--success-100: #effcd3;
   --c--theme--colors--success-200: #dbfaa9;
   --c--theme--colors--success-300: #bef27c;
@@ -39,17 +47,6 @@
   --c--theme--colors--success-700: #419a14;
   --c--theme--colors--success-800: #2c7c0c;
   --c--theme--colors--success-900: #1d6607;
-  --c--theme--colors--info-text: #ffffff;
-  --c--theme--colors--info-100: #ebf2fc;
-  --c--theme--colors--info-200: #8cb5ea;
-  --c--theme--colors--info-300: #5894e1;
-  --c--theme--colors--info-400: #377fdb;
-  --c--theme--colors--info-500: #055fd2;
-  --c--theme--colors--info-600: #0556bf;
-  --c--theme--colors--info-700: #044395;
-  --c--theme--colors--info-800: #033474;
-  --c--theme--colors--info-900: #022858;
-  --c--theme--colors--warning-text: #ffffff;
   --c--theme--colors--warning-100: #fff8cd;
   --c--theme--colors--warning-200: #ffef9b;
   --c--theme--colors--warning-300: #ffe469;
@@ -59,7 +56,6 @@
   --c--theme--colors--warning-700: #b78702;
   --c--theme--colors--warning-800: #936901;
   --c--theme--colors--warning-900: #7a5400;
-  --c--theme--colors--danger-text: #ffffff;
   --c--theme--colors--danger-100: #f4b0b0;
   --c--theme--colors--danger-200: #ee8a8a;
   --c--theme--colors--danger-300: #e65454;
@@ -69,6 +65,10 @@
   --c--theme--colors--danger-700: #9b0000;
   --c--theme--colors--danger-800: #780000;
   --c--theme--colors--danger-900: #5c0000;
+  --c--theme--colors--primary-text: var(--c--theme--colors--greyscale-000);
+  --c--theme--colors--success-text: var(--c--theme--colors--greyscale-000);
+  --c--theme--colors--warning-text: var(--c--theme--colors--greyscale-000);
+  --c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000);
   --c--theme--colors--black: #090909;
   --c--theme--colors--dark-grey: #232323;
   --c--theme--colors--charcoal: #29303b;
@@ -106,6 +106,15 @@
   --c--theme--font--weights--black: 800;
   --c--theme--font--families--base: Hind;
   --c--theme--font--families--accent: Montserrat;
+  --c--theme--font--letterspacings--h1: normal;
+  --c--theme--font--letterspacings--h2: normal;
+  --c--theme--font--letterspacings--h3: normal;
+  --c--theme--font--letterspacings--h4: normal;
+  --c--theme--font--letterspacings--h5: 1px;
+  --c--theme--font--letterspacings--h6: normal;
+  --c--theme--font--letterspacings--l: normal;
+  --c--theme--font--letterspacings--m: normal;
+  --c--theme--font--letterspacings--s: normal;
   --c--theme--spacings--xl: 4rem;
   --c--theme--spacings--l: 3rem;
   --c--theme--spacings--b: 1.625rem;
@@ -116,4 +125,59 @@
   --c--theme--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
   --c--theme--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
   --c--theme--transitions--duration: 250ms;
+  --c--theme--breakpoints--xs: 0;
+  --c--theme--breakpoints--sm: 576px;
+  --c--theme--breakpoints--md: 768px;
+  --c--theme--breakpoints--lg: 992px;
+  --c--theme--breakpoints--xl: 1200px;
+  --c--theme--breakpoints--xxl: 1400px;
+  --c--components--button--font-family: Montserrat;
+}
+.cunningham-theme--dark {
+  --c--theme--colors--greyscale-100: #182536;
+  --c--theme--colors--greyscale-200: #303c4b;
+  --c--theme--colors--greyscale-300: #555f6b;
+  --c--theme--colors--greyscale-400: #79818a;
+  --c--theme--colors--greyscale-500: #9ea3aa;
+  --c--theme--colors--greyscale-600: #c2c6ca;
+  --c--theme--colors--greyscale-700: #e7e8ea;
+  --c--theme--colors--greyscale-800: #f3f4f4;
+  --c--theme--colors--greyscale-900: #fafafb;
+  --c--theme--colors--greyscale-000: #0c1a2b;
+  --c--theme--colors--primary-100: #3b4c62;
+  --c--theme--colors--primary-200: #4d6481;
+  --c--theme--colors--primary-300: #6381a6;
+  --c--theme--colors--primary-400: #7fa5d5;
+  --c--theme--colors--primary-500: #8cb5ea;
+  --c--theme--colors--primary-600: #a3c4ee;
+  --c--theme--colors--primary-700: #c3d8f4;
+  --c--theme--colors--primary-800: #dde9f8;
+  --c--theme--colors--primary-900: #f4f8fd;
+  --c--theme--colors--success-100: #eef8d7;
+  --c--theme--colors--success-200: #d9f1b2;
+  --c--theme--colors--success-300: #bde985;
+  --c--theme--colors--success-400: #a0e25d;
+  --c--theme--colors--success-500: #76d628;
+  --c--theme--colors--success-600: #5bb520;
+  --c--theme--colors--success-700: #43941a;
+  --c--theme--colors--success-800: #307414;
+  --c--theme--colors--success-900: #225d10;
+  --c--theme--colors--warning-100: #f7f3d5;
+  --c--theme--colors--warning-200: #f0e5aa;
+  --c--theme--colors--warning-300: #e8d680;
+  --c--theme--colors--warning-400: #e3c95f;
+  --c--theme--colors--warning-500: #d9b32b;
+  --c--theme--colors--warning-600: #bd9721;
+  --c--theme--colors--warning-700: #9d7b1c;
+  --c--theme--colors--warning-800: #7e6016;
+  --c--theme--colors--warning-900: #684d12;
+  --c--theme--colors--danger-100: #f8d0d0;
+  --c--theme--colors--danger-200: #f09898;
+  --c--theme--colors--danger-300: #f09898;
+  --c--theme--colors--danger-400: #ed8585;
+  --c--theme--colors--danger-500: #e96666;
+  --c--theme--colors--danger-600: #dd6666;
+  --c--theme--colors--danger-700: #c36666;
+  --c--theme--colors--danger-800: #ae6666;
+  --c--theme--colors--danger-900: #9d6666;
 }