@wavemaker/foundation-css 12.0.0-next.45064 → 12.0.0-next.45066

foundation-css/foundation/foundation.css

@@ -653,6 +653,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-card-footer-border-style: var(--wm-card-border-style);
   --wm-card-footer-border-color: var(--wm-card-border-color);
   /*--checkbox--*/
+  --wm-checkbox-gap: var(--wm-space-1);
+  --wm-checkbox-caption-font-size: var(--wm-body-large-font-size);
+  --wm-checkbox-caption-font-family: var(--wm-body-large-font-family);
+  --wm-checkbox-caption-font-weight: var(--wm-body-large-font-weight);
+  --wm-checkbox-caption-line-height: var(--wm-body-large-line-height);
+  --wm-checkbox-caption-letter-spacing: var(--wm-body-large-letter-spacing);
+  --wm-checkbox-size: 18px;
   --wm-checkbox-background: transparent;
   --wm-checkbox-border-width: 2px;
   --wm-checkbox-border-color: var(--wm-color-on-surface-variant);
@@ -660,10 +667,14 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-checkbox-background-selected: var(--wm-color-primary);
   --wm-checkbox-icon-color-selected: var(--wm-color-on-primary);
   --wm-checkbox-border-color-selected: var(--wm-color-primary);
+  --wm-checkbox-state-layer-size: 40px;
   --wm-checkbox-state-hover: var(--wm-color-on-surface-hover);
   --wm-checkbox-state-focus: var(--wm-color-on-surface-focus);
+  --wm-checkbox-state-active: var(--wm-color-on-surface-active);
   --wm-checkbox-selected-state-hover: var(--wm-color-primary-hover);
   --wm-checkbox-selected-state-focus: var(--wm-color-primary-focus);
+  --wm-checkbox-selected-state-active: var(--wm-color-primary-active);
+  --wm-checkbox-icon-size: 10px;
   /*--form field/composite--*/
   --wm-caption-font-family: var(--wm-body-large-font-family);
   --wm-caption-font-size: var(--wm-body-large-font-size);
@@ -1157,6 +1168,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-progress-circle-danger-stroke-inactive: var(--wm-color-error-focus);
   --wm-progress-circle-danger-stroke-active: var(--wm-color-error);
   /*--radiobutton--*/
+  --wm-radiobutton-gap: var(--wm-space-1);
+  --wm-radiobutton-caption-font-size: var(--wm-body-large-font-size);
+  --wm-radiobutton-caption-font-family: var(--wm-body-large-font-family);
+  --wm-radiobutton-caption-font-weight: var(--wm-body-large-font-weight);
+  --wm-radiobutton-caption-line-height: var(--wm-body-large-line-height);
+  --wm-radiobutton-caption-letter-spacing: var(--wm-body-large-letter-spacing);
+  --wm-radiobutton-size: 20px;
   --wm-radiobutton-background: transparent;
   --wm-radiobutton-border-width: 2px;
   --wm-radiobutton-border-color: var(--wm-color-on-surface-variant);
@@ -1164,10 +1182,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-radiobutton-background-selected: var(--wm-color-primary);
   --wm-radiobutton-icon-color-selected: var(--wm-color-on-primary);
   --wm-radiobutton-border-color-selected: var(--wm-color-primary);
+  --wm-radiobutton-state-layer-size: 40px;
   --wm-radiobutton-state-hover: var(--wm-color-on-surface-hover);
   --wm-radiobutton-state-focus: var(--wm-color-on-surface-focus);
+  --wm-radiobutton-state-active: var(--wm-color-on-surface-active);
   --wm-radiobutton-selected-state-hover: var(--wm-color-primary-hover);
   --wm-radiobutton-selected-state-focus: var(--wm-color-primary-focus);
+  --wm-radiobutton-selected-state-active: var(--wm-color-primary-active);
   /*--Rating--*/
   --wm-rating-gap: var(--wm-space-2);
   --wm-rating-icon-gap: var(--wm-space-0);
@@ -1177,6 +1198,21 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-rating-icon-opacity-inactive: 0.38;
   --wm-rating-icon-opacity-active: 1;
   --wm-rating-icon-opacity-readonly: 0.38;
