ca97c21e16
* move kbd where it should be * initial cleanup * do we even need that? * sponsorships * cleanups on articles.scss mostly * initial cleanups to scaffolds * moving cheese around * color variables, variables cleanups * adding spacing units * variables cleanup * adding topbar height variable * a bit of top-bar refactor * a bit of top-bar refactor * a bit of top-bar refactor * simpler animation * top bar search and responsivness * loggged out version * remove unnecessary comment * fixing svg icons * search cleanup * top bar cleanups * . * dropdown in header * removing fill from svgs to make them work in other themes * remove test element * topbar icons recreated * introducing variables & buttons component * more variables * Whoops * init modal component * init modal component * init form component * form component * . * variables naming * . * tiny cleanups * formatting * whoops * Test * component avatars * components page + fixes * indicators * init boxes * boxes * im an idiot * radios, checkboxes * maybe im smart * whoops. i am dumb and blind * checkboxes and radios * better documentation, code examples, avatars rewritten * notices, modals, dropdowns * . * oh damn you * checkboxes & radios * forms * generating tailwind classes * i broke things * spacing units * typography, spacing * positioning * overflow * . * getting rid of cards for now * formatting * adding reset to global styles to avoid jumping layout * change url for crayons test page to not be top-level * additional style for indicators, colors, navigation, grid * tabs * backgrounds * flexbox * . * . * im not sure why schema change was here... * same about this one... * this file shouldnt be in my commit either * adding comments and mentally dropping IE10 support :D * . * referencing boxes.scss file * new line * get rid of font-size from body Co-authored-by: rhymes <rhymesete@gmail.com>
49 lines
1.3 KiB
SCSS
49 lines
1.3 KiB
SCSS
@import '../vars/variables';
|
|
|
|
// box() - generating classes for different style
|
|
//
|
|
// This mixin automates process of generating classes for different
|
|
// types of boxes: filled & outlined, each with variations
|
|
// for several levels of elevation (box-shadow).
|
|
//
|
|
// @param {object} $this Caching current parent
|
|
// @param {color} $color-1 Background color for filled variation
|
|
// @param {color} $color-2 Accent color for border & shadow
|
|
@mixin box($this: $this, $color-1: $smoke-90, $color-2: $smoke-100) {
|
|
border-color: $color-2;
|
|
|
|
&#{$this}--filled {
|
|
background-color: $color-1;
|
|
}
|
|
|
|
@for $i from 1 through 3 {
|
|
&#{$this + '--level-' + $i} {
|
|
box-shadow: #{pow(2, $i) + px} #{pow(2, $i) + px} 0 $color-2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.crayons-box {
|
|
$this: &; // Caching current element, source: https://css-tricks.com/snippets/sass/caching-current-selector-sass/
|
|
border: 2px solid;
|
|
border-radius: $br-default;
|
|
background-color: $snowflake;
|
|
|
|
@include box($this, $smoke-90, $smoke-100);
|
|
|
|
&--danger {
|
|
@include box($this, $raspberry, $raspberry-darker);
|
|
}
|
|
|
|
&--success {
|
|
@include box($this, $avocado, $avocado-darker);
|
|
}
|
|
|
|
&--warning {
|
|
@include box($this, $peanut, $peanut-darker);
|
|
}
|
|
|
|
&--info {
|
|
@include box($this, $dolphin, $dolphin-darker);
|
|
}
|
|
}
|