@mixin table($spacing: 1em, $use_th_border_top: true) {
--itsec-table-spacing: #{$spacing};
border-spacing: 0;
& thead th {
padding-top: var(--itsec-table-spacing);
padding-bottom: var(--itsec-table-spacing);
color: $solid-wp-text-color-normal;
text-transform: uppercase;
font-weight: normal;
background: $solid-wp-surface-tertiary;
@if $use_th_border_top {
border-top: 1px solid $solid-wp-border-normal;
}
}
:where(&) th,
:where(&) td {
text-align: left;
padding: var(--itsec-table-spacing);
border-bottom: 1px solid $solid-wp-border-normal;
}
:where(&) tbody th {
font-weight: normal;
}
& tbody tr:last-child {
> * {
border: none;
}
}
}
@mixin sticky-table($spacing: 1em, $use_th_border_top: true) {
@include table($spacing, $use_th_border_top);
& thead th {
position: sticky;
top: 0;
background: $solid-wp-surface-tertiary;
}
}
@mixin bordered-button($style: 'blue') {
$primary: $main-blue;
$alternate: #E1f2fc;
@if ($style == 'green') {
$primary: $alert-green;
$alternate: #e4f4e8;
}
@if ($style == 'red') {
$primary: $alert-red;
$alternate: #fcefef;
}
@if ($style == 'orange') {
$primary: $alert-orange;
$alternate: #fef1ea;
}
padding: .5em 1em;
background: $alternate;
color: $solid-wp-text-color-normal;
transition: background-color 300ms, color 150ms;
&:hover {
background: $primary;
color: white;
}
&.is-busy {
animation: components-button__busy-animation 2500ms infinite linear;
background-size: 100px 100%;
background-image: repeating-linear-gradient(-45deg, $alternate, #fff 11px, #fff 10px, $alternate 20px);
opacity: 1;
&:hover {
color: $primary;
}
}
}
/**
* Breakpoint mixins
*/
@mixin break-min-width( $width ) {
@media (min-width: #{ ($width) }) {
@content;
}
}
@mixin break-huge() {
@media (min-width: #{ ($break-huge) }) {
@content;
}
}
@mixin break-wide() {
@media (min-width: #{ ($break-wide) }) {
@content;
}
}
@mixin break-xlarge() {
@media (min-width: #{ ($break-xlarge) }) {
@content;
}
}
@mixin break-large() {
@media (min-width: #{ ($break-large) }) {
@content;
}
}
@mixin break-medium() {
@media (min-width: #{ ($break-medium) }) {
@content;
}
}
@mixin break-small() {
@media (min-width: #{ ($break-small) }) {
@content;
}
}
@mixin break-mobile() {
@media (min-width: #{ ($break-mobile) }) {
@content;
}
}
@mixin break-zoomed-in() {
@media (min-width: #{ ($break-zoomed-in) }) {
@content;
}
}
@mixin dashicon($unicode: none, $size: 20px) {
content: $unicode;
font-family: dashicons;
display: inline-block;
line-height: 1;
font-weight: 400;
font-style: normal;
speak: never;
text-decoration: inherit;
text-transform: none;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: $size;
height: $size;
font-size: $size;
vertical-align: top;
text-align: center;
transition: color 0.1s ease-in;
}
@mixin recommended-icon($size: 20px) {
$size: #{var(--itsec-recommended-icon-size, $size)};
--itsec-recommended-icon-padding: calc(#{$size} / 5);
@include dashicon('\f155', #{$size});
font-size: calc(#{$size} - (var(--itsec-recommended-icon-padding) * 2));
border-radius: 50%;
padding: var(--itsec-recommended-icon-padding);
padding-left: calc(var(--itsec-recommended-icon-padding) + 0.5px);
background: $main-blue;
color: $white;
}