+  /*--segmented button--*/
+  --wm-segmented-btn-height: 40px;
+  --wm-segmented-btn-border-width: var(--wm-border-width);
+  --wm-segmented-btn-border-style: var(--wm-border-style);
+  --wm-segmented-btn-border-color: var(--wm-border-color);
+  --wm-segmented-btn-radius: var(--wm-radius-pill);
+  --wm-segmented-btn-icon-size: var(--wm-icon-size-sm);
+  --wm-segmented-btn-background: none;
+  --wm-segmented-btn-color: var(--wm-color-on-surface);
+  --wm-segmented-btn-background-active: var(--wm-color-secondary-container);
+  --wm-segmented-btn-color-active: var(--wm-color-on-secondary-container);
+  --wm-segmented-btn-state-layer-color: var(--wm-segmented-btn-color);
+  --wm-segmented-btn-hover-state-layer-opacity: var(--wm-opacity-hover);
+  --wm-segmented-btn-focus-state-layer-opacity: var(--wm-opacity-focus);
+  --wm-segmented-btn-active-state-layer-opacity: var(--wm-opacity-active);
   --wm-spinner-min-height: 6rem;
   --wm-spinner-background: var(--wm-color-scrim);
   --wm-spinner-background-opacity: 0.3;
@@ -11249,52 +11285,6 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.wm-app .app-switch {
-  position: relative;
-  display: inline-block;
-  border-radius: 500px;
-  background: #fff;
-  overflow: hidden;
-  transform: scale(1);
-}
-.wm-app .app-switch .model-holder {
-  width: 0;
-  height: 0;
-  position: absolute;
-  top: 23px;
-  left: 50%;
-  z-index: -1000;
-}
-.wm-app .app-switch .app-icon {
-  margin-right: 0.2em;
-}
-.wm-app .app-switch .btn-group {
-  position: relative;
-  overflow: hidden;
-  height: 100%;
-}
-.wm-app .app-switch .btn-group > .btn {
-  border-radius: 500px;
-  height: 100%;
-}
-.wm-app .app-switch[disabled] {
-  opacity: 0.65;
-}
-.wm-app .app-switch[disabled] span.app-switch-overlay {
-  cursor: not-allowed;
-}
-.wm-app .app-switch span.app-switch-overlay {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: -100%;
-  z-index: 10;
-  margin-left: 0;
-  pointer-events: inherit;
-  height: 100%;
-  vertical-align: middle;
-  border-radius: 0;
-}
 .wm-app .mobile-input {
   left: 0;
   top: 0;
@@ -14472,12 +14462,14 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 }
 .wm-app .app-checkbox.checkbox > label {
   padding: var(--wm-space-0);
-  display: inline-block;
+  display: inline-flex;
   width: auto;
-  min-height: 40px;
-  font-size: var(--wm-form-control-font-size);
-  font-weight: var(--wm-form-control-font-weight);
-  line-height: var(--wm-form-control-line-height);
+  min-height: var(--wm-checkbox-state-layer-size);
+  font-size: var(--wm-checkbox-caption-font-size);
+  font-family: var(--wm-checkbox-caption-font-family);
+  font-weight: var(--wm-checkbox-caption-font-weight);
+  line-height: var(--wm-checkbox-caption-line-height);
+  letter-spacing: var(--wm-checkbox-caption-letter-spacing);
   cursor: pointer;
 }
 .wm-app .app-checkbox.checkbox > label > input[type="checkbox"] {
@@ -14485,10 +14477,10 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   -moz-appearance: none;
   -webkit-appearance: none;
   margin: 0;
-  width: 40px;
-  height: 40px;
+  width: var(--wm-checkbox-state-layer-size);
+  height: var(--wm-checkbox-state-layer-size);
   position: absolute;
-  left: -11px;
+  left: 0px;
   border-radius: 50%;
   z-index: 1;
   cursor: pointer;
@@ -14500,6 +14492,9 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   background: var(--wm-checkbox-state-focus);
   outline: 0 !important;
 }
