Manager

Back Back Up Advanced Editor

@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;
}