q2-tecton-elements 1.10.4 → 1.10.7

package/dist/collection/components/q2-checkbox/styles.css

@@ -1,290 +1,266 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  font-family: inherit;
+  font-size: inherit;
 }
 
 :host(.sr),
 :host(.sr) button {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }
 
 .sr,
 .sr button {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
-
 :host {
-    display: block;
-    padding: var(--tct-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px))) 0;
+  display: block;
+  padding: var(--tct-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2, 10px))) 0;
 }
 
 label {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    --comp-checkbox-outer-stroke-color: var(
-        --tct-checkbox-outer-stroke-color,
-        var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))
-    );
-    --comp-checkbox-outer-fill-color: var(
-        --tct-checkbox-outer-fill-color,
-        var(--tct-white, var(--app-white, #ffffff))
-    );
-    --comp-checkbox-checked-color: var(
-        --tct-checkbox-check-stroke-color,
-        var(
-            --t-checkbox-fill,
-            var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))
-        )
-    );
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  --comp-checkbox-outer-stroke-color: var(
+      --tct-checkbox-outer-stroke-color,
+      var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))
+  );
+  --comp-checkbox-outer-fill-color: var(
+      --tct-checkbox-outer-fill-color,
+      var(--tct-white, var(--app-white, #ffffff))
+  );
+  --comp-checkbox-checked-color: var(
+      --tct-checkbox-check-stroke-color,
+      var(
+          --t-checkbox-fill,
+          var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))
+      )
+  );
 }
 
 input:disabled + label {
-    opacity: var(
-        --tct-checkbox-disabled-opacity,
-        var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))
-    );
+  opacity: var(--tct-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
 }
 
 .checkbox-icon {
-    height: var(--tct-checkbox-size, 20px);
-    width: var(--tct-checkbox-size, 20px);
-    border-radius: var(
-        --tct-checkbox-outer-border-radius,
-        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-    );
-    stroke: var(--comp-checkbox-outer-stroke-color);
-    color: var(--comp-checkbox-outer-stroke-color);
-    --t-icon-stroke-primary: var(--comp-checkbox-outer-stroke-color);
-    stroke-width: var(--tct-checkbox-outer-stroke-width, 2);
-    fill: var(--comp-checkbox-outer-fill-color);
-    flex-shrink: 0;
+  height: var(--tct-checkbox-size, 20px);
+  width: var(--tct-checkbox-size, 20px);
+  border-radius: var(--tct-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px)));
+  stroke: var(--comp-checkbox-outer-stroke-color);
+  color: var(--comp-checkbox-outer-stroke-color);
+  --t-icon-stroke-primary: var(--comp-checkbox-outer-stroke-color);
+  stroke-width: var(--tct-checkbox-outer-stroke-width, 2);
+  fill: var(--comp-checkbox-outer-fill-color);
+  flex-shrink: 0;
 }
 
 input:focus + label .checkbox-icon {
-    box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));
+  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff));
 }
 
 .checkbox-fill {
-    stroke: var(--comp-checkbox-checked-color);
+  stroke: var(--comp-checkbox-checked-color);
 }
 
 input:checked + label .checkbox-icon {
-    fill: var(--tct-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color));
-    stroke: var(--tct-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));
+  fill: var(--tct-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color));
+  stroke: var(--tct-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color));
 }
 
 input:focus + label .checkbox-icon {
-    stroke: var(--tct-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color));
+  stroke: var(--tct-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color));
 }
 
 .checked-fill {
-    stroke-width: var(--tct-checkbox-check-stroke-width, 2.5);
-    stroke-linecap: round;
-    stroke-linejoin: round;
+  stroke-width: var(--tct-checkbox-check-stroke-width, 2.5);
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
 .indeterminate-fill {
-    stroke-width: var(--tct-checkbox-indeterminate-stroke-width, 3.5);
+  stroke-width: var(--tct-checkbox-indeterminate-stroke-width, 3.5);
 }
 
 .q2-checkbox-label-content {
-    font-weight: var(--tct-checkbox-font-weight, 400);
-    flex: 1 1 auto;
-    width: calc(
-        100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px))
-    );
+  font-weight: var(--tct-checkbox-font-weight, 400);
+  flex: 1 1 auto;
+  width: calc( 100% - var(--tct-checkbox-size, 20px) - var(--tct-scale-2, var(--app-scale-2, 10px)) );
 }
 
 input:checked + label .q2-checkbox-label-content {
-    font-weight: var(--tct-checkbox-selected-font-weight, 600);
-    letter-spacing: var(--tct-checkbox-selected-letter-spacing, 0.25);
+  font-weight: var(--tct-checkbox-selected-font-weight, 600);
+  letter-spacing: var(--tct-checkbox-selected-letter-spacing, 0.25);
 }
 
