@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
119 lines (103 loc) • 2.66 kB
CSS
.gform-admin {
.gform-st-icon {
align-items: center;
display: inline-flex;
flex-basis: 1.25rem;
flex-grow: 0;
flex-shrink: 0;
font-family: var(--gform-admin-font-family-icons-old) ;
font-size: 1.125rem;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 1.25rem;
justify-content: center;
position: relative;
text-transform: none;
vertical-align: top;
width: 1.25rem;
&::before,
&::after {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
speak: none;
white-space: normal;
width: 100%;
}
}
/* -----------------------------------------------------------------------------
*
* Duotone +/- icons in circle and focus ring.
*
* Commonly used in areas of the admin/theme were rows of choices are added
* or deleted by the user. Make the element that receives these classes the
* size you want if it needs to deviate from the default and then simply adjust
* the font-size of the after element to scale the icon.
*
* Designed to be used on a button.
*
* ----------------------------------------------------------------------------- */
.gform-st-icon--circle-plus,
.gform-st-icon--circle-minus {
background: var(--gform-admin-color-white);
border: 0;
border-radius: 50%;
box-shadow: var(--gform-admin-box-shadow-outline-light);
cursor: pointer;
flex-basis: 1.125rem;
height: 1.125rem;
line-height: var(--gform-admin-line-height-base-old);
outline: none;
padding: 0;
text-align: center;
transition: var(--gform-admin-transition-cl-button-focus);
width: 1.125rem;
&::before {
border: 0.0625rem solid var(--gform-admin-color-blue-haze);
border-radius: 50%;
content: "";
height: 1.125rem;
left: 0;
position: absolute;
top: 0.031rem;
transition: var(--gform-admin-transition-cl-button-focus);
width: 1.125rem;
}
&::after {
color: var(--gform-admin-color-gravity-blue);
font-size: 0.55rem;
height: auto;
position: relative;
width: auto;
}
&:hover,
&:focus {
box-shadow: var(--gform-admin-box-shadow-outline-light-hover-alt);
&::before {
border-color: var(--gform-admin-color-gravity-blue);
box-shadow: var(--gform-admin-box-shadow-focus-light);
}
}
}
.gform-st-icon--circle-plus {
&::after {
content: var(--gform-icon--st-plus);
}
}
.gform-st-icon--circle-minus {
&::after {
content: var(--gform-icon--minus);
}
}
}
.gf_browser_chrome {
.gform-st-icon--circle-plus,
.gform-st-icon--circle-minus {
&::after {
height: 100%;
margin-left: 0.03125rem;
}
}
}