78 lines
1.3 KiB
SCSS
78 lines
1.3 KiB
SCSS
/*
|
|
* Code Box Module
|
|
*
|
|
* Code examples with multiple sections (tabs)
|
|
*
|
|
*/
|
|
|
|
|
|
/*
|
|
* Variables
|
|
*/
|
|
|
|
$codebox-anti-pattern-color: $red-700;
|
|
$codebox-primary-color: $blue-700;
|
|
$codebox-selected: $white;
|
|
|
|
|
|
/*
|
|
* Class
|
|
*/
|
|
|
|
.code-box,
|
|
.code-example {
|
|
background: $white;
|
|
border: 2px solid $codebox-primary-color;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
|
margin-bottom: $unit * 3;
|
|
|
|
&.is-anti-pattern {
|
|
border: 2px solid $codebox-anti-pattern-color;
|
|
|
|
header {
|
|
background: $codebox-anti-pattern-color;
|
|
}
|
|
}
|
|
|
|
header {
|
|
background: $codebox-primary-color;
|
|
color: $white;
|
|
padding: $unit $unit 0 $unit;
|
|
}
|
|
|
|
h4 {
|
|
color: $white;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: $unit * 3;
|
|
margin: 0;
|
|
outline: none;
|
|
opacity: 1;
|
|
padding: 0 0 $unit $unit;
|
|
text-transform: none;
|
|
}
|
|
|
|
nav button {
|
|
background: $blue-600;
|
|
border-radius: 2px 2px 0 0;
|
|
color: $white;
|
|
font-size: 13px;
|
|
height: $unit * 4;
|
|
line-height: $unit * 4;
|
|
margin-right: $unit;
|
|
outline: none;
|
|
padding: 0 ($unit * 3);
|
|
text-transform: none;
|
|
|
|
&.is-selected,
|
|
&.selected {
|
|
background: $white;
|
|
color: $blue-grey-600;
|
|
}
|
|
}
|
|
|
|
.prettyprint {
|
|
background: $codebox-selected;
|
|
}
|
|
} |