theme-base._mixins.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of primefaces-themes
There is a newer version: 15.0.0
@use 'sass:color';
@use 'sass:list';

@mixin icon-override($icon) {
    font-family: 'primeicons' !important;
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    background: none;

    &:before {
        content: $icon;
    }
}

@mixin icon-override-with-content($icon) {
    &:before {
        content: $icon;
        font-family: 'primeicons' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-indent: 0 !important;
        background-image: none !important;
        @content
    }
}

@mixin action-icon {
    width: $actionIconWidth;
    height: $actionIconHeight;
    background: $actionIconBg;
    color: $actionIconColor;
    transition: $transition;
    border-radius: $actionIconBorderRadius;
    border: $actionIconBorder;
    text-align: center;
    line-height: $actionIconHeight;
    padding: 0;
    user-select: none;

    &:hover {
        background: $actionIconHoverBg;
        color: $actionIconHoverColor;
        border-color: $actionIconHoverBorderColor;
    }

    &:focus {
        @include focused();
    }
}

@mixin secondary-button() {
    background: $secondaryButtonBg;
    color: $secondaryButtonTextColor;
    border: $secondaryButtonBorder;
            
    &.ui-state-hover, &:not(:disabled):hover {
        background: $secondaryButtonHoverBg;
        border-color: $secondaryButtonHoverBorderColor;
        color: $secondaryButtonTextHoverColor;
    }

    &.ui-state-focus {
        box-shadow: $secondaryButtonFocusShadow;
    }

    &.ui-state-active, &:active {
        background: $secondaryButtonActiveBg;
        border-color: $secondaryButtonActiveBorderColor;
        color: $secondaryButtonTextActiveColor;
    }

    &.ui-button-outlined {
        background-color: transparent;
        color: $secondaryButtonBg;
        border: $outlinedButtonBorder;

        &:enabled:hover {
            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
            color: $secondaryButtonBg;
            border: $outlinedButtonBorder;
        }

        &:enabled:active {
            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
            color: $secondaryButtonBg;
            border: $outlinedButtonBorder;
        }
    }

    &.ui-button-flat {
        background-color: transparent;
        color: $secondaryButtonBg;
        border-color: transparent;

        &:enabled:hover {
            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
            border-color: transparent;
            color: $secondaryButtonBg;
        }

        &:enabled:active {
            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
            border-color: transparent;
            color: $secondaryButtonBg;
        }
    }
}

@mixin border-radius-right($val) {
    border-top-right-radius: $val;
    border-bottom-right-radius: $val; 
}

@mixin border-radius-left($val) {
    border-top-left-radius: $val;
    border-bottom-left-radius: $val;
}

@mixin border-radius-top($val) {
    border-top-left-radius: $val;
    border-top-right-radius: $val;
}

@mixin border-radius-bottom($val) {
    border-bottom-left-radius: $val;
    border-bottom-right-radius: $val;
}

@mixin focused() {
	outline: $focusOutline;
    outline-offset: $focusOutlineOffset;
    box-shadow: $focusShadow;
}

@mixin focused-inset() {
	outline: $focusOutline;
    outline-offset: $focusOutlineOffset;
    box-shadow: inset $focusShadow;
}

@mixin focused-input() {
    border-color: $inputFocusBorderColor;
    outline: 0 none;
    box-shadow: $inputFocusShadow;
}

@mixin focused-listitem() {
	outline: $focusOutline;
    outline-offset: $focusOutlineOffset;
    box-shadow: $inputListItemFocusShadow;
}

@mixin invalid-input() {
	border-color: $inputErrorBorderColor;
}

@mixin flex() {
    display: -ms-flexbox;
    display: flex;
}

@mixin flex-wrap($value) {
    -ms-flex-wrap: $value;
    flex-wrap: $value;
}

@mixin flex-direction-row() {
    -ms-flex-direction: row;
    flex-direction: row; 
}

@mixin flex-direction-column() {
    -ms-flex-direction: column;
    flex-direction: column; 
}

@mixin flex-justify-center() {
    -ms-flex-pack: center;
    justify-content: center; 
}

@mixin flex-justify-between() {
    -ms-flex-pack: justify;
    justify-content: space-between; 
}

@mixin flex-align-center() {
    -ms-flex-align: center;
    align-items: center;
}

@mixin flex-align-start() {
    -ms-flex-align: start;
    align-items: flex-start;
}

@mixin flex-align-end() {
    -ms-flex-align: end;
    align-items: flex-end;
}

@mixin flex-justify-start() {
    -ms-flex-pack: start;
    justify-content: flex-start;
}

@mixin flex-justify-end() {
    -ms-flex-pack: end;
    justify-content: flex-end;
}

@mixin placeholder {
    ::-webkit-input-placeholder {@content}
    :-moz-placeholder           {@content; opacity: 1}
    ::-moz-placeholder          {@content; opacity: 1}
    :-ms-input-placeholder      {@content}  
}

@mixin scaledPadding($val, $scale) {
    padding: list.nth($val, 1) * $scale list.nth($val, 2) * $scale;
}

@mixin scaledFontSize($val, $scale) {
    font-size: $val * $scale;
}

@mixin nested-submenu-indents($val, $index, $length) {
    ul {
        li {
            a {
                padding-left: $val * ($index + 1);
            }

            @if $index < $length {
                @include nested-submenu-indents($val, $index + 2, $length);
            }
        }
    }
}

@function tint($color, $percentage) {
    @return color.mix(#fff, $color, $weight: $percentage, $method: null);
}

@function shade($color, $percentage) {
    @return color.mix(#000, $color, $weight: $percentage, $method: null);
}