uracreative
/
i2p-styleguide
mirror of https://github.com/uracreative/i2p-styleguide
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

added oc-grays

pull/1/head
eupiteco 6 years ago
parent
70bd68af76
commit
38c16034ef
11 changed files with 227 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 41
      _includes/visuals/colors.html
  2. 42
      _site/assets/styles/components.scss
  3. 14
      _site/assets/styles/layout.scss
  4. 38
      _site/assets/styles/main.css
  5. 22
      _site/assets/styles/vars.scss
  6. 4
      _site/assets/styles/visuals.scss
  7. 41
      _site/visuals/index.html
  8. 42
      assets/styles/components.scss
  9. 14
      assets/styles/layout.scss
  10. 22
      assets/styles/vars.scss
  11. 4
      assets/styles/visuals.scss

41
_includes/visuals/colors.html
View File

@ -22,19 +22,48 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-white text-black small">#ffffff</div> <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-0 text-black small">#f8f9fa</div>
<h6 class="pt2 text-left">White</h6> <h6 class="pt2 text-left">Gray 0</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-1 text-black small">#95989A</div> <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-1 text-black small">#f1f3f5</div>
<h6 class="pt2 text-left">Gray 1</h6> <h6 class="pt2 text-left">Gray 1</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-2 text-white small">#181818</div> <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-2 text-black small">#e9ecef</div>
<h6 class="pt2 text-left">Gray 2</h6> <h6 class="pt2 text-left">Gray 2</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-black text-white small">#000000</div> <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-3 text-black small">#dee2e6</div>
<h6 class="pt2 text-left">Black</h6> <h6 class="pt2 text-left">Gray 3</h6>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-4 text-black small">#ced4da</div>
<h6 class="pt2 text-left">Gray 4</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-5 text-black small">#adb5bd</div>
<h6 class="pt2 text-left">Gray 5</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-6 text-white small">#868e96</div>
<h6 class="pt2 text-left">Gray 6</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-7 text-white small">#495057</div>
<h6 class="pt2 text-left">Gray 7</h6>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-8 text-white small">#343a40</div>
<h6 class="pt2 text-left">Gray 8</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-9 text-white small">#212529</div>
<h6 class="pt2 text-left">Gray 9</h6>
</div> </div>
</div> </div>

42
_site/assets/styles/components.scss
View File

@ -19,6 +19,10 @@
} }
.background-gray-0 {
background-color: $oc-gray-0;
}
.background-gray-1 { .background-gray-1 {
background-color: $oc-gray-1; background-color: $oc-gray-1;
} }
@ -27,6 +31,34 @@
background-color: $oc-gray-2; background-color: $oc-gray-2;
} }
.background-gray-3 {
background-color: $oc-gray-3;
}
.background-gray-4 {
background-color: $oc-gray-4;
}
.background-gray-5 {
background-color: $oc-gray-5;
}
.background-gray-6 {
background-color: $oc-gray-6;
}
.background-gray-7 {
background-color: $oc-gray-7;
}
.background-gray-8 {
background-color: $oc-gray-8;
}
.background-gray-9 {
background-color: $oc-gray-9;
}
.background-black { .background-black {
background-color: $oc-black; background-color: $oc-black;
} }
@ -39,8 +71,8 @@
color: $secondary; color: $secondary;
} }
.color-gray-2 { .color-gray-9 {
color: $oc-gray-1; color: $oc-gray-3;
} }
.rb-code { .rb-code {
@ -216,14 +248,14 @@
} }
.pagination .page-link { .pagination .page-link {
color: $oc-gray-2; color: $oc-gray-9;
} }
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th { .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: $oc-gray-1 !important; background-color: $oc-gray-3 !important;
} }
.mark, mark { .mark, mark {
background-color: $oc-gray-1 !important; background-color: $oc-gray-3 !important;
padding: .2em !important; padding: .2em !important;
} }

14
_site/assets/styles/layout.scss
View File

