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
Split 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">
{% for sidebar_hash in page.sidebar %}
{% 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] }}
</li></a>
{% 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 {
background-color: $oc-gray-3;
}
.sidebar__link__light {
color: $oc-white !important;
color: $oc-gray-9 !important;
&:hover {
// color: $secondary !important;
// color: $oc-gray-9 !important;
color: $secondary !important;
}
}
@ -57,17 +50,17 @@
.active,
.active:hover {
background-color: "transparent"!important;
border-left: 5px solid $oc-white;
font-weight: bold;
background-color: $oc-gray-3 !important;
box-shadow: inset 5px 0 $primary;
& * {
color: $oc-white !important;
color: $primary !important;
}
}
.rb-sidebar__2 .active {
border-left: 5px solid $primary;
background-color: $oc-gray-3 !important;
box-shadow: inset 5px 0 $primary;
}
.rp-navbar__top {
@ -94,11 +87,11 @@
}
.rb-sidebar__1 {
background-color: $primary;
background-color: $oc-gray-1;
}
.rb-sidebar__2 {
background-color: $oc-white;
background-color: $oc-gray-0;
}
.rb-contain {
@ -143,21 +136,16 @@
width: 12.45%;
}
.list-group-item:focus, .list-group-item:hover {
// background-color: $oc-gray-3 !important;
border-left: 5px solid $primary;
}
.list-group-item:focus,
.list-group-item:hover {
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;
border-left: 5px solid $oc-white;
}
.rb-sidebar__2 .active:focus, .rb-sidebar__2 .active:hover {
border-left: 5px solid $primary;
& * {
color: $primary;
}
}
.rb-sidebar__2 .list-group-item {
width: 100%;
.list-group-item.active {
color: $primary;
}
.bg-box {

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

@ -6,18 +6,17 @@
.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; }
.rb-sidebar__2 .list-group-item { color: #212529 !important; }
.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; }
.active, .active:hover { background-color: "transparent" !important; border-left: 5px solid #ffffff; font-weight: bold; }
.active *, .active:hover * { color: #ffffff !important; }
.active, .active:hover { background-color: #dee2e6 !important; box-shadow: inset 5px 0 #4661A9; }
.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; }
@ -28,9 +27,9 @@
.navbar-light .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); }
.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%; }
@ -49,13 +48,10 @@
@media screen and (max-width: 991px) { .hidden-sm { display: none !important; } }
.sidebar-fill { width: 12.45%; }
.list-group-item:focus, .list-group-item:hover { border-left: 5px solid #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; }
.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 { width: 100%; }
.list-group-item.active { color: #4661A9; }
.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">
<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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</li></a>

20
_site/copywriting/index.html
View File

@ -75,61 +75,61 @@
<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
</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
</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
</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
</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
</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
</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
</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
</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
</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
</li></a>

8
_site/visuals/index.html
View File

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

Write Preview
Loading…
Cancel
Save