@apolitical/component-library 8.11.2-oa.2 → 8.11.3-lrn-102

package/styles/base/form/_checkbox.scss

@@ -12,41 +12,43 @@ $pretty-checkbox: (
 );
 
 @layer components {
-  .pretty-checkbox {
-    width: px-to-rem(get-map($pretty-checkbox, 'width'));
-    height: px-to-rem(get-map($pretty-checkbox, 'width'));
-    position: absolute;
-    top: px-to-rem(get-map($pretty-checkbox, 'top'));
-    inset-inline-start: 0;
-    border: px-to-rem(get-map($pretty-checkbox, 'border')) solid
-      get-map($theme, 'form_field_border');
-    border-radius: px-to-rem(get-map($pretty-checkbox, 'border-radius'));
-    box-sizing: border-box;
-    outline: none;
-    z-index: 10;
+  .v1styles {
+    .pretty-checkbox {
+      width: px-to-rem(get-map($pretty-checkbox, 'width'));
+      height: px-to-rem(get-map($pretty-checkbox, 'width'));
+      position: absolute;
+      top: px-to-rem(get-map($pretty-checkbox, 'top'));
+      inset-inline-start: 0;
+      border: px-to-rem(get-map($pretty-checkbox, 'border')) solid
+        get-map($theme, 'form_field_border');
+      border-radius: px-to-rem(get-map($pretty-checkbox, 'border-radius'));
+      box-sizing: border-box;
+      outline: none;
+      z-index: 10;
 
-    input:focus + &,
-    button:focus & {
-      box-shadow: $outline get-map($theme, 'default_focus');
-    }
+      input:focus + &,
+      button:focus & {
+        box-shadow: $outline get-map($theme, 'default_focus');
+      }
 
-    input:checked + &,
-    .selected & {
-      background: get-map($theme, 'form_checkbox_bg');
-      border-color: get-map($theme, 'form_checkbox_border');
+      input:checked + &,
+      .selected & {
+        background: get-map($theme, 'form_checkbox_bg');
+        border-color: get-map($theme, 'form_checkbox_border');
 
-      &:not(.radio)::before {
-        @include image('icons/tick.svg', true);
+        &:not(.radio)::before {
+          @include image('icons/tick.svg', true);
 
-        content: '';
-        width: px-to-rem(get-map($pretty-checkbox, 'tick-width'));
-        height: px-to-rem(get-map($pretty-checkbox, 'tick-height'));
-        background: get-map($theme, 'form_checkbox_icon');
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        margin-top: px-to-rem(get-map($pretty-checkbox, 'margin-top'));
-        margin-left: px-to-rem(get-map($pretty-checkbox, 'margin-left'));
+          content: '';
+          width: px-to-rem(get-map($pretty-checkbox, 'tick-width'));
+          height: px-to-rem(get-map($pretty-checkbox, 'tick-height'));
+          background: get-map($theme, 'form_checkbox_icon');
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          margin-top: px-to-rem(get-map($pretty-checkbox, 'margin-top'));
+          margin-left: px-to-rem(get-map($pretty-checkbox, 'margin-left'));
+        }
       }
     }
   }

package/styles/base/form/_fields.scss

@@ -38,77 +38,79 @@ $character-limit: (
 }
 
 @layer base {
-  ::placeholder {
-    color: get-map($theme, 'form_input_placeholder');
-    opacity: 1;
-  }
+  .v1styles {
+    ::placeholder {
+      color: get-map($theme, 'form_input_placeholder');
+      opacity: 1;
+    }
 
-  input,
-  .input,
-  textarea {
-    @include field-styling;
+    input,
+    .input,
+    textarea {
+      @include field-styling;
 
-    width: 100%;
-    padding: px-to-rem(get-map($field, 'padding-vertical'))
-      px-to-rem(get-map($field, 'padding-horizontal'));
-    font-size: px-to-rem(get-map($field, 'font-size'));
-    color: get-map($theme, 'form_input');
-    line-height: px-to-rem(get-map($field, 'line-height'));
+      width: 100%;
+      padding: px-to-rem(get-map($field, 'padding-vertical'))
+        px-to-rem(get-map($field, 'padding-horizontal'));
+      font-size: px-to-rem(get-map($field, 'font-size'));
+      color: get-map($theme, 'form_input');
+      line-height: px-to-rem(get-map($field, 'line-height'));
 
-    &.autoresize {
-      @include transition(height, 0.5s);
+      &.autoresize {
+        @include transition(height, 0.5s);
 
-      min-height: px-to-rem(get-map($autoresize, 'height'));
-      overflow: hidden;
+        min-height: px-to-rem(get-map($autoresize, 'height'));
+        overflow: hidden;
+
+        &:empty,
+        &.single-line {
+          // This is to override the inline styles for the height
+          height: px-to-rem(get-map($autoresize, 'height')) !important;
+        }
 
-      &:empty,
-      &.single-line {
-        // This is to override the inline styles for the height
-        height: px-to-rem(get-map($autoresize, 'height')) !important;
+        &[data-character-limit] {
+          &:focus,
+          &:focus-within {
+            padding-right: px-to-rem(
+              get-map($character-limit, 'max-width') +
+                get-map($character-limit, 'padding-horizontal')
+            );
+          }
+        }
       }
 
-      &[data-character-limit] {
+      &:not(.autoresize)[data-character-limit] {
         &:focus,
         &:focus-within {
-          padding-right: px-to-rem(
-            get-map($character-limit, 'max-width') +
-              get-map($character-limit, 'padding-horizontal')
-          );
+          padding-bottom: px-to-rem(get-map($character-limit, 'padding-bottom'));
         }
       }
-    }
-
-    &:not(.autoresize)[data-character-limit] {
-      &:focus,
-      &:focus-within {
-        padding-bottom: px-to-rem(get-map($character-limit, 'padding-bottom'));
-      }
-    }
 
-    // Remove default styling, for consistency
-    &[type='search'] {
-      &::-ms-clear {
-        width: 0;
-        height: 0;
-        display: none;
-      }
+      // Remove default styling, for consistency
+      &[type='search'] {
+        &::-ms-clear {
+          width: 0;
+          height: 0;
+          display: none;
+        }
 
-      &::-ms-reveal {
-        width: 0;
-        height: 0;
-        display: none;
-      }
+        &::-ms-reveal {
+          width: 0;
+          height: 0;
+          display: none;
+        }
 
-      &::-webkit-search-decoration,
-      &::-webkit-search-cancel-button,
-      &::-webkit-search-results-button,
-      &::-webkit-search-results-decoration {
-        display: none;
+        &::-webkit-search-decoration,
+        &::-webkit-search-cancel-button,
+        &::-webkit-search-results-button,
+        &::-webkit-search-results-decoration {
+          display: none;
+        }
       }
     }
-  }
 
-  textarea {
-    resize: none;
+    textarea {
+      resize: none;
+    }
   }
 }

package/styles/base/form/_form.scss

@@ -5,25 +5,27 @@ $base-form: (
 );
 
 @layer components {
-  .form {
-    width: 100%;
-    position: relative;
-    padding: px-to-rem(get-map($base-form, 'padding'));
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    box-sizing: border-box;
+  .v1styles {
+    .form {
+      width: 100%;
+      position: relative;
+      padding: px-to-rem(get-map($base-form, 'padding'));
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: space-between;
+      box-sizing: border-box;
 
-    .error {
-      font-style: italic;
-    }
+      .error {
+        font-style: italic;
+      }
 
-    .cta {
-      width: 100%;
-      text-align: right;
+      .cta {
+        width: 100%;
+        text-align: right;
 
-      &.center {
-        text-align: center;
+        &.center {
+          text-align: center;
+        }
       }
     }
   }

package/styles/base/form/_labels.scss

@@ -1,13 +1,15 @@
 @import './../../functions', './../../variables';
 
 @layer base {
-  label,
-  .legend-as-label {
-    font-weight: 900;
+  .v1styles {
+    label,
+    .legend-as-label {
+      font-weight: 900;
 
-    small {
-      color: get-map($theme, 'form_label-small');
-      font-weight: inherit;
+      small {
+        color: get-map($theme, 'form_label-small');
+        font-weight: inherit;
+      }
     }
   }
 }

package/styles/base/form/_radio.scss

@@ -8,26 +8,28 @@ $radio-inner: (
 );
 
 @layer components {
-  .pretty-checkbox.radio {
-    border-radius: 50%;
+  .v1styles {
+    .pretty-checkbox.radio {
+      border-radius: 50%;
 
-    input:checked + &,
-    .selected & {
-      border: px-to-rem(get-map($radio, 'border')) solid
-        get-map($theme, 'form_checkbox_bg');
-      background: none;
+      input:checked + &,
+      .selected & {
+        border: px-to-rem(get-map($radio, 'border')) solid
+          get-map($theme, 'form_checkbox_bg');
+        background: none;
 
-      &::after {
-        content: '';
-        display: block;
-        width: px-to-rem(get-map($radio-inner, 'width'));
-        height: px-to-rem(get-map($radio-inner, 'width'));
-        background-color: get-map($theme, 'form_checkbox_bg');
-        border-radius: 50%;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+        &::after {
+          content: '';
+          display: block;
+          width: px-to-rem(get-map($radio-inner, 'width'));
+          height: px-to-rem(get-map($radio-inner, 'width'));
+          background-color: get-map($theme, 'form_checkbox_bg');
+          border-radius: 50%;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
       }
     }
   }

package/styles/base/form/_search-button.scss

@@ -6,27 +6,29 @@ $search-icon: (
 );
 
 @layer base {
-  button.search {
-    width: px-to-rem(get-map($search-icon, 'width'));
-    height: px-to-rem(get-map($search-icon, 'height'));
-    background: transparent;
-    margin: 0;
-    padding: 0;
-    border: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    &::before {
-      @include transition(background, 0.3s, ease);
-      @include image('icons/magnifying-glass.svg', true);
-
-      content: '';
+  .v1styles {
+    button.search {
       width: px-to-rem(get-map($search-icon, 'width'));
       height: px-to-rem(get-map($search-icon, 'height'));
-      background: get-map($theme, 'form_search-button_bg');
-      display: block;
+      background: transparent;
+      margin: 0;
+      padding: 0;
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+
+      &::before {
+        @include transition(background, 0.3s, ease);
+        @include image('icons/magnifying-glass.svg', true);
+
+        content: '';
+        width: px-to-rem(get-map($search-icon, 'width'));
+        height: px-to-rem(get-map($search-icon, 'height'));
+        background: get-map($theme, 'form_search-button_bg');
+        display: block;
+      }
     }
   }
 }

package/styles/reset/_reset.scss

@@ -2,112 +2,108 @@
  * https://meyerweb.com/eric/tools/css/reset/ */
 
 @layer reset {
-  html,
-  body,
-  div,
-  span,
-  applet,
-  object,
-  iframe,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  blockquote,
-  pre,
-  a,
-  abbr,
-  acronym,
-  address,
-  big,
-  cite,
-  code,
-  del,
-  dfn,
-  em,
-  img,
-  ins,
-  kbd,
-  q,
-  s,
-  samp,
-  small,
-  strike,
-  strong,
-  sub,
-  sup,
-  tt,
-  var,
-  b,
-  u,
-  i,
-  center,
-  dl,
-  dt,
-  dd,
-  ol,
-  ul,
-  li,
-  fieldset,
-  form,
-  label,
-  legend,
-  table,
-  caption,
-  tbody,
-  tfoot,
-  thead,
-  tr,
-  th,
-  td,
-  article,
-  aside,
-  canvas,
-  details,
-  embed,
-  figure,
-  figcaption,
-  footer,
-  header,
-  hgroup,
-  menu,
-  nav,
-  output,
-  ruby,
-  section,
-  summary,
-  time,
-  mark,
-  audio,
-  video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    vertical-align: baseline;
-  }
+  .v1styles {
+    &,
+    div,
+    span,
+    applet,
+    object,
+    iframe,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    blockquote,
+    pre,
+    a,
+    abbr,
+    acronym,
+    address,
+    big,
+    cite,
+    code,
+    del,
+    dfn,
+    em,
+    img,
+    ins,
+    kbd,
+    q,
+    s,
+    samp,
+    small,
+    strike,
+    strong,
+    sub,
+    sup,
+    tt,
+    var,
+    b,
+    u,
+    i,
+    center,
+    dl,
+    dt,
+    dd,
+    ol,
+    ul,
+    li,
+    fieldset,
+    form,
+    label,
+    legend,
+    table,
+    caption,
+    tbody,
+    tfoot,
+    thead,
+    tr,
+    th,
+    td,
+    article,
+    aside,
+    canvas,
+    details,
+    embed,
+    figure,
+    figcaption,
+    footer,
+    header,
+    hgroup,
+    menu,
+    nav,
+    output,
+    ruby,
+    section,
+    summary,
+    time,
+    mark,
+    audio,
+    video {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      vertical-align: baseline;
+    }
 
-  article,
-  aside,
-  details,
-  figcaption,
-  figure,
-  footer,
-  header,
-  hgroup,
-  menu,
-  nav,
-  section {
-    display: block;
-  }
+    article,
+    aside,
+    details,
+    figcaption,
+    figure,
+    footer,
+    header,
+    hgroup,
+    menu,
+    nav,
+    section {
+      display: block;
+    }
 
-  html {
     font-size: 100%;
-  }
-
-  body {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
 
@@ -116,29 +112,29 @@
     text-size-adjust: 100%;
     text-rendering: optimizelegibility;
     line-height: 1;
-  }
 
-  ul {
-    list-style: disc;
-  }
+    ul {
+      list-style: disc;
+    }
 
-  ol {
-    list-style: decimal;
-  }
+    ol {
+      list-style: decimal;
+    }
 
-  blockquote,
-  q {
-    quotes: none;
+    blockquote,
+    q {
+      quotes: none;
 
-    &::before,
-    &::after {
-      content: '';
-      content: none;
+      &::before,
+      &::after {
+        content: '';
+        content: none;
+      }
     }
-  }
 
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
+    table {
+      border-collapse: collapse;
+      border-spacing: 0;
+    }
   }
 }