@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
78 lines (68 loc) • 1.96 kB
CSS
.gform-admin {
.gform-pagination {
box-sizing: border-box;
display: flex;
flex-direction: row;
gap: 6px;
list-style-type: none;
margin: 0;
padding: 0;
}
.gform-pagination__link--previous,
.gform-pagination__link,
.gform-pagination__link--next {
align-items: center;
background: var(--gform-admin-color-titan-white);
border: 1px solid var(--gform-admin-color-snuff);
border-radius: 3px;
box-shadow: var(--gform-admin-box-shadow-button);
box-sizing: border-box;
color: var(--gform-admin-color-port);
cursor: pointer;
display: flex;
font-family: var(--gform-admin-font-family-base);
font-size: var(--gform-admin-font-size-sm);
font-weight: var(--gform-common-font-weight-medium);
line-height: 20px;
padding: 7px 12px;
&:hover,
&:active {
box-shadow: var(--gform-admin-box-shadow-toggle);
}
&:focus-visible {
border-color: var(--gform-admin-color-blue-haze);
outline: 0.125rem solid var(--gform-admin-color-white-lilac);
}
&:disabled,
&.gform-pagination__link--disabled {
border-color: var(--gform-admin-color-snuff);
opacity: 0.5;
}
}
.gform-pagination__link--selected {
background: var(--gform-admin-color-chathams);
border-color: var(--gform-admin-color-chathams);
color: var(--gform-admin-color-white);
cursor: default;
&:hover,
&:active {
background: var(--gform-admin-color-chathams);
border-color: var(--gform-admin-color-chathams);
box-shadow: var(--gform-admin-box-shadow-button);
color: var(--gform-admin-color-white);
}
&:focus-visible {
border-color: var(--gform-admin-color-light-blue);
outline: 0.125rem solid var(--gform-admin-color-spindle);
}
}
.gform-pagination__link--break {
align-items: center;
cursor: pointer;
display: flex;
font-family: var(--gform-admin-font-family-base);
font-size: var(--gform-admin-font-size-sm);
font-weight: var(--gform-common-font-weight-medium);
padding: 7px 4px;
}
}