|
|
@@ -15,16 +15,16 @@
|
|
|
See the License for the specific language governing permissions and
|
|
|
limitations under the License.
|
|
|
*/
|
|
|
-@sidebar-width: 180px;
|
|
|
+@sidebar-width: 250px;
|
|
|
@collapsed-sidebar-width: 48px;
|
|
|
@sidebar-animation-duration: 250ms;
|
|
|
-@sidebar-category-font-size: 13px;
|
|
|
-@sidebar-left-spacing: 16px;
|
|
|
+@sidebar-category-font-size: 16px;
|
|
|
+@sidebar-left-spacing: 10px;
|
|
|
|
|
|
.hue-dw-sidebar-container {
|
|
|
position: relative;
|
|
|
.flex(0 0);
|
|
|
- .flex-basis(@sidebar-width);
|
|
|
+ .flex-basis(250px);
|
|
|
transition: flex-basis @sidebar-animation-duration;
|
|
|
|
|
|
.sidebar {
|
|
|
@@ -34,12 +34,12 @@
|
|
|
bottom: 0;
|
|
|
right: 3px;
|
|
|
overflow: hidden;
|
|
|
- background-color: @cui-white;
|
|
|
+ background-color: #323543;
|
|
|
box-shadow: 0 0 3px 0 @cui-gray-600;
|
|
|
|
|
|
.fa:before {
|
|
|
font-size: 16px;
|
|
|
- color: @text-color;
|
|
|
+ color: #B8BEC4;
|
|
|
}
|
|
|
|
|
|
.sidebar-content {
|
|
|
@@ -54,12 +54,18 @@
|
|
|
.sidebar-item {
|
|
|
display: block;
|
|
|
line-height: 36px;
|
|
|
- color: @text-color;
|
|
|
+ color: #B8BEC4;
|
|
|
white-space: nowrap;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ .sidebar-caret {
|
|
|
+ opacity: 0;
|
|
|
+ float:left;
|
|
|
+ }
|
|
|
|
|
|
.sidebar-icon {
|
|
|
float: left;
|
|
|
- padding: 0 14px 0 @sidebar-left-spacing;
|
|
|
+ padding: 0 16px 0 14px;
|
|
|
&.with-tooltip {
|
|
|
display: none;
|
|
|
}
|
|
|
@@ -75,28 +81,35 @@
|
|
|
}
|
|
|
|
|
|
.sidebar-item.active {
|
|
|
- background: @cui-blue-050;
|
|
|
- color: @cui-blue-500;
|
|
|
+ background: #2d2f3b;
|
|
|
+ color: #5eab41;
|
|
|
+
|
|
|
+ .sidebar-caret {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
|
|
|
.fa:before {
|
|
|
- color: @cui-blue-500;
|
|
|
+ color: #5eab41;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .sidebar-item:hover {
|
|
|
- color: @cui-blue-500;
|
|
|
+ .sidebar-item:not(.active):hover {
|
|
|
+ background-color: #404350;
|
|
|
+ color: @cui-white;
|
|
|
.fa:before {
|
|
|
- color: @cui-blue-500;
|
|
|
+ background-color: #404350;
|
|
|
+ color: @cui-white;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.sidebar-item:active {
|
|
|
- background: @cui-blue-050;
|
|
|
+ background: #2d2f3b;
|
|
|
+ color: #5eab41;
|
|
|
}
|
|
|
|
|
|
.sidebar-category-item {
|
|
|
margin: 20px 0 4px @sidebar-left-spacing;
|
|
|
- font-size: @sidebar-category-font-size;
|
|
|
+ font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
color: @cui-gray-600;
|
|
|
transition: opacity @sidebar-animation-duration;
|
|
|
@@ -114,7 +127,7 @@
|
|
|
line-height: 36px;
|
|
|
width: 100%;
|
|
|
text-align: right;
|
|
|
- color: @text-color;
|
|
|
+ color: #B8BEC4;
|
|
|
box-shadow: 0 0 3px 0 @cui-gray-600;
|
|
|
|
|
|
span {
|
|
|
@@ -122,7 +135,12 @@
|
|
|
}
|
|
|
|
|
|
&:hover {
|
|
|
- background: @cui-gray-100;
|
|
|
+ background-color: #404350;
|
|
|
+ color: @cui-white;
|
|
|
+ .fa:before {
|
|
|
+ background-color: #404350;
|
|
|
+ color: @cui-white;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -135,7 +153,7 @@
|
|
|
|
|
|
|
|
|
&.collapsed {
|
|
|
- .flex-basis(@collapsed-sidebar-width);
|
|
|
+ .flex-basis(50px);
|
|
|
|
|
|
.sidebar {
|
|
|
.sidebar-category-item,
|