-:host([type='favorite']) {
-    --scoped-checkbox-favorite-stroke-color: var(
-        --tct-checkbox-favorite-stroke-color,
-        var(--t-textA, rgba(77, 77, 77, 0.77))
-    );
-    --scoped-checkbox-favorite-fill-color: var(
-        --tct-checkbox-favorite-fill-color,
-        var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))
-    );
+:host([type=favorite]) {
+  --scoped-checkbox-favorite-stroke-color: var(
+      --tct-checkbox-favorite-stroke-color,
+      var(--t-textA, rgba(77, 77, 77, 0.77))
+  );
+  --scoped-checkbox-favorite-fill-color: var(
+      --tct-checkbox-favorite-fill-color,
+      var(--tct-stoplight-warning, var(--const-stoplight-warning, #f0b400))
+  );
 }
 
-:host([type='favorite']) .checkbox-icon {
-    --tct-icon-stroke-width: var(--tct-checkbox-favorite-stroke-width, 1);
-    --tct-icon-stroke-primary: var(--scoped-checkbox-favorite-stroke-color);
-    width: var(--tct-checkbox-size, 20px);
-    height: var(--tct-checkbox-size, 20px);
-    transition: fill var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),
-        color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)),
-        stroke var(--tct-tween-2, var(--app-tween-2, 0.4s ease));
+:host([type=favorite]) .checkbox-icon {
+  --tct-icon-stroke-width: var(--tct-checkbox-favorite-stroke-width, 1);
+  --tct-icon-stroke-primary: var(--scoped-checkbox-favorite-stroke-color);
+  width: var(--tct-checkbox-size, 20px);
+  height: var(--tct-checkbox-size, 20px);
+  transition: fill var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), color var(--tct-tween-2, var(--app-tween-2, 0.4s ease)), stroke var(--tct-tween-2, var(--app-tween-2, 0.4s ease));
 }
 
-:host([type='favorite']:focus-within) input + label .checkbox-icon,
-:host([type='favorite']:hover) input + label .checkbox-icon {
-    --tct-icon-stroke-primary: var(--scoped-checkbox-favorite-fill-color);
-    --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, 2);
+:host([type=favorite]:focus-within) input + label .checkbox-icon,
+:host([type=favorite]:hover) input + label .checkbox-icon {
+  --tct-icon-stroke-primary: var(--scoped-checkbox-favorite-fill-color);
+  --tct-icon-stroke-width: var(--tct-checkbox-favorite-hover-stroke-width, 2);
 }
 