+.wm-app .app-checkbox.checkbox > label > input[type="checkbox"]:active {
+  background: var(--wm-checkbox-state-active);
+}
 .wm-app .app-checkbox.checkbox > label > input[type="checkbox"]:checked + .caption:before {
   background: var(--wm-checkbox-background-selected);
   border-color: var(--wm-checkbox-border-color-selected);
@@ -14513,11 +14508,13 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-checkbox.checkbox > label > input[type="checkbox"]:checked:focus {
   background: var(--wm-checkbox-selected-state-focus);
 }
+.wm-app .app-checkbox.checkbox > label > input[type="checkbox"]:checked:active {
+  background: var(--wm-checkbox-selected-state-active);
+}
 .wm-app .app-checkbox.checkbox > label .caption {
-  padding-left: 32px;
-  margin-top: 8px;
   display: inline-block;
-  min-height: 24px;
+  padding-left: calc(var(--wm-checkbox-state-layer-size) + var(--wm-checkbox-gap));
+  padding-top: calc(calc(var(--wm-checkbox-state-layer-size) - var(--wm-checkbox-caption-line-height)) / 2);
 }
 .wm-app .app-checkbox.checkbox > label .caption:before,
 .wm-app .app-checkbox.checkbox > label .caption:after {
@@ -14526,20 +14523,20 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   position: absolute;
 }
 .wm-app .app-checkbox.checkbox > label .caption:before {
-  width: 18px;
-  height: 18px;
-  left: 0px;
-  top: 11px;
+  width: var(--wm-checkbox-size);
+  height: var(--wm-checkbox-size);
+  left: calc(calc(var(--wm-checkbox-state-layer-size) - var(--wm-checkbox-size))/2);
+  top: calc(calc(var(--wm-checkbox-state-layer-size) - var(--wm-checkbox-size))/2);
   background: var(--wm-checkbox-background);
   border: var(--wm-checkbox-border-width) solid var(--wm-checkbox-border-color);
   border-radius: var(--wm-checkbox-border-radius);
   box-sizing: border-box;
 }
 .wm-app .app-checkbox.checkbox > label .caption:after {
-  top: 11px;
-  left: 0px;
-  width: 10px;
-  height: 5px;
+  top: calc(calc(var(--wm-checkbox-state-layer-size) - var(--wm-checkbox-size))/2);
+  left: calc(calc(var(--wm-checkbox-state-layer-size) - var(--wm-checkbox-size))/2);
+  width: var(--wm-checkbox-icon-size);
+  height: calc(var(--wm-checkbox-icon-size) * 0.5);
   border: solid 2px var(--wm-checkbox-icon-color-selected);
   border-right: none;
   border-top: none;
@@ -16879,8 +16876,134 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-radio {
   position: relative;
 }
-.wm-app .app-radioset {
-  position: relative;
+.wm-app .app-radio.radio {
+  display: inline-block;
+}
+.wm-app .app-radio.radio > label {
+  padding: var(--wm-space-0);
+  display: inline-flex;
+  width: auto;
+  min-height: var(--wm-radiobutton-state-layer-size);
+  font-size: var(--wm-radiobutton-caption-font-size);
+  font-family: var(--wm-radiobutton-caption-font-family);
+  font-weight: var(--wm-radiobutton-caption-font-weight);
+  line-height: var(--wm-radiobutton-caption-line-height);
+  letter-spacing: var(--wm-radiobutton-caption-letter-spacing);
+  cursor: pointer;
+}
+.wm-app .app-radio.radio > label > input[type="radio"] {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  margin: 0;
+  width: var(--wm-radiobutton-state-layer-size);
+  height: var(--wm-radiobutton-state-layer-size);
+  position: absolute;
+  left: 0px;
+  border-radius: 50%;
+  z-index: 1;
+  cursor: pointer;
+}
+.wm-app .app-radio.radio > label > input[type="radio"]:hover {
+  background: var(--wm-radiobutton-state-hover);
+}
+.wm-app .app-radio.radio > label > input[type="radio"]:focus {
+  background: var(--wm-radiobutton-state-focus);
+  outline: 0 !important;
+}
+.wm-app .app-radio.radio > label > input[type="radio"]:active {
+  background: var(--wm-radiobutton-state-active);
+}
+.wm-app .app-radio.radio > label > input[type="radio"]:checked + .caption:before {
+  border-color: var(--wm-radiobutton-border-color-selected);
+}
+.wm-app .app-radio.radio > label > input[type="radio"]:checked + .caption:after {
+  transform: scale(1);
+}
+.wm-app .app-radio.radio > label > input[type="radio"]:checked:hover {
+  background: var(--wm-radiobutton-selected-state-hover);
+}
+.wm-app .app-radio.radio > label > input[type="radio"]:checked:focus {
+  background: var(--wm-radiobutton-selected-state-focus);
+}
+.wm-app .app-radio.radio > label > input[type="radio"]:checked:active {
+  background: var(--wm-radiobutton-selected-state-active);
+}
+.wm-app .app-radio.radio > label .caption {
+  display: inline-block;
+  padding-left: calc(var(--wm-radiobutton-state-layer-size) + var(--wm-radiobutton-gap));
+  padding-top: calc(calc(var(--wm-radiobutton-state-layer-size) - var(--wm-radiobutton-caption-line-height)) / 2);
+}
+.wm-app .app-radio.radio > label .caption:before,
+.wm-app .app-radio.radio > label .caption:after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+}
+.wm-app .app-radio.radio > label .caption:before {
+  width: var(--wm-radiobutton-size);
+  height: var(--wm-radiobutton-size);
+  left: calc(calc(var(--wm-radiobutton-state-layer-size) - var(--wm-radiobutton-size))/2);
+  top: calc(calc(var(--wm-radiobutton-state-layer-size) - var(--wm-radiobutton-size))/2);
+  background: var(--wm-radiobutton-background);
+  border: var(--wm-radiobutton-border-width) solid var(--wm-radiobutton-border-color);
+  border-radius: var(--wm-radiobutton-border-radius);
+  box-sizing: border-box;
+}
+.wm-app .app-radio.radio > label .caption:after {
+  top: calc(var(--wm-radiobutton-size) * 0.75);
+  left: calc(var(--wm-radiobutton-size) * 0.75);
+  width: calc(var(--wm-radiobutton-size) / 2);
+  height: calc(var(--wm-radiobutton-size) / 2);
+  transform: scale(0);
+  transition: all 0.2s ease-in-out;
+  background: var(--wm-radiobutton-border-color-selected);
+  border-radius: 50%;
+}
+.wm-app .app-radio.radio > label > img {
+  display: none;
+}
+.wm-app .app-radio.radio.secondary {
+  --wm-radiobutton-background-selected: var(--wm-color-secondary);
+  --wm-radiobutton-border-color-selected: var(--wm-color-secondary);
+  --wm-radiobutton-icon-color-selected: var(--wm-color-on-secondary);
+  --wm-radiobutton-selected-state-hover: var(--wm-color-secondary-hover);
+  --wm-radiobutton-selected-state-focus: var(--wm-color-secondary-focus);
+}
+.wm-app .app-radio.radio.tertiary {
+  --wm-radiobutton-background-selected: var(--wm-color-tertiary);
+  --wm-radiobutton-border-color-selected: var(--wm-color-tertiary);
+  --wm-radiobutton-icon-color-selected: var(--wm-color-on-tertiary);
+  --wm-radiobutton-selected-state-hover: var(--wm-color-tertiary-hover);
+  --wm-radiobutton-selected-state-focus: var(--wm-color-tertiary-focus);
+}
+.wm-app .app-radio.radio.success {
+  --wm-radiobutton-background-selected: var(--wm-color-success);
+  --wm-radiobutton-border-color-selected: var(--wm-color-success);
+  --wm-radiobutton-icon-color-selected: var(--wm-color-on-success);
+  --wm-radiobutton-selected-state-hover: var(--wm-color-success-hover);
+  --wm-radiobutton-selected-state-focus: var(--wm-color-success-focus);
+}
+.wm-app .app-radio.radio.info {
+  --wm-radiobutton-background-selected: var(--wm-color-info);
+  --wm-radiobutton-border-color-selected: var(--wm-color-info);
+  --wm-radiobutton-icon-color-selected: var(--wm-color-on-info);
+  --wm-radiobutton-selected-state-hover: var(--wm-color-info-hover);
+  --wm-radiobutton-selected-state-focus: var(--wm-color-info-focus);
+}
+.wm-app .app-radio.radio.warning {
+  --wm-radiobutton-background-selected: var(--wm-color-warning);
+  --wm-radiobutton-border-color-selected: var(--wm-color-warning);
+  --wm-radiobutton-icon-color-selected: var(--wm-color-on-warning);
+  --wm-radiobutton-selected-state-hover: var(--wm-color-warning-hover);
+  --wm-radiobutton-selected-state-focus: var(--wm-color-warning-focus);
+}
+.wm-app .app-radio.radio.error {
+  --wm-radiobutton-background-selected: var(--wm-color-error);
+  --wm-radiobutton-border-color-selected: var(--wm-color-error);
+  --wm-radiobutton-icon-color-selected: var(--wm-color-on-error);
+  --wm-radiobutton-selected-state-hover: var(--wm-color-error-hover);
+  --wm-radiobutton-selected-state-focus: var(--wm-color-error-focus);
 }
 .wm-app .app-ratings {
   display: inline-flex;
@@ -16968,6 +17091,73 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app .app-ratings[readonly="true"] {
   opacity: var(--wm-rating-icon-opacity-readonly);
 }
+.wm-app .app-switch > .btn-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+.wm-app .app-switch > .btn-group > .btn {
+  background: var(--wm-segmented-btn-background);
+  color: var(--wm-segmented-btn-color);
+  border-radius: 0;
+  margin: 0 -1px;
+  width: 100%;
+  min-height: var(--wm-segmented-btn-height);
+  height: var(--wm-segmented-btn-height);
+  border: var(--wm-segmented-btn-border-width) var(--wm-segmented-btn-border-style) var(--wm-segmented-btn-border-color);
+}
+.wm-app .app-switch > .btn-group > .btn:first-child {
+  border-top-left-radius: var(--wm-segmented-btn-radius);
+  border-bottom-left-radius: var(--wm-segmented-btn-radius);
+}
+.wm-app .app-switch > .btn-group > .btn:last-child {
+  border-top-right-radius: var(--wm-segmented-btn-radius);
+  border-bottom-right-radius: var(--wm-segmented-btn-radius);
+}
+.wm-app .app-switch > .btn-group > .btn i {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--wm-segmented-btn-icon-size);
+  min-width: var(--wm-segmented-btn-icon-size);
+  width: var(--wm-segmented-btn-icon-size);
+  height: var(--wm-segmented-btn-icon-size);
+  margin-left: var(--wm-space-0);
+}
+.wm-app .app-switch > .btn-group > .btn:before {
+  content: "";
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  pointer-events: none;
+  border-radius: inherit;
+  opacity: 0;
+  background: var(--wm-segmented-btn-state-layer-color);
+}
+.wm-app .app-switch > .btn-group > .btn:hover::before,
+.wm-app .app-switch > .btn-group > .btn.hover::before {
+  opacity: var(--wm-segmented-btn-hover-state-layer-opacity);
+}
+.wm-app .app-switch > .btn-group > .btn:focus::before,
+.wm-app .app-switch > .btn-group > .btn.focus::before {
+  opacity: var(--wm-segmented-btn-focus-state-layer-opacity);
+}
+.wm-app .app-switch > .btn-group > .btn:active::before,
+.wm-app .app-switch > .btn-group > .btn:active:focus::before,
+.wm-app .app-switch > .btn-group > .btn:active:hover::before,
+.wm-app .app-switch > .btn-group > .btn:active.focus::before {
+  opacity: var(--wm-segmented-btn-active-state-layer-opacity);
+}
+.wm-app .app-switch > .btn-group > .btn.selected {
+  --wm-segmented-btn-background: var(--wm-segmented-btn-background-active);
+  --wm-segmented-btn-color: var(--wm-segmented-btn-color-active);
+  --wm-segmented-btn-state-layer-color: var(--wm-segmented-btn-color);
+}
+.wm-app .app-switch > .switch-handle {
+  display: none;
+}
 .wm-app .app-spinner {
   min-height: var(--wm-spinner-min-height);
   display: flex;
@@ -20358,6 +20548,57 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   -webkit-animation-name: zoomOutUp;
   animation-name: zoomOutUp;
 }
+@keyframes animation-indeterminate-start {
+  0% {
+    width: 0%;
+  }
+  25% {
+    width: 12.5%;
+  }
+  50% {
+    width: 25%;
+  }
+  75% {
+    width: 62.5%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes animation-indeterminate-active {
+  0% {
+    width: 0%;
+  }
+  25% {
+    width: 25%;
+  }
+  50% {
+    width: 50%;
+  }
+  75% {
+    width: 25%;
+  }
+  100% {
+    width: 0%;
+  }
+}
+@keyframes animation-indeterminate-end {
+  0% {
+    width: 100%;
+  }
+  25% {
+    width: 62.5%;
+  }
+  50% {
+    width: 25%;
+  }
+  75% {
+    width: 12.5%;
+  }
+  100% {
+    width: 0%;
+  }
+}
 .wm-app .m-0 {
   margin: var(--wm-spacer-0) !important;
 }