Removing and restructuring custom CSS for bootstrap - refs #2681
Alex Aragón
7 years ago
parent
f9c9db2984
commit
8494746531
@ -1,2 +0,0 @@ |
||||
@import "~bootstrap/scss/bootstrap"; |
||||
@import "~@fortawesome/fontawesome-free/css/all.css"; |
||||
@ -0,0 +1,27 @@ |
||||
// --------------------------------------------------------- |
||||
// MEDIA QUERIES |
||||
// --------------------------------------------------------- |
||||
|
||||
@mixin mq($condition) { |
||||
@media #{$condition} { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
@mixin from($breakpoint) { |
||||
@media screen and (min-width: $breakpoint){ |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
@mixin to($breakpoint) { |
||||
@media screen and (max-width: $breakpoint - 1px) { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
@mixin between($start, $end){ |
||||
@media screen and (min-width: $start) and (max-width: $end - 1px) { |
||||
@content; |
||||
} |
||||
} |
||||
@ -1,8 +0,0 @@ |
||||
// --------------------------------------------------------- |
||||
// FOOTER |
||||
// --------------------------------------------------------- |
||||
|
||||
footer { |
||||
z-index: 1; |
||||
position: relative; |
||||
} |
||||
@ -1,4 +0,0 @@ |
||||
@import 'footer'; |
||||
@import 'topbar'; |
||||
@import 'loader'; |
||||
@import 'sidebar'; |
||||
@ -1,4 +1,6 @@ |
||||
@import "utils/index"; |
||||
@import 'settings/index'; |
||||
@import 'screens/index'; |
||||
@import 'components/index'; |
||||
@import 'variables'; |
||||
@import "media"; |
||||
@import 'loader'; |
||||
@import 'base'; |
||||
@import 'topbar'; |
||||
@import 'sidebar'; |
||||
|
||||
@ -1 +0,0 @@ |
||||
@import 'base'; |
||||
@ -1,26 +0,0 @@ |
||||
// --------------------------------------------------------- |
||||
// BREAKPOINTS |
||||
// --------------------------------------------------------- |
||||
|
||||
$breakpoint-xl : 1440px; |
||||
$breakpoint-lg : 1200px; |
||||
$breakpoint-md : 992px; |
||||
$breakpoint-sm : 768px; |
||||
$breakpoint-xs : 0; |
||||
|
||||
$breakpoints: ( |
||||
"xl\\+" "screen and (min-width: #{$breakpoint-xl})", |
||||
"lg\\+" "screen and (min-width: #{$breakpoint-lg})", |
||||
"md\\+" "screen and (min-width: #{$breakpoint-md})", |
||||
"sm\\+" "screen and (min-width: #{$breakpoint-sm})", |
||||
"xs\\+" "screen and (min-width: #{$breakpoint-xs})", |
||||
|
||||
"xl-" "screen and (max-width: #{$breakpoint-xl - 1px})", |
||||
"lg-" "screen and (max-width: #{$breakpoint-lg - 1px})", |
||||
"md-" "screen and (max-width: #{$breakpoint-md - 1px})", |
||||
"sm-" "screen and (max-width: #{$breakpoint-sm - 1px})", |
||||
|
||||
"lg" "screen and (min-width: #{$breakpoint-lg - 1px}) and (max-width: #{$breakpoint-xl - 1px})", |
||||
"md" "screen and (min-width: #{$breakpoint-md - 1px}) and (max-width: #{$breakpoint-lg - 1px})", |
||||
"sm" "screen and (min-width: #{$breakpoint-sm - 1px}) and (max-width: #{$breakpoint-md - 1px})", |
||||
); |
||||
@ -1,7 +0,0 @@ |
||||
// --------------------------------------------------------- |
||||
// FONTS |
||||
// --------------------------------------------------------- |
||||
|
||||
$font-primary: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; |
||||
$font-secondary: $font-primary; |
||||
$font-size-base: 0.875rem; |
||||
@ -1,3 +0,0 @@ |
||||
@import 'breakpoints'; |
||||
@import 'colors'; |
||||
@import 'fonts'; |
||||
@ -1,194 +0,0 @@ |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Fixed Width |
||||
// --------------------------------------------------------- |
||||
|
||||
.w-1\/4r, .sz-1\/4r { width: 0.25rem; } |
||||
.w-1\/2r, .sz-1\/2r { width: 0.5rem; } |
||||
.w-3\/4r, .sz-3\/4r { width: 0.75rem; } |
||||
.w-1r, .sz-1r { width: 1rem; } |
||||
.w-3\/2r, .sz-3\/2r { width: 1.5rem; } |
||||
.w-2r, .sz-2r { width: 2rem; } |
||||
.w-5\/2r, .sz-5\/2r { width: 2.5rem; } |
||||
.w-3r, .sz-3r { width: 3rem; } |
||||
.w-7\/2r, .sz-7\/2r { width: 3.5rem; } |
||||
.w-4r, .sz-4r { width: 4rem; } |
||||
.w-9\/2r, .sz-9\/2r { width: 4.5rem; } |
||||
.w-5r, .sz-5r { width: 5rem; } |
||||
.w-11\/2r, .sz-11\/2r { width: 5.5rem; } |
||||
.w-6r, .sz-6r { width: 6rem; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Relative Width |
||||
// --------------------------------------------------------- |
||||
|
||||
.w-0 { width: 0px; } |
||||
.w-10p { width: 10%; } |
||||
.w-20p { width: 20%; } |
||||
.w-30p { width: 30%; } |
||||
.w-40p { width: 40%; } |
||||
.w-50p { width: 50%; } |
||||
.w-60p { width: 60%; } |
||||
.w-70p { width: 70%; } |
||||
.w-80p { width: 80%; } |
||||
.w-90p { width: 90%; } |
||||
.w-100p { width: 100%; } |
||||
.w-1px { width: 1px; } |
||||
.w-a { width: auto; } |
||||
|
||||
|
||||
// --------------------------------------------------------- |
||||
// @Fixed Height |
||||
// --------------------------------------------------------- |
||||
|
||||
.h-1\/4r, .sz-1\/4r { height: 0.25rem; } |
||||
.h-1\/2r, .sz-1\/2r { height: 0.5rem; } |
||||
.h-3\/4r, .sz-3\/4r { height: 0.75rem; } |
||||
.h-1r, .sz-1r { height: 1rem; } |
||||
.h-3\/2r, .sz-3\/2r { height: 1.5rem; } |
||||
.h-2r, .sz-2r { height: 2rem; } |
||||
.h-5\/2r, .sz-5\/2r { height: 2.5rem; } |
||||
.h-3r, .sz-3r { height: 3rem; } |
||||
.h-7\/2r, .sz-7\/2r { height: 3.5rem; } |
||||
.h-4r, .sz-4r { height: 4rem; } |
||||
.h-9\/2r, .sz-9\/2r { height: 4.5rem; } |
||||
.h-5r, .sz-5r { height: 5rem; } |
||||
.h-11\/2r, .sz-11\/2r { height: 5.5rem; } |
||||
.h-6r, .sz-6r { height: 6rem; } |
||||
|
||||
|
||||
.h-0 { height: 0; } |
||||
.h-auto { height: auto; } |
||||
.h-100p { height: 100%; } |
||||
.h-100vh { height: 100vh; } |
||||
|
||||
|
||||
// --------------------------------------------------------- |
||||
// @Max Size |
||||
// --------------------------------------------------------- |
||||
|
||||
.mw-100p { max-width: 100%; } |
||||
.mh-100p { max-height: 100%; } |
||||
|
||||
|
||||
// --------------------------------------------------------- |
||||
// @Quick Border Helpers |
||||
// --------------------------------------------------------- |
||||
|
||||
.bd { border: #{$border-width} solid #{$border-color} !important; } |
||||
.bdT { border-top: #{$border-width} solid #{$border-color} !important; } |
||||
.bdR { border-right: #{$border-width} solid #{$border-color} !important; } |
||||
.bdB { border-bottom: #{$border-width} solid #{$border-color} !important; } |
||||
.bdL { border-left: #{$border-width} solid #{$border-color} !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Border Width |
||||
// --------------------------------------------------------- |
||||
|
||||
@for $i from 0 through 5 { |
||||
.bdw-#{$i} { border-width: #{$i}px !important; } |
||||
.bdwT-#{$i} { border-top-width: #{$i}px !important; } |
||||
.bdwR-#{$i} { border-right-width: #{$i}px !important; } |
||||
.bdwB-#{$i} { border-bottom-width: #{$i}px !important; } |
||||
.bdwL-#{$i} { border-left-width: #{$i}px !important; } |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Border Radius |
||||
// --------------------------------------------------------- |
||||
|
||||
@for $i from 0 to 5 { |
||||
.bdrs-#{$i} { border-radius: #{$i}px !important; } |
||||
|
||||
.bdrsT-#{$i} { |
||||
border-top-left-radius: #{$i}px !important; |
||||
border-top-right-radius: #{$i}px !important; |
||||
} |
||||
|
||||
.bdrsR-#{$i} { |
||||
border-top-right-radius: #{$i}px !important; |
||||
border-bottom-right-radius: #{$i}px !important; |
||||
} |
||||
|
||||
.bdrsB-#{$i} { |
||||
border-bottom-left-radius: #{$i}px !important; |
||||
border-bottom-right-radius: #{$i}px !important; |
||||
} |
||||
|
||||
.bdrsL-#{$i} { |
||||
border-top-left-radius: #{$i}px !important; |
||||
border-bottom-left-radius: #{$i}px !important; |
||||
} |
||||
} |
||||
|
||||
.bdrs-50p { border-radius: 50% !important; } |
||||
.bdrs-10em { border-radius: 10em !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Border Style |
||||
// --------------------------------------------------------- |
||||
|
||||
.bds-n { border-style: none !important; } |
||||
.bds-s { border-style: solid !important; } |
||||
.bds-dt { border-style: dotted !important; } |
||||
.bds-ds { border-style: dashed !important; } |
||||
.bds-db { border-style: double !important; } |
||||
.bds-g { border-style: groove !important; } |
||||
.bds-r { border-style: ridge !important; } |
||||
.bds-i { border-style: inset !important; } |
||||
.bds-o { border-style: outset !important; } |
||||
|
||||
|
||||
.peers { |
||||
box-sizing: border-box; |
||||
display: flex !important; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
flex-flow: row wrap; |
||||
height: auto; |
||||
max-width: 100%; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
.peer { |
||||
display: block; |
||||
height: auto; |
||||
flex: 0 0 auto; |
||||
} |
||||
|
||||
.peer-greed { |
||||
flex: 1 1 auto; |
||||
// overflow: hidden; |
||||
} |
||||
|
||||
.peers-greed > .peer, |
||||
.peers-greed > .peers { |
||||
flex: 1 1 auto; |
||||
} |
||||
|
||||
.peer > img { |
||||
max-width: none; |
||||
} |
||||
|
||||
.peer-greed > img { |
||||
max-width: 100%; |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Align Items |
||||
// --------------------------------------------------------- |
||||
|
||||
.ai-fs { align-items: flex-start; } |
||||
.ai-fe { align-items: flex-end; } |
||||
.ai-c { align-items: center; } |
||||
.ai-b { align-items: baseline; } |
||||
.ai-s { align-items: stretch; } |
||||
|
||||
|
||||
// --------------------------------------------------------- |
||||
// @Pseudo Elements |
||||
// --------------------------------------------------------- |
||||
|
||||
.no-after::after { display: none !important; } |
||||
.no-before::before { display: none !important; } |
||||
@ -1,3 +0,0 @@ |
||||
@import "mediaqueriesranges"; |
||||
@import "border"; |
||||
@import "typography"; |
||||
@ -1,69 +0,0 @@ |
||||
// --------------------------------------------------------- |
||||
// @TOC |
||||
// --------------------------------------------------------- |
||||
|
||||
// + @General Media Query |
||||
// + @All Above Media Query |
||||
// + @All Under Media Query |
||||
// + @Between Two Devices Media Query |
||||
|
||||
// --------------------------------------------------------- |
||||
// @General Media Query Mixin |
||||
// --------------------------------------------------------- |
||||
|
||||
// Mixin used for custom rules that don't follow |
||||
// any of the following premade media queries. |
||||
|
||||
@mixin mq($condition) { |
||||
@media #{$condition} { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @All Above Media Query Mixin |
||||
// --------------------------------------------------------- |
||||
|
||||
// Mixin used to match certain breakpoint |
||||
// and all devices above it. |
||||
|
||||
@mixin from($breakpoint) { |
||||
@media screen and (min-width: $breakpoint){ |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @All Under Media Query Mixin |
||||
// --------------------------------------------------------- |
||||
|
||||
// Mixin used to match all devices under certain breakpoint. |
||||
|
||||
@mixin to($breakpoint) { |
||||
@media screen and (max-width: $breakpoint - 1px) { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Between Two Devices Media Query Mixin |
||||
// --------------------------------------------------------- |
||||
|
||||
// Mixin used to match the devices between 2 breakpoints. |
||||
|
||||
@mixin between($start, $end){ |
||||
@media screen and (min-width: $start) and (max-width: $end - 1px) { |
||||
@content; |
||||
} |
||||
} |
||||
|
||||
//---------------------------------------------------------- |
||||
// @Placeholder |
||||
//---------------------------------------------------------- |
||||
|
||||
@mixin placeholder { |
||||
&::-webkit-input-placeholder { @content; } |
||||
&:-moz-placeholder { @content; } |
||||
&::-moz-placeholder { @content; } |
||||
&:-ms-input-placeholder { @content; } |
||||
} |
||||
@ -1,95 +0,0 @@ |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Text Align |
||||
// --------------------------------------------------------- |
||||
|
||||
.ta-c { text-align: center !important; } |
||||
.ta-l { text-align: left !important; } |
||||
.ta-r { text-align: right !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Text Transform |
||||
// --------------------------------------------------------- |
||||
|
||||
.tt-n { text-transform: none !important; } |
||||
.tt-u { text-transform: uppercase !important; } |
||||
.tt-l { text-transform: lowercase !important; } |
||||
.tt-c { text-transform: capitalize !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Font Style |
||||
// --------------------------------------------------------- |
||||
|
||||
.fs-i { font-style: italic !important; } |
||||
.fs-o { font-style: oblique !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Text Decoration |
||||
// --------------------------------------------------------- |
||||
|
||||
.td-n { text-decoration: none !important; } |
||||
.td-o { text-decoration: overline !important; } |
||||
.td-lt { text-decoration: line-through !important; } |
||||
.td-u { text-decoration: underline !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @White Space |
||||
// --------------------------------------------------------- |
||||
|
||||
.whs-nw { white-space: nowrap !important; } |
||||
.whs-p { white-space: pre !important; } |
||||
.whs-n { white-space: normal !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Word Break |
||||
// --------------------------------------------------------- |
||||
|
||||
.wob-n { word-break: normal !important; } |
||||
.wob-ba { word-break: break-all !important; } |
||||
.wob-k { word-break: keep-all !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Word Wrap |
||||
// --------------------------------------------------------- |
||||
|
||||
.wow-bw { word-wrap: break-word !important; } |
||||
.wow-n { word-wrap: normal !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Text Overflow |
||||
// --------------------------------------------------------- |
||||
|
||||
.tov-e { text-overflow: ellipsis !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Font Size |
||||
// --------------------------------------------------------- |
||||
|
||||
.fsz-xs { font-size: 0.75rem !important; } |
||||
.fsz-sm { font-size: 0.87rem !important; } |
||||
.fsz-def { font-size: 1rem !important; } |
||||
.fsz-md { font-size: 1.15rem !important; } |
||||
.fsz-lg { font-size: 1.4rem !important; } |
||||
.fsz-xl { font-size: 1.7rem !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Font Weight |
||||
// --------------------------------------------------------- |
||||
|
||||
.fw-100 { font-weight: 100 !important; } |
||||
.fw-200 { font-weight: 200 !important; } |
||||
.fw-300 { font-weight: 300 !important; } |
||||
.fw-400 { font-weight: 400 !important; } |
||||
.fw-500 { font-weight: 500 !important; } |
||||
.fw-600 { font-weight: 600 !important; } |
||||
.fw-700 { font-weight: 700 !important; } |
||||
.fw-800 { font-weight: 800 !important; } |
||||
.fw-900 { font-weight: 900 !important; } |
||||
|
||||
// --------------------------------------------------------- |
||||
// @Line Height |
||||
// --------------------------------------------------------- |
||||
|
||||
.lh-0 { line-height: 0 !important; } |
||||
.lh-1 { line-height: 1 !important; } |
||||
.lh-3\/2 { line-height: 1.5 !important; } |
||||
Loading…
Reference in new issue