Refactor app.scss to make use of nesting. This is part of #5.
This commit is contained in:
Arpad Csanyi
159
css/app.css
159
css/app.css
@@ -1,3 +1,6 @@
|
||||
#main-content {
|
||||
margin-left: 250px; }
|
||||
|
||||
#sidebar-menu {
|
||||
background-color: #f5f5f5;
|
||||
border-right: 1px solid #ccc;
|
||||
@@ -5,110 +8,86 @@
|
||||
overflow-y: auto;
|
||||
width: 250px;
|
||||
height: 100%; }
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0; }
|
||||
#sidebar-menu ul {
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
#sidebar-menu ul li {
|
||||
list-style: none;
|
||||
padding: 0; }
|
||||
|
||||
.sidebar__level-1 {
|
||||
padding: .5rem 1rem; }
|
||||
padding: .5rem 1rem;
|
||||
font-size: 2rem;
|
||||
line-height: 3rem; }
|
||||
.sidebar__level-1--item {
|
||||
margin-top: 0; }
|
||||
.sidebar__level-1--item:nth-child(1) {
|
||||
margin: 0; }
|
||||
.sidebar__level-1 .fa-chevron-up,
|
||||
.sidebar__level-1 .fa-chevron-down {
|
||||
margin-right: 1rem;
|
||||
font-size: 1.5rem;
|
||||
position: relative;
|
||||
top: .5rem;
|
||||
display: none; }
|
||||
.sidebar__level-1:hover .fa-chevron-up,
|
||||
.sidebar__level-1:hover .fa-chevron-down {
|
||||
display: inline-block; }
|
||||
|
||||
.sidebar__level-1, .sidebar__level-2 {
|
||||
padding-left: 15px; }
|
||||
|
||||
.sidebar__level-2 {
|
||||
margin-left: 15px; }
|
||||
.sidebar__level-2--item {
|
||||
padding: 0 20px 0 0; }
|
||||
.sidebar__level-2--item.active {
|
||||
background-color: #555;
|
||||
color: #fff; }
|
||||
.sidebar__level-2--item.active .fa-star,
|
||||
.sidebar__level-2--item.active .fa-star-o {
|
||||
display: none; }
|
||||
.sidebar__level-2--item.active:hover {
|
||||
background-color: #555; }
|
||||
.sidebar__level-2--item.active:hover .fa-star,
|
||||
.sidebar__level-2--item.active:hover .fa-star-o {
|
||||
display: block;
|
||||
color: #fff; }
|
||||
.sidebar__level-2--item:hover .fa-star-o {
|
||||
color: #000; }
|
||||
.sidebar__level-2--item:hover .fa-star-o:hover {
|
||||
color: #000; }
|
||||
.sidebar__level-2--item .fa.pull-right {
|
||||
position: relative;
|
||||
top: 2px; }
|
||||
.sidebar__level-2--item .fa-star-o {
|
||||
color: #f5f5f5; }
|
||||
.sidebar__level-2--item .fa-star {
|
||||
color: #666; }
|
||||
|
||||
.sidebar__level-1:hover,
|
||||
.sidebar__level-2--item:hover {
|
||||
.sidebar__level-1:hover, .sidebar__level-2--item:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.05); }
|
||||
|
||||
#sidebar-menu .sidebar__level-2--item {
|
||||
padding: 0 20px 0 0; }
|
||||
|
||||
#sidebar-menu .sidebar__level-2--item .fa.pull-right {
|
||||
position: relative;
|
||||
top: 2px; }
|
||||
|
||||
#sidebar-menu .fa-star-o {
|
||||
color: #f5f5f5; }
|
||||
|
||||
#sidebar-menu .sidebar__level-2--item:hover .fa-star-o {
|
||||
color: #000; }
|
||||
|
||||
#sidebar-menu .sidebar__level-2--item .fa-star-o:hover {
|
||||
color: #000; }
|
||||
|
||||
#sidebar-menu .fa-star {
|
||||
color: #666; }
|
||||
|
||||
.sidebar__level-1 {
|
||||
font-size: 2rem;
|
||||
line-height: 3rem; }
|
||||
|
||||
.sidebar__level-1--item {
|
||||
margin-top: 0; }
|
||||
|
||||
.sidebar__level-1--item:nth-child(1) {
|
||||
margin: 0; }
|
||||
|
||||
#sidebar-menu .sidebar__actions--list {
|
||||
margin-top: 1rem; }
|
||||
|
||||
.sidebar__action--item {
|
||||
text-align: center; }
|
||||
|
||||
.sidebar__action {
|
||||
width: 80%; }
|
||||
|
||||
.sidebar__level-2--item.active {
|
||||
background-color: #555;
|
||||
color: #fff; }
|
||||
|
||||
.sidebar__level-2--item.active i {
|
||||
display: none; }
|
||||
|
||||
.menu--bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%; }
|
||||
|
||||
.menu--bottom .sidebar__level-1 {
|
||||
background-color: transparent;
|
||||
padding: 1rem; }
|
||||
|
||||
#main-content {
|
||||
margin-left: 250px; }
|
||||
.menu--bottom .sidebar__level-1 {
|
||||
background-color: transparent;
|
||||
padding: 1rem; }
|
||||
|
||||
.pane-title {
|
||||
margin-bottom: 1em; }
|
||||
|
||||
.macro__name.active,
|
||||
.keymap__name.active,
|
||||
.keymap__abbrev.active {
|
||||
box-shadow: 0 0 0px 1px #ccc, 0 0 5px 0px #ccc;
|
||||
border-color: transparent; }
|
||||
|
||||
.macro__name,
|
||||
.keymap__name,
|
||||
.keymap__abbrev {
|
||||
border: none;
|
||||
border-bottom: 2px dotted #999; }
|
||||
|
||||
.macro__name,
|
||||
.macro__name.active,
|
||||
.keymap__name,
|
||||
.keymap__name.active,
|
||||
.keymap__abbrev,
|
||||
.keymap__abbrev.active {
|
||||
padding: 0 .5rem;
|
||||
margin: 0 .25rem; }
|
||||
.pane-title__name, .pane-title__abbrev {
|
||||
border: none;
|
||||
border-bottom: 2px dotted #999;
|
||||
padding: 0 .5rem;
|
||||
margin: 0 .25rem; }
|
||||
.pane-title__name.active, .pane-title__abbrev.active {
|
||||
box-shadow: 0 0 0px 1px #ccc, 0 0 5px 0px #ccc;
|
||||
border-color: transparent; }
|
||||
|
||||
.keymap__is-default.fa-star {
|
||||
color: #333; }
|
||||
@@ -131,15 +110,3 @@ li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto; }
|
||||
|
||||
.sidebar__level-1 .fa.fa-chevron-down,
|
||||
.sidebar__level-1 .fa.fa-chevron-up {
|
||||
margin-right: 1rem;
|
||||
font-size: 1.5rem;
|
||||
position: relative;
|
||||
top: .5rem;
|
||||
display: none; }
|
||||
|
||||
.sidebar__level-1:hover .fa.fa-chevron-down,
|
||||
.sidebar__level-1:hover .fa.fa-chevron-up {
|
||||
display: inline-block; }
|
||||
|
||||
203
sass/app.scss
203
sass/app.scss
@@ -1,3 +1,7 @@
|
||||
#main-content {
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
#sidebar-menu {
|
||||
background-color: #f5f5f5;
|
||||
border-right: 1px solid #ccc;
|
||||
@@ -5,81 +9,116 @@
|
||||
overflow-y: auto;
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
|
||||
// General list styles for the sidebar-menu.
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar {
|
||||
&__level-1 {
|
||||
padding: .5rem 1rem;
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
&--item {
|
||||
margin-top: 0;
|
||||
|
||||
.sidebar__level-1 {
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
&:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__level-1, .sidebar__level-2 {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.fa-chevron-up,
|
||||
.fa-chevron-down {
|
||||
margin-right: 1rem;
|
||||
font-size: 1.5rem;
|
||||
position: relative;
|
||||
top: .5rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar__level-2 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
&:hover {
|
||||
.fa-chevron-up,
|
||||
.fa-chevron-down {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__level-1:hover,
|
||||
.sidebar__level-2--item:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
// General spacing of level-1 and level-2 elements.
|
||||
&__level-1,
|
||||
&__level-2 {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
#sidebar-menu .sidebar__level-2--item {
|
||||
padding: 0 20px 0 0;
|
||||
}
|
||||
&__level-2 {
|
||||
margin-left: 15px;
|
||||
|
||||
#sidebar-menu .sidebar__level-2--item .fa.pull-right {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
&--item {
|
||||
padding: 0 20px 0 0;
|
||||
|
||||
#sidebar-menu .fa-star-o {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
&.active {
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
|
||||
#sidebar-menu .sidebar__level-2--item:hover .fa-star-o {
|
||||
color: #000;
|
||||
}
|
||||
.fa-star,
|
||||
.fa-star-o {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidebar-menu .sidebar__level-2--item .fa-star-o:hover {
|
||||
color: #000;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #555;
|
||||
|
||||
#sidebar-menu .fa-star {
|
||||
color: #666;
|
||||
}
|
||||
.fa-star,
|
||||
.fa-star-o {
|
||||
display: block;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__level-1 {
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
&:hover {
|
||||
.fa-star-o {
|
||||
color: #000;
|
||||
|
||||
.sidebar__level-1--item {
|
||||
margin-top: 0;
|
||||
}
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__level-1--item:nth-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
// General "right side" icon theming.
|
||||
.fa.pull-right {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.sidebar__level-2--item.active {
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
}
|
||||
.fa-star-o {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
.sidebar__level-2--item.active i {
|
||||
display: none;
|
||||
.fa-star {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// General hover over menu items.
|
||||
&__level-1,
|
||||
&__level-2--item {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu--bottom {
|
||||
@@ -87,15 +126,13 @@ li {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu--bottom .sidebar__level-1 {
|
||||
background-color: transparent;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
margin-left: 250px;
|
||||
.sidebar {
|
||||
&__level-1 {
|
||||
background-color: transparent;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pane-title {
|
||||
@@ -115,23 +152,26 @@ li {
|
||||
}
|
||||
}
|
||||
|
||||
.keymap__is-default.fa-star {
|
||||
color: #333;
|
||||
}
|
||||
.keymap__is-default {
|
||||
&.fa-star {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.keymap__is-default.fa-star-o {
|
||||
color: #333;
|
||||
}
|
||||
&.fa-star-o {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.keymap__is-default:hover {
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.uhk {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// BOF: These styles will be deleted when removing OWL carousel.
|
||||
.owl-carousel {
|
||||
max-width: 991px;
|
||||
margin: auto;
|
||||
@@ -142,17 +182,4 @@ li {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sidebar__level-1 .fa.fa-chevron-down,
|
||||
.sidebar__level-1 .fa.fa-chevron-up {
|
||||
margin-right: 1rem;
|
||||
font-size: 1.5rem;
|
||||
position: relative;
|
||||
top: .5rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar__level-1:hover .fa.fa-chevron-down,
|
||||
.sidebar__level-1:hover .fa.fa-chevron-up {
|
||||
display: inline-block;
|
||||
}
|
||||
// EOF: These styles will be deleted when removing OWL carousel.
|
||||
|
||||
Reference in New Issue
Block a user