@ -4,8 +4,8 @@
.border-left-right { .border-left-right {
// z-index: 99; // z-index: 99;
border-left: 1px solid $oc-gray-1 !important; border-left: 1px solid $oc-gray-3 !important;
border-right: 1px solid $oc-gray-1 !important; border-right: 1px solid $oc-gray-3 !important;
} }
.sidebar { .sidebar {
@ -34,11 +34,11 @@
.rb-sidebar__2 { .rb-sidebar__2 {
& .list-group-item { & .list-group-item {
color: $oc-gray-2 !important; color: $oc-gray-9 !important;
} }
} }
.sidebar-wrapper { .sidebar-wrapper {
background-color: $oc-gray-1; background-color: $oc-gray-3;
} }
.sidebar__link__light { .sidebar__link__light {
@ -46,7 +46,7 @@
&:hover { &:hover {
// color: $secondary !important; // color: $secondary !important;
// color: $oc-gray-2 !important; // color: $oc-gray-9 !important;
} }
} }
@ -145,12 +145,12 @@
} }
.list-group-item:focus, .list-group-item:hover { .list-group-item:focus, .list-group-item:hover {
// background-color: $oc-gray-1 !important; // background-color: $oc-gray-3 !important;
box-shadow: inset 5px 0 $oc-white; box-shadow: inset 5px 0 $oc-white;
} }
.rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { .rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover {
// background-color: $oc-gray-1 !important; // background-color: $oc-gray-3 !important;
box-shadow: inset 5px 0 $primary; box-shadow: inset 5px 0 $primary;
} }
.sidebar .list-group-item { .sidebar .list-group-item {

38
_site/assets/styles/main.css
View File

@ -1,14 +1,14 @@
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 400 !important; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 400 !important; }
.border-left-right { border-left: 1px solid #adb5bd !important; border-right: 1px solid #adb5bd !important; } .border-left-right { border-left: 1px solid #dee2e6 !important; border-right: 1px solid #dee2e6 !important; }
.sidebar { min-height: 100vh; height: 100%; width: 100%; } .sidebar { min-height: 100vh; height: 100%; width: 100%; }
.sidebar .list-group { position: fixed; } .sidebar .list-group { position: fixed; }
.sidebar .list-group-item { background-color: transparent; border: 0; border-radius: 0 !important; font-size: 1.1rem; font-weight: 600 !important; padding-left: 1.1rem !important; } .sidebar .list-group-item { background-color: transparent; border: 0; border-radius: 0 !important; font-size: 1.1rem; font-weight: 600 !important; padding-left: 1.1rem !important; }
.rb-sidebar__2 .list-group-item { color: #181818 !important; } .rb-sidebar__2 .list-group-item { color: #212529 !important; }
.sidebar-wrapper { background-color: #adb5bd; } .sidebar-wrapper { background-color: #dee2e6; }
.sidebar__link__light { color: #ffffff !important; } .sidebar__link__light { color: #ffffff !important; }
@ -61,7 +61,7 @@
.b-border { border-bottom: 2px solid lightgrey !important; } .b-border { border-bottom: 2px solid lightgrey !important; }
p { color: #181818; } p { color: #212529; }
.color { height: 100px; } .color { height: 100px; }
@ -78,7 +78,7 @@ h3.header-display::before { height: 2.625rem; transform: translate(-15px, 0.6562
h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625rem); } h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625rem); }
.icon { font-size: 20px; background-color: #181818; padding: 20px; } .icon { font-size: 20px; background-color: #212529; padding: 20px; }
.background-primary { background-color: #4661A9; } .background-primary { background-color: #4661A9; }
@ -88,9 +88,25 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
.background-danger { background-color: #E15647; } .background-danger { background-color: #E15647; }
.background-gray-1 { background-color: #adb5bd; } .background-gray-0 { background-color: #f8f9fa; }
.background-gray-2 { background-color: #181818; } .background-gray-1 { background-color: #f1f3f5; }
.background-gray-2 { background-color: #e9ecef; }
.background-gray-3 { background-color: #dee2e6; }
.background-gray-4 { background-color: #ced4da; }
.background-gray-5 { background-color: #adb5bd; }
.background-gray-6 { background-color: #868e96; }
.background-gray-7 { background-color: #495057; }
.background-gray-8 { background-color: #343a40; }
.background-gray-9 { background-color: #212529; }
.background-black { background-color: #000000; } .background-black { background-color: #000000; }
@ -98,7 +114,7 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
.color-secondary { color: #60AB60; } .color-secondary { color: #60AB60; }
.color-gray-2 { color: #adb5bd; } .color-gray-9 { color: #dee2e6; }
.rb-code { font-family: 'Source Code Pro', monospace !important; } .rb-code { font-family: 'Source Code Pro', monospace !important; }
@ -146,11 +162,11 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r
.rb-paginate-active { background-color: #4661A9 !important; color: white !important; } .rb-paginate-active { background-color: #4661A9 !important; color: white !important; }
.rb-paginate-active:hover { background-color: #60AB60 !important; } .rb-paginate-active:hover { background-color: #60AB60 !important; }
.pagination .page-link { color: #181818; } .pagination .page-link { color: #212529; }
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th { background-color: #adb5bd !important; } .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th { background-color: #dee2e6 !important; }
.mark, mark { background-color: #adb5bd !important; padding: .2em !important; } .mark, mark { background-color: #dee2e6 !important; padding: .2em !important; }
@media (min-width: 992px) { .display-xs { display: none !important; } } @media (min-width: 992px) { .display-xs { display: none !important; } }
@media (max-width: 992px) { .display-md { display: none !important; } } @media (max-width: 992px) { .display-md { display: none !important; } }

22
_site/assets/styles/vars.scss
View File

@ -8,7 +8,7 @@ $font: 'Source Sans Pro', sans-serif !important;
// //
// //
// ๐—– ๐—ข ๐—Ÿ ๐—ข ๐—ฅ // ๐—– ๐—ข ๐—Ÿ ๐—ข ๐—ฅ
// v 1.6.2 // v 1.6.3
// //
// โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ” // โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”
@ -24,9 +24,25 @@ $oc-black: #000000;
// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ // โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
$oc-gray-list: ( $oc-gray-list: (
"1": #adb5bd, "0": #f8f9fa,
"2": #181818 "1": #f1f3f5,
"2": #e9ecef,
"3": #dee2e6,
"4": #ced4da,
"5": #adb5bd,
"6": #868e96,
"7": #495057,
"8": #343a40,
"9": #212529
); );
$oc-gray-0: map-get($oc-gray-list, "0");
$oc-gray-1: map-get($oc-gray-list, "1"); $oc-gray-1: map-get($oc-gray-list, "1");
$oc-gray-2: map-get($oc-gray-list, "2"); $oc-gray-2: map-get($oc-gray-list, "2");
$oc-gray-3: map-get($oc-gray-list, "3");
$oc-gray-4: map-get($oc-gray-list, "4");
$oc-gray-5: map-get($oc-gray-list, "5");
$oc-gray-6: map-get($oc-gray-list, "6");
$oc-gray-7: map-get($oc-gray-list, "7");
$oc-gray-8: map-get($oc-gray-list, "8");
$oc-gray-9: map-get($oc-gray-list, "9");

4
_site/assets/styles/visuals.scss
View File

@ -1,5 +1,5 @@
p { p {
color: $oc-gray-2; color: $oc-gray-9;
} }
.color { .color {
@ -56,6 +56,6 @@ h4.header-display {
.icon { .icon {
font-size: 20px; font-size: 20px;
background-color: $oc-gray-2; background-color: $oc-gray-9;
padding: 20px; padding: 20px;
} }

41
_site/visuals/index.html
View File

@ -131,20 +131,49 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-white text-black small">#ffffff</div> <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-0 text-black small">#f8f9fa</div>
<h6 class="pt2 text-left">White</h6> <h6 class="pt2 text-left">Gray 0</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-1 text-black small">#95989A</div> <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-1 text-black small">#f1f3f5</div>
<h6 class="pt2 text-left">Gray 1</h6> <h6 class="pt2 text-left">Gray 1</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-2 text-white small">#181818</div> <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-2 text-black small">#e9ecef</div>
<h6 class="pt2 text-left">Gray 2</h6> <h6 class="pt2 text-left">Gray 2</h6>
</div> </div>
<div class="col-xs-12 col-sm-3 col-md-3"> <div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-black text-white small">#000000</div> <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-3 text-black small">#dee2e6</div>
<h6 class="pt2 text-left">Black</h6> <h6 class="pt2 text-left">Gray 3</h6>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-4 text-black small">#ced4da</div>
<h6 class="pt2 text-left">Gray 4</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-5 text-black small">#adb5bd</div>
<h6 class="pt2 text-left">Gray 5</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-6 text-white small">#868e96</div>
<h6 class="pt2 text-left">Gray 6</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-7 text-white small">#495057</div>
<h6 class="pt2 text-left">Gray 7</h6>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-8 text-white small">#343a40</div>
<h6 class="pt2 text-left">Gray 8</h6>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-9 text-white small">#212529</div>
<h6 class="pt2 text-left">Gray 9</h6>
</div> </div>
</div> </div>

42
assets/styles/components.scss
View File

@ -19,6 +19,10 @@
} }
.background-gray-0 {
background-color: $oc-gray-0;
}
.background-gray-1 { .background-gray-1 {
background-color: $oc-gray-1; background-color: $oc-gray-1;
} }
@ -27,6 +31,34 @@
background-color: $oc-gray-2; background-color: $oc-gray-2;
} }
.background-gray-3 {
background-color: $oc-gray-3;
}
.background-gray-4 {
background-color: $oc-gray-4;
}
.background-gray-5 {
background-color: $oc-gray-5;
}
.background-gray-6 {
background-color: $oc-gray-6;
}
.background-gray-7 {
background-color: $oc-gray-7;
}
.background-gray-8 {
background-color: $oc-gray-8;
}
.background-gray-9 {
background-color: $oc-gray-9;
}
.background-black { .background-black {
background-color: $oc-black; background-color: $oc-black;
} }
@ -39,8 +71,8 @@
color: $secondary; color: $secondary;
} }
.color-gray-2 { .color-gray-9 {
color: $oc-gray-1; color: $oc-gray-3;
} }
.rb-code { .rb-code {
@ -216,14 +248,14 @@
} }
.pagination .page-link { .pagination .page-link {
color: $oc-gray-2; color: $oc-gray-9;
} }
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th { .table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: $oc-gray-1 !important; background-color: $oc-gray-3 !important;
} }
.mark, mark { .mark, mark {
background-color: $oc-gray-1 !important; background-color: $oc-gray-3 !important;
padding: .2em !important; padding: .2em !important;
} }

14
assets/styles/layout.scss
View File

@ -4,8 +4,8 @@
.border-left-right { .border-left-right {
// z-index: 99; // z-index: 99;
border-left: 1px solid $oc-gray-1 !important; border-left: 1px solid $oc-gray-3 !important;
border-right: 1px solid $oc-gray-1 !important; border-right: 1px solid $oc-gray-3 !important;
} }
.sidebar { .sidebar {
@ -34,11 +34,11 @@
.rb-sidebar__2 { .rb-sidebar__2 {
& .list-group-item { & .list-group-item {
color: $oc-gray-2 !important; color: $oc-gray-9 !important;
} }
} }
.sidebar-wrapper { .sidebar-wrapper {
background-color: $oc-gray-1; background-color: $oc-gray-3;
} }
.sidebar__link__light { .sidebar__link__light {
@ -46,7 +46,7 @@
&:hover { &:hover {
// color: $secondary !important; // color: $secondary !important;
// color: $oc-gray-2 !important; // color: $oc-gray-9 !important;
} }
} }
@ -145,12 +145,12 @@
} }
.list-group-item:focus, .list-group-item:hover { .list-group-item:focus, .list-group-item:hover {
// background-color: $oc-gray-1 !important; // background-color: $oc-gray-3 !important;
box-shadow: inset 5px 0 $oc-white; box-shadow: inset 5px 0 $oc-white;
} }
.rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { .rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover {
// background-color: $oc-gray-1 !important; // background-color: $oc-gray-3 !important;
box-shadow: inset 5px 0 $primary; box-shadow: inset 5px 0 $primary;
} }
.sidebar .list-group-item { .sidebar .list-group-item {

22
assets/styles/vars.scss
View File

@ -8,7 +8,7 @@ $font: 'Source Sans Pro', sans-serif !important;
// //
// //
// ๐—– ๐—ข ๐—Ÿ ๐—ข ๐—ฅ // ๐—– ๐—ข ๐—Ÿ ๐—ข ๐—ฅ
// v 1.6.2 // v 1.6.3
// //
// โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ” // โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”
@ -24,9 +24,25 @@ $oc-black: #000000;
// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ // โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
$oc-gray-list: ( $oc-gray-list: (
"1": #adb5bd, "0": #f8f9fa,
"2": #181818 "1": #f1f3f5,
"2": #e9ecef,
"3": #dee2e6,
"4": #ced4da,
"5": #adb5bd,
"6": #868e96,
"7": #495057,
"8": #343a40,
"9": #212529
); );
$oc-gray-0: map-get($oc-gray-list, "0");
$oc-gray-1: map-get($oc-gray-list, "1"); $oc-gray-1: map-get($oc-gray-list, "1");
$oc-gray-2: map-get($oc-gray-list, "2"); $oc-gray-2: map-get($oc-gray-list, "2");
$oc-gray-3: map-get($oc-gray-list, "3");
$oc-gray-4: map-get($oc-gray-list, "4");
$oc-gray-5: map-get($oc-gray-list, "5");
$oc-gray-6: map-get($oc-gray-list, "6");
$oc-gray-7: map-get($oc-gray-list, "7");
$oc-gray-8: map-get($oc-gray-list, "8");
$oc-gray-9: map-get($oc-gray-list, "9");

4
assets/styles/visuals.scss
View File

@ -1,5 +1,5 @@
p { p {
color: $oc-gray-2; color: $oc-gray-9;
} }
.color { .color {
@ -56,6 +56,6 @@ h4.header-display {
.icon { .icon {
font-size: 20px; font-size: 20px;
background-color: $oc-gray-2; background-color: $oc-gray-9;
padding: 20px; padding: 20px;
} }

Write Preview
Loadingโ€ฆ
Cancel
Save