-:host([type='favorite']) input:checked + label .checkbox-icon {
-    --tct-icon-stroke-primary: var(--scoped-checkbox-favorite-fill-color);
-    fill: var(--scoped-checkbox-favorite-fill-color);
-    transition: fill var(--tct-tween-1, var(--app-tween-1, 0.2s ease)),
-        color var(--tct-tween-1, var(--app-tween-1, 0.2s ease)),
-        stroke var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+:host([type=favorite]) input:checked + label .checkbox-icon {
+  --tct-icon-stroke-primary: var(--scoped-checkbox-favorite-fill-color);
+  fill: var(--scoped-checkbox-favorite-fill-color);
+  transition: fill var(--tct-tween-1, var(--app-tween-1, 0.2s ease)), color var(--tct-tween-1, var(--app-tween-1, 0.2s ease)), stroke var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
 }
 
-:host([type='favorite']:focus-within) input:checked + label .checkbox-icon,
-:host([type='favorite']:hover) input:checked + label .checkbox-icon {
-    --tct-icon-stroke-primary: var(--scoped-checkbox-favorite-stroke-color);
+:host([type=favorite]:focus-within) input:checked + label .checkbox-icon,
+:host([type=favorite]:hover) input:checked + label .checkbox-icon {
+  --tct-icon-stroke-primary: var(--scoped-checkbox-favorite-stroke-color);
 }
 
-:host([alignment='right']) label,
-:host([type='toggle']:not([alignment='left'])) label {
-    flex-flow: row-reverse;
+:host([alignment=right]) label,
+:host([type=toggle]:not([alignment=left])) label {
+  flex-flow: row-reverse;
 }
 
 .checkbox-icon,
-:host([type='toggle'][alignment='left']) .toggle-svg {
-    margin-right: var(--tct-scale-2, var(--app-scale-2, 10px));
-    margin-left: 0;
+:host([type=toggle][alignment=left]) .toggle-svg {
+  margin-right: var(--tct-scale-2, var(--app-scale-2, 10px));
+  margin-left: 0;
 }
 
-:host([alignment='right']) .checkbox-icon,
+:host([alignment=right]) .checkbox-icon,
 .toggle-svg {
-    margin-right: 0;
-    margin-left: var(--tct-scale-2, var(--app-scale-2, 10px));
+  margin-right: 0;
+  margin-left: var(--tct-scale-2, var(--app-scale-2, 10px));
 }
 
-:host([type='toggle']) .toggle-svg {
-    height: 30px;
-    width: 46px;
-    position: relative;
+:host([type=toggle]) .toggle-svg {
+  height: 30px;
+  width: 46px;
+  position: relative;
 }
 
-:host([type='toggle']) .toggle-track,
-:host([type='toggle']) .toggle-indicator {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-}
-:host([type='toggle']) .toggle-track {
-    fill: var(
-        --tct-checkbox-toggle-track-color,
-        var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))
-    );
-    height: 14px;
-    width: 46px;
+:host([type=toggle]) .toggle-track,
+:host([type=toggle]) .toggle-indicator {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-:host([type='toggle']) input:checked + label .toggle-track {
-    fill: var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));
-    opacity: 0.5;
+:host([type=toggle]) .toggle-track {
+  fill: var(--tct-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc)))));
+  height: 14px;
+  width: 46px;
 }
 
-:host([type='toggle']) .toggle-indicator {
-    transition: left var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
-    height: 30px;
-    width: 30px;
-    left: 0;
-    border-radius: 50%;
+:host([type=toggle]) input:checked + label .toggle-track {
+  fill: var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));
+  opacity: 0.5;
 }
 
-:host([type='toggle']) input:checked + label .toggle-indicator {
-    left: 21px;
+:host([type=toggle]) .toggle-indicator {
+  transition: left var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+  height: 30px;
+  width: 30px;
+  left: 0;
+  border-radius: 50%;
 }
 
-:host([type='toggle']) .toggle-circle {
-    fill: var(
-        --tct-checkbox-toggle-circle-color,
-        var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))
-    );
+:host([type=toggle]) input:checked + label .toggle-indicator {
+  left: 21px;
 }
 
-:host([type='toggle']) input:checked + label .toggle-circle {
-    fill: var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));
+:host([type=toggle]) .toggle-circle {
+  fill: var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))));
 }
 
-:host([type='toggle']) input:checked + label .off,
-:host([type='toggle']) input:not(:checked) + label .on {
-    opacity: 0;
+:host([type=toggle]) input:checked + label .toggle-circle {
+  fill: var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));
 }
 
-:host([type='toggle']) input:focus + label .toggle-circle {
-    stroke: var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));
-    stroke-width: 10px;
-    stroke-opacity: 0.5;
+:host([type=toggle]) input:checked + label .off,
+:host([type=toggle]) input:not(:checked) + label .on {
+  opacity: 0;
 }
 
