Scss-mixin-leobonhart NPM

MIXINS

To add mixins in your scss file write (~ is a node_modules folder)

@import '~scss-mixin-leobonhart/mixins.scss';

File mixins.scss contain:

colors.scss

It is a material designe colors which contains many variables with colors, and also 3 functions:

GetMaterialColor

Input parameters:
color - material color name
bright - material color size of brightness, by default set 500

The function return the specified color

example:

    .class{
        background-color: GetMaterialColor('red', 100);
    }

GetMaterialColorText

Input parameters:
color - material color name
bright - material color size of brightness, by default set 500

The function return the text color for this color

example:

    .class{
        color: GetMaterialColorText('red', 100);
    }

MaterialColor

Input parameters:
color - material color name
bright - material color size of brightness, by default set 500

The function return css style background color and text color:

    background-color: GetMaterialColor($color, $bright);
    color: GetMaterialColorText($color, $bright);

common.scss

which contains mixins:

wrap-text

@mixin wrap-text{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

material-icon

Input parameters:
ico - material icon name
size - size in px, by default set 24px

mixin styling element like it does class material-icons in material design icons

Important:
To correct work this mixin, you need add icon fonts
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

imageUrl

This function for angular

@function imageUrl($name) {
    @return url('/assets/images/#{$name}');
}

not

Input parameters:
querys - querys selectors
support content

mexin return parent selector with single or multiple pseudo-class not

example:

.class{
    @include not('[data-cell="name"]','[data-cell="size"]', '[data-cell="id"]') {
        display: none;
    }
}

// transform to

.class:not([data-cell="name"]):not([data-cell="size"]):not([data-cell="id"]) {
    display: none;
}

customScroll.scss

which contains 2 mixins:

customScroll

Input parameters:
mainColor - name of material color, by default 'deep-purple'
track-bright - scrollbar track brightness, by default 100
thumb-bright - scrollbar thumb brightness, by default 900
scrollbar-bright - scrollbar brightness, by default 900
wh - scrollbar width and height, by default 6px

This mixin styling element scroll use ::-webkit-scrollbar

tableCustomScroll

This mixin just config scroll in grey color

@include customScroll('grey', 300, 400, 400, 6px);

mediaQueries.scss

which contains mixins to set media:

xs, sm, md, lg, xl, hd, fhd, retina, mobile, tablet

example:

.class{
    @include xs{
        width: 50px;
    }
    @include sm{
        width: 150px;
    }
    @include md{
        width: 250px;
    }
    @include lg{
        width: 350px;
    }
    ...
}

DebugMedia

this mixin add to body ::after element that show what exactly media rule work now (except retina) will be added to the upper left corner of the screen

transition.scss

There is two mixins:

transitionDur

Input parameters:
keys - name of transition properties
dur - durations

It's a helpful mixin to create one or several transition properties with will-change

example:

.class{
    @include transitionDur((color, background), 1s);
}

transition

Input parameters:
keys - name of transition properties

this mixin use transitionDur with exposed property $transitionDur which equal .4s

example:

.class{
    @include transition(color, background);
}

// transform to

.class{
    will-change: color, background;
    transition: color 0.4s, background 0.4s;
}

property.scss

There is properties:

$fontFamily_Material: Roboto, sans-serif;
$fontSize: 1rem;

$mui-b-shadow_0: 0 0px 0px 0 rgba(0, 0, 0, 0.0), 0 0px 0px 0 rgba(0, 0, 0, 0.0);
$mui-b-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0px 2px 0 rgba(0, 0, 0, 0.12);

$mui-b-shadow-invert: 0 -2px 2px 0 rgba(0, 0, 0, 0.16), 0 0px 2px 0 rgba(0, 0, 0, 0.12);

$mui-b-shadow-push_0: 0 0px 0px 0 rgba(0, 0, 0, 0.0) inset, 0 0px 0px 0 rgba(0, 0, 0, 0.0) inset;
$mui-b-shadow-push: 0 2px 2px 0 rgba(0, 0, 0, 0.16) inset, 0 0px 2px 0 rgba(0, 0, 0, 0.12) inset;

$mui-b-shadow--hover_0: 0 0px 0px rgba(0, 0, 0, 0.0), 0px 0px 0px rgba(0, 0, 0, 0.0);
$mui-b-shadow--hover: 0 0px 4px rgba(0, 0, 0, 0.12), 1px 3px 4px rgba(0, 0, 0, 0.2);


$mdl-b-shadow_0: 0 0px 0px 0 rgba(0, 0, 0, 0.0), 0 0px 0px 0 rgba(0, 0, 0, 0.0);
$mdl-b-shadow: 0 -2px 25px 0 rgba(0, 0, 0, 0.15), 0 13px 25px 0 rgba(0, 0, 0, 0.3);

$mdl-b-shadow-modal_0: 0 0px 0px 0 rgba(0,0,0,0.0);
$mdl-b-shadow-modal: 0 12px 15px 0 rgba(0,0,0,0.24);

$mdl-b-shadow-switch_0: 0 0px 0px 0 rgba(0,0,0,.0), 0 0px 0px 0px rgba(0,0,0,0), 0 1px 8px 0 rgba(0,0,0,0);
$mdl-b-shadow-switch: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.2), 0 1px 8px 0 rgba(0,0,0,.12);

$mdl-b-shadow-switch-hover_0: 0 0px 0px 0 rgba(0, 0, 0, 0.0), 0 0px 0px 0 rgba(0, 0, 0, 0);
$mdl-b-shadow-switch-hover: 0 -2px 10px 0 rgba(0, 0, 0, 0.15), 0 4px 8px 0 rgba(0, 0, 0, 0.3);

$max-z-index: 2147483647;
$transitionDur: 0.4s;