@freshworks/crayons
Version:
Crayons Web Components library
79 lines (74 loc) • 2.12 kB
CSS
/* Need to check with designer */
/* Need to check with designer */
:host {
font-family: var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
}
/*
@prop --fw-hint-color: Color of the hint text.
@prop --fw-warning-color: Color of the warning text.
@prop --fw-error-color: Color of the error text.
*/
.field-control {
position: relative;
}
.field-control-label {
display: block;
font-size: 12px;
color: var(--fw-label-color, #475867);
font-weight: 600;
margin-bottom: 4px;
padding-left: 2px;
line-height: 20px;
}
.field-control-label.required::after {
content: "*";
position: relative;
display: inline-block;
top: 2px;
font-size: 14px;
color: #d72d30;
padding-left: 2px;
font-weight: 700;
}
.field-control-hint-text {
font-family: -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
font-size: 12px;
line-height: 20px;
margin-top: 4px;
margin-bottom: 0;
color: var(--fw-hint-color, #acb6be);
position: inherit;
display: block;
padding-left: 2px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.field-control-error-text {
font-family: -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
font-size: 12px;
line-height: 20px;
margin-top: 4px;
margin-bottom: 0;
color: var(--fw-error-color, #d72d30);
position: inherit;
display: block;
padding-left: 2px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.field-control-warning-text {
font-family: -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto", "Helvetica Neue", arial, sans-serif;
font-size: 12px;
line-height: 20px;
margin-top: 4px;
margin-bottom: 0;
color: var(--fw-warning-color, #f8ab59);
position: inherit;
display: block;
padding-left: 2px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}