Update styles with different Base sets
parent
d30f140b6a
commit
f4f1743090
|
@ -1,40 +0,0 @@
|
|||
.container {
|
||||
max-width: ($breakpoint-xl - $grid-gutter * 2);
|
||||
padding-left: $grid-gutter;
|
||||
padding-right: $grid-gutter;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@include breakpoint(m) {
|
||||
.container-m {
|
||||
width: ($breakpoint-m - $grid-gutter * 2);
|
||||
max-width: auto;
|
||||
padding-left: $grid-gutter;
|
||||
padding-right: $grid-gutter;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(l) {
|
||||
.container-l {
|
||||
width: ($breakpoint-l - $grid-gutter * 2);
|
||||
max-width: auto;
|
||||
padding-left: $grid-gutter;
|
||||
padding-right: $grid-gutter;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(xl) {
|
||||
.container-xl {
|
||||
width: ($breakpoint-xl - $grid-gutter * 2);
|
||||
max-width: auto;
|
||||
padding-left: $grid-gutter;
|
||||
padding-right: $grid-gutter;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
|
@ -1,38 +0,0 @@
|
|||
$breakpoint-m: 768px !default;
|
||||
$breakpoint-l: 980px !default;
|
||||
$breakpoint-xl: 1200px !default;
|
||||
|
||||
$grid-gutter: 16px !default;
|
||||
|
||||
// Mixins
|
||||
|
||||
// Breakpoints
|
||||
// Example: .component { @include breakpoint(m) { background: red; } };
|
||||
// Output: .component { @media only screen and (min-width: 720px) { background: red; } }
|
||||
@mixin breakpoint($bp) {
|
||||
@if $bp == xl {
|
||||
@media only screen and (min-width: $breakpoint-xl) { @content ; }
|
||||
}
|
||||
@else if $bp == l {
|
||||
@media only screen and (min-width: $breakpoint-l) { @content ; }
|
||||
}
|
||||
@else if $bp == m {
|
||||
@media only screen and (min-width: $breakpoint-m) { @content ; }
|
||||
}
|
||||
}
|
||||
|
||||
// Background Color with Opacity
|
||||
// Example: .element { @include background-rgba(#000000, .5); }}
|
||||
// Output: .element { background: rgba(0, 0, 0, .5); }
|
||||
@mixin background-rgba($color, $alpha) {
|
||||
background-color: $color;
|
||||
background-color: rgba($color, $alpha);
|
||||
}
|
||||
|
||||
// Animations
|
||||
// Example: .fade { @mixin animate(1s); }
|
||||
// Output: .fade { animation-duration: 1s; animation-fill-mode: both; }
|
||||
@mixin animate($duration: 1s) {
|
||||
animation-duration: $duration;
|
||||
animation-fill-mode: both;
|
||||
}
|
|
@ -0,0 +1,18 @@
|
|||
table {
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border: 1px solid var(--primary-text-color);
|
||||
}
|
||||
table td,
|
||||
table th {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--primary-text-color);
|
||||
border-right: 1px solid var(--primary-text-color);
|
||||
}
|
||||
|
||||
table tr:nth-child(2n) { background-color: #f6f8fa; }
|
||||
|
||||
.table-responsive { overflow-x: auto; }
|
|
@ -2,8 +2,7 @@
|
|||
@import "_text.scss";
|
||||
@import "_markdown.scss";
|
||||
@import "_penguincoder.scss";
|
||||
@import "_mixins.scss";
|
||||
@import "_containers.scss";
|
||||
@import "_tables.scss";
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
|
|
Loading…
Reference in New Issue