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

improvement on the sidebar colors

writing-page-updates
eupiteco 6 years ago
parent
57cb728c55
commit
f8f072f388
7 changed files with 69 additions and 97 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. 2
      _includes/sidebar.html
  2. 46
      _site/assets/styles/layout.scss
  3. 24
      _site/assets/styles/main.css
  4. 20
      _site/components/index.html
  5. 20
      _site/copywriting/index.html
  6. 8
      _site/visuals/index.html
  7. 46
      assets/styles/layout.scss

2
_includes/sidebar.html
View File

@ -2,7 +2,7 @@
<ul class="p-0 list-group pt-3 sidebar-fill"> <ul class="p-0 list-group pt-3 sidebar-fill">
{% for sidebar_hash in page.sidebar %} {% for sidebar_hash in page.sidebar %}
{% for link in sidebar_hash %} {% for link in sidebar_hash %}
<a href="#{{ link[0] }}"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#{{ link[0] }}"><li class="list-group-item rb-sidebar">
{{ link[1] }} {{ link[1] }}
</li></a> </li></a>
{% endfor %} {% endfor %}

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

@ -31,22 +31,15 @@
} }
} }
.rb-sidebar__2 {
& .list-group-item {
color: $oc-gray-9 !important;
}
}
.sidebar-wrapper { .sidebar-wrapper {
background-color: $oc-gray-3; background-color: $oc-gray-3;
} }
.sidebar__link__light { .sidebar__link__light {
color: $oc-white !important; color: $oc-gray-9 !important;
&:hover { &:hover {
// color: $secondary !important; color: $secondary !important;
// color: $oc-gray-9 !important;
} }
} }
@ -57,17 +50,17 @@
.active, .active,
.active:hover { .active:hover {
background-color: "transparent"!important; background-color: $oc-gray-3 !important;
border-left: 5px solid $oc-white; box-shadow: inset 5px 0 $primary;
font-weight: bold;
& * { & * {
color: $oc-white !important; color: $primary !important;
} }
} }
.rb-sidebar__2 .active { .rb-sidebar__2 .active {
border-left: 5px solid $primary; background-color: $oc-gray-3 !important;
box-shadow: inset 5px 0 $primary;
} }
.rp-navbar__top { .rp-navbar__top {
@ -94,11 +87,11 @@
} }
.rb-sidebar__1 { .rb-sidebar__1 {
background-color: $primary; background-color: $oc-gray-1;
} }
.rb-sidebar__2 { .rb-sidebar__2 {
background-color: $oc-white; background-color: $oc-gray-0;
} }
.rb-contain { .rb-contain {
@ -143,21 +136,16 @@
width: 12.45%; width: 12.45%;
} }
.list-group-item:focus, .list-group-item:hover { .list-group-item:focus,
// background-color: $oc-gray-3 !important; .list-group-item:hover {
border-left: 5px solid $primary; background-color: $oc-gray-2 !important;
}
.rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { & * {
// background-color: $oc-gray-3 !important; color: $primary;
border-left: 5px solid $oc-white; }
}
.rb-sidebar__2 .active:focus, .rb-sidebar__2 .active:hover {
border-left: 5px solid $primary;
} }
.list-group-item.active {
.rb-sidebar__2 .list-group-item { color: $primary;
width: 100%;
} }
.bg-box { .bg-box {

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

@ -6,18 +6,17 @@
.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: 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: 1rem; font-weight: 600 !important; padding-left: 1.1rem !important; }
.rb-sidebar__2 .list-group-item { color: #212529 !important; }
.sidebar-wrapper { background-color: #dee2e6; } .sidebar-wrapper { background-color: #dee2e6; }
.sidebar__link__light { color: #ffffff !important; } .sidebar__link__light { color: #212529 !important; }
.sidebar__link__light:hover { color: #60AB60 !important; }
.row { margin: auto !important; } .row { margin: auto !important; }
.active, .active:hover { background-color: "transparent" !important; border-left: 5px solid #ffffff; font-weight: bold; } .active, .active:hover { background-color: #dee2e6 !important; box-shadow: inset 5px 0 #4661A9; }
.active *, .active:hover * { color: #ffffff !important; } .active *, .active:hover * { color: #4661A9 !important; }
.rb-sidebar__2 .active { border-left: 5px solid #4661A9; } .rb-sidebar__2 .active { background-color: #dee2e6 !important; box-shadow: inset 5px 0 #4661A9; }
.rp-navbar__top { background-color: #4661A9; } .rp-navbar__top { background-color: #4661A9; }
@ -28,9 +27,9 @@
.navbar-light .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); } .navbar-light .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); }
.navbar-light .navbar-nav .nav-link:hover { color: #ffffff; } .navbar-light .navbar-nav .nav-link:hover { color: #ffffff; }
.rb-sidebar__1 { background-color: #4661A9; } .rb-sidebar__1 { background-color: #f1f3f5; }
.rb-sidebar__2 { background-color: #ffffff; } .rb-sidebar__2 { background-color: #f8f9fa; }
.rb-contain { width: 100%; height: auto; max-height: 100%; } .rb-contain { width: 100%; height: auto; max-height: 100%; }
@ -49,13 +48,10 @@
@media screen and (max-width: 991px) { .hidden-sm { display: none !important; } } @media screen and (max-width: 991px) { .hidden-sm { display: none !important; } }
.sidebar-fill { width: 12.45%; } .sidebar-fill { width: 12.45%; }
.list-group-item:focus, .list-group-item:hover { border-left: 5px solid #4661A9; } .list-group-item:focus, .list-group-item:hover { background-color: #e9ecef !important; }
.list-group-item:focus *, .list-group-item:hover * { color: #4661A9; }
.rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { border-left: 5px solid #ffffff; }
.rb-sidebar__2 .active:focus, .rb-sidebar__2 .active:hover { border-left: 5px solid #4661A9; }
.rb-sidebar__2 .list-group-item { width: 100%; } .list-group-item.active { color: #4661A9; }
.bg-box { background-color: #f1f3f5 !important; } .bg-box { background-color: #f1f3f5 !important; }

20
_site/components/index.html
View File

@ -75,61 +75,61 @@
<ul class="p-0 list-group pt-3 sidebar-fill"> <ul class="p-0 list-group pt-3 sidebar-fill">
<a href="#alerts"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#alerts"><li class="list-group-item rb-sidebar">
Alerts Alerts
</li></a> </li></a>
<a href="#badges"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#badges"><li class="list-group-item rb-sidebar">
Badges Badges
</li></a> </li></a>
<a href="#buttons"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#buttons"><li class="list-group-item rb-sidebar">
Buttons Buttons
</li></a> </li></a>
<a href="#cards"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#cards"><li class="list-group-item rb-sidebar">
Cards Cards
</li></a> </li></a>
<a href="#footer"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#footer"><li class="list-group-item rb-sidebar">
Footer Footer
</li></a> </li></a>
<a href="#forms"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#forms"><li class="list-group-item rb-sidebar">
Forms Forms
</li></a> </li></a>
<a href="#header"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#header"><li class="list-group-item rb-sidebar">
Header Header
</li></a> </li></a>
<a href="#jumbotron"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#jumbotron"><li class="list-group-item rb-sidebar">
Jumbotron Jumbotron
</li></a> </li></a>
<a href="#pagination"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#pagination"><li class="list-group-item rb-sidebar">
Pagination Pagination
</li></a> </li></a>
<a href="#tables"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#tables"><li class="list-group-item rb-sidebar">
Tables Tables
</li></a> </li></a>

20
_site/copywriting/index.html
View File

@ -75,61 +75,61 @@
<ul class="p-0 list-group pt-3 sidebar-fill"> <ul class="p-0 list-group pt-3 sidebar-fill">
<a href="#goals"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#goals"><li class="list-group-item rb-sidebar">
Goals & Principles Goals & Principles
</li></a> </li></a>
<a href="#voice"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#voice"><li class="list-group-item rb-sidebar">
Voice & Tone Voice & Tone
</li></a> </li></a>
<a href="#grammar"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#grammar"><li class="list-group-item rb-sidebar">
Grammar Grammar
</li></a> </li></a>
<a href="#mechanics"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#mechanics"><li class="list-group-item rb-sidebar">
Mechanics Mechanics
</li></a> </li></a>
<a href="#people"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#people"><li class="list-group-item rb-sidebar">
People & Design People & Design
</li></a> </li></a>
<a href="#blog-posts"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#blog-posts"><li class="list-group-item rb-sidebar">
Blog Posts Blog Posts
</li></a> </li></a>
<a href="#newsletter"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#newsletter"><li class="list-group-item rb-sidebar">
Newsletter Newsletter
</li></a> </li></a>
<a href="#social-media"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#social-media"><li class="list-group-item rb-sidebar">
Social Media Social Media
</li></a> </li></a>
<a href="#copyright"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#copyright"><li class="list-group-item rb-sidebar">
Copyright Copyright
</li></a> </li></a>
<a href="#word-list"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#word-list"><li class="list-group-item rb-sidebar">
Word List Word List
</li></a> </li></a>

8
_site/visuals/index.html
View File

@ -75,25 +75,25 @@
<ul class="p-0 list-group pt-3 sidebar-fill"> <ul class="p-0 list-group pt-3 sidebar-fill">
<a href="#colors"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#colors"><li class="list-group-item rb-sidebar">
Colors Colors
</li></a> </li></a>
<a href="#grid"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#grid"><li class="list-group-item rb-sidebar">
Grid Grid
</li></a> </li></a>
<a href="#typography"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#typography"><li class="list-group-item rb-sidebar">
Typography Typography
</li></a> </li></a>
<a href="#assets"><li class="list-group-item rb-sidebar"> <a class="sidebar__link__light" href="#assets"><li class="list-group-item rb-sidebar">
Assets Assets
</li></a> </li></a>

46
assets/styles/layout.scss
View File

@ -31,22 +31,15 @@
} }
} }
.rb-sidebar__2 {
& .list-group-item {
color: $oc-gray-9 !important;
}
}
.sidebar-wrapper { .sidebar-wrapper {
background-color: $oc-gray-3; background-color: $oc-gray-3;
} }
.sidebar__link__light { .sidebar__link__light {
color: $oc-white !important; color: $oc-gray-9 !important;
&:hover { &:hover {
// color: $secondary !important; color: $secondary !important;
// color: $oc-gray-9 !important;
} }
} }
@ -57,17 +50,17 @@
.active, .active,
.active:hover { .active:hover {
background-color: "transparent"!important; background-color: $oc-gray-3 !important;
border-left: 5px solid $oc-white; box-shadow: inset 5px 0 $primary;
font-weight: bold;
& * { & * {
color: $oc-white !important; color: $primary !important;
} }
} }
.rb-sidebar__2 .active { .rb-sidebar__2 .active {
border-left: 5px solid $primary; background-color: $oc-gray-3 !important;
box-shadow: inset 5px 0 $primary;
} }
.rp-navbar__top { .rp-navbar__top {
@ -94,11 +87,11 @@
} }
.rb-sidebar__1 { .rb-sidebar__1 {
background-color: $primary; background-color: $oc-gray-1;
} }
.rb-sidebar__2 { .rb-sidebar__2 {
background-color: $oc-white; background-color: $oc-gray-0;
} }
.rb-contain { .rb-contain {
@ -143,21 +136,16 @@
width: 12.45%; width: 12.45%;
} }
.list-group-item:focus, .list-group-item:hover { .list-group-item:focus,
// background-color: $oc-gray-3 !important; .list-group-item:hover {
border-left: 5px solid $primary; background-color: $oc-gray-2 !important;
}
.rb-sidebar__2 .list-group-item:focus, .rb-sidebar__2 .list-group-item:hover { & * {
// background-color: $oc-gray-3 !important; color: $primary;
border-left: 5px solid $oc-white; }
}
.rb-sidebar__2 .active:focus, .rb-sidebar__2 .active:hover {
border-left: 5px solid $primary;
} }
.list-group-item.active {
.rb-sidebar__2 .list-group-item { color: $primary;
width: 100%;
} }
.bg-box { .bg-box {

Write Preview
Loading…
Cancel
Save