@asd20/ui 3.2.1022 → 3.2.1024

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.1022",
+  "version": "3.2.1024",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/atoms/Asd20Checkbox/index.vue

@@ -2,8 +2,9 @@
   <div
     :class="[
       'asd20-checkbox',
-      { 'asd20-checkbox__no-icon': !icon && !checkbox },
-      { 'asd20-checkbox__checkbox': !icon && checkbox },
+      { 'asd20-checkbox__no-icon': !icon && !checkbox && !radio },
+      { 'asd20-checkbox__checkbox': !icon && checkbox && !radio  },
+      { 'asd20-checkbox__radio': !icon && !checkbox && radio  },
     ]"
   >
     <input
@@ -38,6 +39,7 @@ export default {
     count: { type: Number, default: 0 },
     icon: { type: String, default: '' },
     checkbox: { type: Boolean, default: false },
+    radio: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -161,6 +163,33 @@ export default {
       opacity: 1;
     }
   }
+  &.asd20-checkbox__radio {
+    label:before {
+      display: none;
+    }
+    label:after {
+      content: '';
+      display: block;
+      width: space(1);
+      height: space(1);
+      margin-right: space(-0.5);
+      flex-shrink: 0;
+      border-radius: 50%;
+      border: 2px solid var(--color__accent);
+      background: #fff;
+
+      order: 1;
+    }
+
+    input:checked + label:before {
+    }
+    input:checked + label:after {
+      border: 2px solid var(--color__accent);
+      box-shadow: inset 3px 3px 0px 0px #fff;
+      box-shadow: inset 0px 0px 0px 3px #fff;
+      background: var(--color__accent);
+    }
+  }
 
   input:focus + label:after {
     @include asd20-focus;

package/src/components/molecules/Asd20CheckboxList/index.vue

@@ -11,6 +11,7 @@
         :count="option.count"
         :description="option.description"
         :value="checkedValues.indexOf(option.value) > -1"
+        :radio="radio"
         @input="onInput($event, option)"
       />
       <slot
@@ -34,6 +35,7 @@ export default {
   props: {
     checkedValues: { type: Array, default: () => [] },
     options: { type: Array, default: () => [] },
+    radio: { type: Boolean, default: false },
   },
   methods: {
     onInput(checked, option) {

package/src/components/templates/Asd20ProfileTemplate/index.vue

@@ -695,13 +695,13 @@ export default {
   &__secondary-content {
     padding: space(1);
     display: flex;
-    flex-direction: column;
-    .asd20-school-details__academics-offerings {
-      max-width: 90%;
-      padding-bottom: 2rem;
-    }
-    .asd20-school-details__athletics-offerings {
-      margin-top: 2rem;
+    flex-wrap: wrap;
+    gap: space(1); /* modern flex gap */
+    /* single column by default */
+    .asd20-school-details__category-offerings {
+      flex: 1 1 100%;
+      max-width: 100%;
+      padding-right: 0; /* override any prior rule */
     }
   }
 
@@ -740,10 +740,14 @@ export default {
     &__secondary-content {
       padding: space(2);
       display: flex;
-      flex-direction: row;
-      .asd20-school-details__academics-offerings {
-        max-width: 60%;
-        padding-right: 2rem;
+      flex-wrap: wrap;
+      gap: space(1);
+
+      .asd20-school-details__category-offerings {
+        /* two columns: equal widths */
+        flex: 1 1 calc(50% - #{space(0.5)});
+        max-width: calc(50% - #{space(0.5)});
+        padding-right: 0;
       }
     }
   }
@@ -757,13 +761,6 @@ export default {
     .asd20-notification-group--floating {
       position: absolute;
       top: space(1);
-      // .bell {
-      //   span {
-      //     background: var(--color__accent);
-      //     top: -0.6em !important;
-      //     right: -0.6em !important;
-      //   }
-      // }
     }
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);
@@ -795,11 +792,20 @@ export default {
   .asd20-school-details {
     &__primary-content {
       padding: space(2);
+      padding-right: 0;
       .primary-section {
-        width: 30%;
+        width: 31%;
         padding: 0 1vw 3rem 1vw;
       }
     }
+    &__secondary-content {
+      padding: space(2);
+      padding-right: 0;
+      .asd20-school-details__category-offerings {
+        flex: 1 1 calc(32% - #{space(0.5)});
+        max-width: calc(32% - #{space(0.5)});
+      }
+    }
     .asd20-contact {
       padding: space(1) space(3);
     }