Refactoring of style files
Change-Id: I56d3641741f2289bb0f9dbaf641b85a401cf1042
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index 2a99589..f9cb33d 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -1,67 +1,71 @@
@charset "utf-8";
@import "../util";
-$border-size: 2px;
-$right-padding: 60px;
-
aside {
- outline: none;
- font-size: 10pt;
- display: block;
background-color: $dark-green;
- position: fixed;
- z-index: 100; // Needs to be behind alerts
- color: $nearly-white;
- width: $logo-left-distance;
- top: 0;
- left: 0;
- height: 100%;
+ color: $nearly-white;
+ width: $logo-left-distance;
+ position: fixed;
+ display: block;
+ transition: all .3s ease-in-out;
+ outline: none;
+ font-size: 10pt;
+ z-index: 100; // Needs to be behind alerts
+ top: 0;
+ left: 0;
+ height: 100%;
padding-top: 65px;
+
> div {
overflow-y: auto;
overflow-x: visible;
max-height: 100%;
}
+
> * {
opacity: 1;
}
+
&::after {
- position: absolute;
- display: block;
- opacity: 0;
- cursor: pointer;
- right: 0;
- bottom: 0;
- margin-right: -1 * ($standard-margin / 2);
- background-color: $dark-green;
- font-family: FontAwesome;
- content: $fa-login; // $fa-bars
+ @include icon-font;
+ position: absolute;
+ display: block;
+ opacity: 0;
+ cursor: pointer;
+ right: 0;
+ bottom: 0;
+ content: $fa-login;
font-size: 16pt;
- width: 16pt;
- height: 17pt;
- padding: 6pt;
+ width: 16pt;
+ height: 17pt;
+ padding: 6pt;
+ background-color: $dark-green;
border-top-right-radius: $standard-border-radius;
- }
- h2, legend {
- font: {
- size: 100%;
- weight: bold;
- }
- line-height: 2em;
- text-align: center;
- padding: 0;
- margin: 0;
+ margin-right: -1 * ($standard-margin / 2);
}
+ h2,
+ legend {
+ line-height: 2em;
+ text-align: center;
+ padding: 0;
+ margin: 0;
+ font: {
+ size: 100%;
+ weight: bold;
+ }
+ }
+
+ /**
+ * Navigation menu
+ */
ul.nav {
list-style-type: none;
-/*
- background-color: $light-green;
-*/
- margin: 0;
- font-size: 10pt;
- text-indent: 0;
- padding: 0;
+ margin: 0;
+ font-size: 10pt;
+ text-indent: 0;
+ padding: 0;
+
li {
padding: 0;
> a {
@@ -86,171 +90,127 @@
> a:link {
@include choose-item;
+ display: block;
+
border-right: {
width: $border-size;
style: solid;
}
- display: block;
&:hover {
- // color: inherit;
- transition: none;
@include choose-hover;
+ transition: none;
}
}
+
h3 {
- font: {
- weight: bold;
- size: 100%;
- }
padding: 0;
margin: 0;
+ font: {
+ weight: bold;
+ size: 100%;
+ }
}
-/*
- &.active {
- text-shadow: none;
- h3 {
- margin-bottom: 2pt;
- padding-bottom: 2pt;
- border-bottom: 1px solid black;
- }
- }
-*/
+
> a {
padding-left: 6pt;
}
+
li > a {
padding-left: 18pt;
}
+
li li > a {
padding-left: 36pt;
}
}
}
+
nav > ul > li > a {
font-weight: bold;
}
fieldset {
- position: relative;
+ position: relative;
border-width: 0;
+
legend {
display: none;
}
- input[type=text], input[type=password] {
+ input[type=text],
+ input[type=password] {
@include input-field;
width: 100%;
}
> form > div {
- position: relative;
- width: 100%;
- margin-top: 4px;
+ position: relative;
+ width: 100%;
+ margin-top: 4px;
padding-right: $button-width
}
> p {
color: $light-green;
}
+
> p.announcement {
color: $nearly-white;
> time {
- display: block;
+ display: block;
font-size: 70%;
}
}
+
hr {
border: none;
border-top: 2px solid $ids-grey-2;
}
+
ul {
- display: block;
- font-size: 80%;
+ display: block;
+ font-size: 80%;
text-align: right;
- > li {
- display: inline;
- &:first-child::after {
- content: ' | ';
- }
- }
- padding: 0;
+ padding: 0;
margin-top: 0;
+
+ > li {
+ display: inline;
+ &:first-child::after {
+ content: ' | ';
+ }
+ }
}
button {
position: absolute;
- // height: 100%;
- top: 0;
- right: 0;
+ top: 0;
+ right: 0;
&::after {
content: $fa-login;
}
}
}
-}
-aside {
- transition: all .3s ease-in-out;
-}
-
-aside.off, aside:not(:focus):not(.active) {
- margin-left: -1 * ($logo-left-distance - ($standard-margin / 2));
- &::after {
- opacity: 1;
- }
+ // Off aside
+ &.off,
+ &:not(:focus):not(.active) {
+ margin-left: -1 * ($logo-left-distance - ($standard-margin / 2));
+ &::after {
+ opacity: 1;
+ }
- > * {
- opacity: 0;
- transition: {
- property: opacity;
- duration: .3s;
+ > * {
+ opacity: 0;
+ transition: {
+ property: opacity;
+ duration: .3s;
+ }
}
}
-}
-aside.off::after {
- display:none;
-}
-
-
-/*
-#sidebar {
- text-shadow: none;
- height: 105%;
- margin-top: -10px;
- background-color: #496000;
- left: 0;
- top: 0;
- &.active {
- box-shadow: 2px 2px 5px darken($dark-green, 15%);
- margin-left: 0px;
- left: 0;
- top: 0;
- }
- &:not(.active) > i.fa-bars {
- opacity: 1;
- cursor: pointer;
- background-color: #496000;
- position: fixed;
- font-size: 16pt;
- width: 16pt;
- height: 17pt;
- padding: 6pt;
- bottom: 0;
- left: 0;
- border-top-right-radius: 5pt;
- }
- dl.info {
- font-size: 9pt;
- padding: 0 10pt;
- > dt {
- font-weight: bold;
- float: left;
- }
- > dd {
- text-align: right;
- }
+ &.off::after {
+ display:none;
}
}
-*/
\ No newline at end of file