Tighten up the look of extra small
Scales down the sidenav by converting px to em then dialing down the container font size Made the list search less dominating over the primary buttons
This commit is contained in:
Samuel Georges
parent
3be6dafa6b
commit
ff04fbff35
|
|
@ -778,18 +778,22 @@ nav#layout-mainmenu.navbar ul li.active,.mainmenu-collapsed li.active{color:#fff
|
|||
nav#layout-mainmenu.navbar ul li.active a,.mainmenu-collapsed li.active a{color:#ffffff !important}
|
||||
nav#layout-mainmenu.navbar ul li:hover,.mainmenu-collapsed li:hover{color:#ffffff;background:transparent}
|
||||
body.drag nav#layout-mainmenu.navbar ul.nav li:hover,body.drag .mainmenu-collapsed ul li:hover{color:rgba(255,255,255,0.6)}
|
||||
#layout-sidenav{position:absolute;height:100%;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
|
||||
.layout-sidenav-container{width:120px}
|
||||
#layout-sidenav{position:absolute;height:100%;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size:14px}
|
||||
#layout-sidenav ul{position:relative;margin:0;padding:0;height:100%;overflow:hidden}
|
||||
#layout-sidenav ul li{display:block;text-align:center;position:relative}
|
||||
#layout-sidenav ul li a{padding:20px 10px;display:block;font-size:13px;color:rgba(255,255,255,0.6);font-weight:normal;position:relative}
|
||||
#layout-sidenav ul li a{padding:1.429em .714em;display:block;font-size:.929em;color:rgba(255,255,255,0.6);font-weight:normal;position:relative}
|
||||
#layout-sidenav ul li a:hover{text-decoration:none;background-color:transparent}
|
||||
#layout-sidenav ul li a:focus{background:transparent}
|
||||
#layout-sidenav ul li a i{color:rgba(255,255,255,0.6);display:block;margin-bottom:5px;font-size:28px}
|
||||
#layout-sidenav ul li:first-child a{padding-top:30px}
|
||||
#layout-sidenav ul li a i{color:rgba(255,255,255,0.6);display:block;margin-bottom:5px;font-size:2em}
|
||||
#layout-sidenav ul li:first-child a{padding-top:2.143em}
|
||||
#layout-sidenav ul li.active a,#layout-sidenav ul li a:hover{color:#ffffff}
|
||||
#layout-sidenav ul li.active a i,#layout-sidenav ul li a:hover i{color:#ffffff}
|
||||
#layout-sidenav ul li span.counter{display:block;position:absolute;top:15px;right:15px;padding:2px 6px 3px 4px;background-color:#d9350f;color:#ffffff;font-size:11px;line-height:100%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1,);-ms-transform:scale(1,);transform:scale(1,);-webkit-transition:all 0.3s;transition:all 0.3s}
|
||||
#layout-sidenav ul li span.counter{display:block;position:absolute;top:1.071em;right:1.071em;padding:.143em .429em .214em .286em;background-color:#d9350f;color:#ffffff;font-size:.786em;line-height:100%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1,);-ms-transform:scale(1,);transform:scale(1,);-webkit-transition:all 0.3s;transition:all 0.3s}
|
||||
#layout-sidenav ul li span.counter.empty{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(0,);-ms-transform:scale(0,);transform:scale(0,)}
|
||||
@media (max-width:480px){#layout-sidenav{font-size:10px}
|
||||
.layout-sidenav-container{width:80px}
|
||||
}
|
||||
html.mobile #layout-sidenav ul{overflow:auto;-webkit-overflow-scrolling:touch}
|
||||
#layout-sidenav.layout-sidenav ul.drag li:not(.active) a:hover,.touch #layout-sidenav.layout-sidenav li:not(.active) a:hover{color:rgba(255,255,255,0.6) !important}
|
||||
#layout-sidenav.layout-sidenav ul.drag li:not(.active) a:hover i,.touch #layout-sidenav.layout-sidenav li:not(.active) a:hover i{color:rgba(255,255,255,0.6) !important}
|
||||
|
|
|
|||
|
|
@ -748,6 +748,7 @@ this.$scrollbar=$('<div />').addClass('scrollbar-scrollbar')
|
|||
this.$track=$('<div />').addClass('scrollbar-track').appendTo(this.$scrollbar)
|
||||
this.$thumb=$('<div />').addClass('scrollbar-thumb').appendTo(this.$track)
|
||||
$el.addClass('drag-scrollbar').addClass(options.vertical?'vertical':'horizontal').prepend(this.$scrollbar)
|
||||
$el.dragScroll()
|
||||
if(isTouch){this.$el.on('touchstart',function(event){var touchEvent=event.originalEvent;if(touchEvent.touches.length==1){startDrag(touchEvent.touches[0])
|
||||
event.stopPropagation()}})}
|
||||
else{this.$thumb.on('mousedown',function(event){startDrag(event)})
|
||||
|
|
|
|||
|
|
@ -2,11 +2,16 @@
|
|||
// Side navigation bar
|
||||
// --------------------------------------------------
|
||||
|
||||
.layout-sidenav-container {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
#layout-sidenav {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.box-sizing(border-box);
|
||||
font-size: @font-size-base;
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
|
|
@ -21,9 +26,9 @@
|
|||
position: relative;
|
||||
|
||||
a {
|
||||
padding: 20px 10px;
|
||||
padding: 1.429em .714em;
|
||||
display: block;
|
||||
font-size: @font-size-base - 1;
|
||||
font-size: .929em;
|
||||
color: @color-sidebarnav-inactive-text;
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
|
|
@ -41,12 +46,12 @@
|
|||
color: @color-sidebarnav-inactive-icon;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-size: 28px;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child a {
|
||||
padding-top: 30px;
|
||||
padding-top: 2.143em;
|
||||
}
|
||||
|
||||
&.active a, a:hover {
|
||||
|
|
@ -57,12 +62,12 @@
|
|||
span.counter {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
padding: 2px 6px 3px 4px;
|
||||
top: 1.071em;
|
||||
right: 1.071em;
|
||||
padding: .143em .429em .214em .286em;
|
||||
background-color: @color-sidebarnav-counter-bg;
|
||||
color: @color-sidebarnav-counter-text;
|
||||
font-size: 11px;
|
||||
font-size: .786em;
|
||||
line-height: 100%;
|
||||
.border-radius(3px);
|
||||
.opacity(1);
|
||||
|
|
@ -78,6 +83,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs) {
|
||||
#layout-sidenav {
|
||||
font-size: 10px;
|
||||
}
|
||||
.layout-sidenav-container {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
html.mobile {
|
||||
#layout-sidenav ul {
|
||||
overflow: auto;
|
||||
|
|
@ -90,4 +104,4 @@ html.mobile {
|
|||
color: @color-sidebarnav-inactive-text !important;
|
||||
i { color: @color-sidebarnav-inactive-icon !important; }
|
||||
&:after { display: none !important; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,6 +92,20 @@
|
|||
&:focus, &:active {
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs) {
|
||||
width: 40px;
|
||||
text-indent: -999px;
|
||||
|
||||
&:focus, &:active {
|
||||
text-indent: 0;
|
||||
width: 100px !important;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2449,6 +2449,10 @@ html.cssanimations .cursor-loading-indicator.hide{display:none}
|
|||
.form-control.icon.lock{background-position:right 0}
|
||||
.form-control.growable{width:110px}
|
||||
.form-control.growable:focus,.form-control.growable:active{width:200px !important}
|
||||
@media (max-width:480px){.form-control.growable{width:40px;text-indent:-999px}
|
||||
.form-control.growable:focus,.form-control.growable:active{text-indent:0;width:100px !important}
|
||||
.form-control.growable.icon{padding-right:0 !important}
|
||||
}
|
||||
.form-group{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
|
||||
.form-group:empty{display:none}
|
||||
.form-group,.form-group.layout-item{padding-bottom:20px;margin-bottom:0}
|
||||
|
|
|
|||
Loading…
Reference in New Issue