-:host([type='toggle']) input:not(:checked):focus + label .toggle-circle {
-    stroke: var(
-        --tct-checkbox-toggle-circle-color,
-        var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999))))
-    );
+:host([type=toggle]) input:focus + label .toggle-circle {
+  stroke: var(--tct-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color));
+  stroke-width: 10px;
+  stroke-opacity: 0.5;
 }
 
-:host([type='toggle']) .checked-fill {
-    stroke: var(--tct-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff)));
-    transition: opacity var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
+:host([type=toggle]) input:not(:checked):focus + label .toggle-circle {
+  stroke: var(--tct-checkbox-toggle-circle-color, var(--tct-gray-9, var(--t-gray-9, var(--tct-gray, var(--app-gray, #999999)))));
 }
 
-:host([type='toggle']) input:checked + label .checked-fill {
-    stroke: var(
-        --tct-checkbox-toggle-checked-icon-stroke,
-        var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))
-    );
+:host([type=toggle]) .checked-fill {
+  stroke: var(--tct-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff)));
+  transition: opacity var(--tct-tween-1, var(--app-tween-1, 0.2s ease));
 }
+
+:host([type=toggle]) input:checked + label .checked-fill {
+  stroke: var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff))));
+}

package/dist/collection/components/q2-checkbox-group/index.js

@@ -74,7 +74,7 @@ export class Q2CheckboxGroup {
   static get is() { return "q2-checkbox-group"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]

package/dist/collection/components/q2-checkbox-group/styles.css

@@ -1,145 +1,129 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  font-family: inherit;
+  font-size: inherit;
 }
 
 :host(.sr),
 :host(.sr) button {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }
 
 .sr,
 .sr button {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
-
 :host {
-    margin-top: var(--tct-scale-2, var(--app-scale-2, 10px));
+  margin-top: var(--tct-scale-2, var(--app-scale-2, 10px));
 }
 
 fieldset {
-    padding: var(--tct-input-error-padding, 0);
-    margin: 0;
-    border: 0;
+  padding: var(--tct-input-error-padding, 0);
+  margin: 0;
+  border: 0;
 }
 
 fieldset.has-error {
-    border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));
-    border-width: 1px;
-    border-style: solid;
-    border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));
-    position: relative;
+  border-color: var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--tct-border-radius-1, var(--app-border-radius-1, 2px));
+  position: relative;
 }
 
 fieldset.has-error .error-icon-container {
-    top: 8px;
-    right: 8px;
-    position: absolute;
-    width: 40%;
-    text-align: right;
-    background: linear-gradient(
-        to right,
-        var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),
-        var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))
-    );
+  top: 8px;
+  right: 8px;
+  position: absolute;
+  width: 40%;
+  text-align: right;
+  background: linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, white)));
 }
 
 fieldset.has-error legend + div.error-icon-container.no-label {
-    top: 28px;
+  top: 28px;
 }
 
 .group-legend {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 legend.sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    border: 0;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  border: 0;
 }
 
 .optional-tag {
-    margin-left: var(
-        --tct-input-label-optional-margin-left,
-        var(--tct-scale-1, var(--app-scale-1, 5px))
-    );
-    color: var(
-        --tct-input-label-optional-font-color,
-        var(
-            --tct-a11y-color,
-            var(
-                --t-a11y-gray-color,
-                var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))
-            )
-        )
-    );
-    font-size: var(--tct-input-label-optional-font-size, 12px);
-    font-weight: var(--tct-input-label-optional-font-weight, 400);
+  margin-left: var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1, 5px)));
+  color: var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));
+  font-size: var(--tct-input-label-optional-font-size, 12px);
+  font-weight: var(--tct-input-label-optional-font-weight, 400);
 }
 
 .flexed {
-    margin: 0;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
 }
+
 .flexed.left {
-    justify-content: left;
-}
+  justify-content: left;
+}