@wavemaker/foundation-css 12.0.0-next.45045 → 12.0.0-next.45048

foundation-css/foundation/foundation.css

@@ -481,6 +481,12 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-btn-hover-state-layer-opacity: var(--wm-opacity-hover);
   --wm-btn-focus-state-layer-opacity: var(--wm-opacity-focus);
   --wm-btn-active-state-layer-opacity: var(--wm-opacity-active);
+  --wm-btn-icon-width: 40px;
+  --wm-btn-icon-height: 40px;
+  --wm-btn-icon-size: var(--wm-icon-size-md);
+  --wm-btn-icon-margin: var(--wm-space-1);
+  --wm-btn-icon-padding: var(--wm-space-0);
+  --wm-btn-icon-radius: var(--wm-radius-pill);
   --wm-btn-elevated: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
   --wm-btn-elevated-hover: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, .15);
   --wm-btn-elevated-focus: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
@@ -584,7 +590,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   --wm-checkbox-selected-state-hover: var(--wm-color-primary-hover);
   --wm-checkbox-selected-state-focus: var(--wm-color-primary-focus);
   /*--form field/composite--*/
-  --wm-caption-font-family: var(--wm-body-small-font-family);
+  --wm-caption-font-family: var(--wm-body-large-font-family);
   --wm-caption-font-size: var(--wm-body-large-font-size);
   --wm-caption-font-weight: var(--wm-body-large-font-weight);
   --wm-caption-line-height: var(--wm-body-large-line-height);
@@ -14912,6 +14918,15 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 .wm-app button-elevated:active {
   box-shadow: var(--wm-btn-elevated-active);
 }
+.wm-app .btn-icon,
+.wm-app button-icon {
+  width: var(--wm-btn-icon-width);
+  height: var(--wm-btn-icon-height);
+  margin: var(--wm-btn-icon-margin);
+  --wm-btn-padding: var(--wm-btn-icon-padding);
+  --wm-btn-font-size: var(--wm-btn-icon-size);
+  --wm-btn-radius: var(--wm-btn-icon-radius);
+}
 .wm-app .btn.disabled,
 .wm-app button.disabled,
 .wm-app .btn[disabled],
@@ -15230,6 +15245,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   left: calc(var(--wm-form-control-padding) - 4px);
   width: auto;
   height: auto;
+  --wm-caption-font-family: var(--wm-body-small-font-family);
   --wm-caption-font-size: var(--wm-body-small-font-size);
   --wm-caption-font-weight: var(--wm-body-small-font-weight);
   --wm-caption-line-height: var(--wm-body-small-line-height);
@@ -15270,9 +15286,11 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   z-index: -1;
 }
 .wm-app .control-label {
+  font-family: var(--wm-caption-font-family);
   font-size: var(--wm-caption-font-size);
   font-weight: var(--wm-caption-font-weight);
   line-height: var(--wm-caption-line-height);
+  letter-spacing: var(--wm-caption-letter-spacing);
   color: var(--wm-caption-color);
   margin: var(--wm-caption-margin);
   padding: var(--wm-caption-padding);
@@ -15297,6 +15315,7 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
   font-weight: var(--wm-form-control-font-weight);
   line-height: var(--wm-form-control-line-height);
   letter-spacing: var(--wm-form-control-letter-spacing);
+  transition: all 0.2s ease-in-out;
 }
 .wm-app .form-control::-moz-placeholder {
   color: var(--wm-input-place-holder);
@@ -15313,14 +15332,14 @@ ex: color-mix(in srgb, color1 50%, color2 30%)
 }
 .wm-app .form-control.ng-touched.ng-invalid:focus {
   border-color: var(--wm-form-control-border-color-error);
-  box-shadow: inset 0 0 0 1px var(--wm-form-control-border-color-error);
+  box-shadow: inset 0 0 0 2px var(--wm-form-control-border-color-error);
 }
 .wm-app .form-control:hover {
   border-color: var(--wm-form-control-border-color-hover);
 }
 .wm-app .form-control:focus {
   border-color: var(--wm-form-control-border-color-focus);
-  box-shadow: inset 0 0 0 1px var(--wm-form-control-border-color-focus);
+  box-shadow: inset 0 0 0 2px var(--wm-form-control-border-color-focus);
 }
 .wm-app .app-input-wrapper {
   display: flex;