diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index 94c5c4e69..4297862e1 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -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}
diff --git a/modules/backend/assets/js/october-min.js b/modules/backend/assets/js/october-min.js
index 3d8b366c4..1ce8edb9b 100644
--- a/modules/backend/assets/js/october-min.js
+++ b/modules/backend/assets/js/october-min.js
@@ -748,6 +748,7 @@ this.$scrollbar=$('').addClass('scrollbar-scrollbar')
this.$track=$('').addClass('scrollbar-track').appendTo(this.$scrollbar)
this.$thumb=$('').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)})
diff --git a/modules/backend/assets/less/layout/sidenav.less b/modules/backend/assets/less/layout/sidenav.less
index b50c7b89d..65bc4e350 100644
--- a/modules/backend/assets/less/layout/sidenav.less
+++ b/modules/backend/assets/less/layout/sidenav.less
@@ -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; }
-}
\ No newline at end of file
+}
diff --git a/modules/system/assets/ui/less/form.less b/modules/system/assets/ui/less/form.less
index 2732b48bb..a26327866 100644
--- a/modules/system/assets/ui/less/form.less
+++ b/modules/system/assets/ui/less/form.less
@@ -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;
+ }
+ }
}
}
diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css
index d08a51151..2e83bb7c5 100644
--- a/modules/system/assets/ui/storm.css
+++ b/modules/system/assets/ui/storm.css
@@ -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}