Ticket #3837 - Settings for CSS @media classes

modules/boonex/artificer/data/template/system/css/default.less

@@ -1,4 +1,4 @@
-@import '../../../../../../../template/css/_mixins.less';
+@import (reference) '../../../../../../../template/css/_mixins.less';
 
 /**
  * Is used for inputs and buttons. They should have the same value 

modules/boonex/decorous/data/template/system/css/default.less

@@ -10,12 +10,13 @@
 .@{bx-root-class-name}.bx-def-color-bg-page {
     .background-color (@bx-color-page);
 }
+
 .@{bx-root-class-name}.bx-def-image-bg-page {
-	background-position: center center;
-	background-image: @bx-image-bg-page;
-	background-repeat: @bx-image-bg-page-repeat;
-	background-attachment: @bx-image-bg-page-attachment;
-	background-size: @bx-image-bg-page-size;
+    background-position: center center;
+    background-image: @bx-image-bg-page;
+    background-repeat: @bx-image-bg-page-repeat;
+    background-attachment: @bx-image-bg-page-attachment;
+    background-size: @bx-image-bg-page-size;
 }
 
 .@{bx-root-class-name} {
@@ -926,10 +927,10 @@
 }
 
 /* viewport */
-html.@{bx-root-class-name}.bx-media-tablet {
+html.bx-media-tablet {
     font-size: @bx-viewport-font-tablet;
 }
 
-html.@{bx-root-class-name}.bx-media-phone {
+html.bx-media-phone {
     font-size: @bx-viewport-font-mobile;
 }

modules/boonex/decorous/data/template/system/css/menu.less

@@ -1,11 +1,12 @@
 @import (reference) 'default.less';
 @import '../../../../../../../template/css/menu.css';
 
-.@{bx-root-class-name}{
+.@{bx-root-class-name} {
 
     .bx-menu-toolbar-padding {
         padding-top: 0;
     }
+
     /*--- Main (Side) Menu ---*/
     #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site {
         display: block;
@@ -50,14 +51,7 @@
     }
 
 
-
-
-    /*--- Account Popup ---*/
-:where(.bx-media-tablet, .bx-media-desktop) #bx-sliding-menu-account.bx-sliding-menu-main {
-	width: auto !important;
-	border-radius: 4px;
-}
-	
+    /*--- Account Popup ---*/	
     #bx-sliding-menu-account.bx-sliding-menu-main.bx-sliding-menu-fullheight {
         height: calc(100% - 4rem);
     }
@@ -129,9 +123,8 @@
         opacity:0.8;
     }
 
-    /*--- Add Content Menu ---*/
-
 
+    /*--- Add Content Menu ---*/
     #bx-sliding-menu-sys_add_content.bx-sliding-menu-main .bx-menu-object-sys_add_content {
         display: block;
         width: 100%;
@@ -280,65 +273,71 @@
     }
 }
 
-.bx-media-tablet .@{bx-root-class-name}{
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .bx-menu-floating-blocks-icon, 
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .bx-menu-floating-blocks-title {
-		display: block;
-		text-align: center;
-	}
+.bx-media-tablet .@{bx-root-class-name} {
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .bx-menu-floating-blocks-icon, 
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .bx-menu-floating-blocks-title {
+        display: block;
+        text-align: center;
+    }
 
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .bx-menu-floating-blocks-title {
-		padding-left: 0px;
-	}
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .bx-menu-floating-blocks-title {
+        padding-left: 0px;
+    }
 
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .sys-icon {
-		width: 100%;
-		font-size: 1.5rem;
-	}
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .sys-icon {
+        width: 100%;
+        font-size: 1.5rem;
+    }
 
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li img {
-		margin: 0px auto;
-		background-size: 70% 70%;
-	}
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li img {
+        margin: 0px auto;
+        background-size: 70% 70%;
+    }
 
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li > a > .bx-menu-floating-blocks-toggler{
-			display:  none;
-		}
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-floating-blocks-submenu{
-				position: absolute;
-				background: #fff;
-				width: 150px;
-				left: 120px;
-				top:0px;
-				border-radius: 4px;
-				box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
-				border-width: 1px;
-				border-style: solid;
-				border-color: rgba(0, 0, 0, 0.1);
-				z-index: 1000;
-	}
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-floating-blocks-submenu li
-	{
-		padding-left: 0rem;
-	}
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li > a > .bx-menu-floating-blocks-toggler{
+        display:  none;
+    }
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-floating-blocks-submenu{
+        position: absolute;
+        background: #fff;
+        width: 150px;
+        left: 120px;
+        top:0px;
+        border-radius: 4px;
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
+        border-width: 1px;
+        border-style: solid;
+        border-color: rgba(0, 0, 0, 0.1);
+        z-index: 1000;
+    }
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-floating-blocks-submenu li {
+        padding-left: 0rem;
+    }
 }
 
-.bx-media-phone .@{bx-root-class-name}{ 
-	.cd-main-content .cd-side-nav {
-		position:fixed;
-		width:100%;
-		height: calc(100%);
+.bx-media-phone .@{bx-root-class-name} { 
+    .cd-main-content .cd-side-nav {
+        position:fixed;
+        width:100%;
+        height: calc(100%);
 
-		overflow-x:hidden;
-		overflow-y:auto;
+        overflow-x:hidden;
+        overflow-y:auto;
 
-		-webkit-overflow-scrolling:touch;
-	}
+        -webkit-overflow-scrolling:touch;
+    }
 }
 
 :where(.bx-media-tablet, .bx-media-desktop) .@{bx-root-class-name}{ 
-	#bx-sliding-menu-sys_add_content.bx-sliding-menu-main {
-		width: auto !important;
-		border-radius: 4px;
-	}	
+    /*--- Account Popup ---*/
+    #bx-sliding-menu-account.bx-sliding-menu-main {
+        width: auto !important;
+        border-radius: 4px;
+    }
+
+    /*--- Add Content Menu ---*/
+    #bx-sliding-menu-sys_add_content.bx-sliding-menu-main {
+        width: auto !important;
+        border-radius: 4px;
+    }	
 }

modules/boonex/lucid/data/template/system/css/default.less

@@ -12,10 +12,10 @@
 }
 
 .@{bx-root-class-name}.bx-def-image-bg-page {
-	background-image: @bx-image-bg-page;
-	background-repeat: @bx-image-bg-page-repeat;
-	background-size: @bx-image-bg-page-size;
-	background-position: center center;
+    background-image: @bx-image-bg-page;
+    background-repeat: @bx-image-bg-page-repeat;
+    background-size: @bx-image-bg-page-size;
+    background-position: center center;
 }
 
 .@{bx-root-class-name} {
@@ -595,8 +595,6 @@
     #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt {
         padding: @bx-content-padding-menu-main;
     }
-    .bx-media-phone .cd-dropdown .cd-dropdown-content a, 
-    .bx-media-phone .cd-dropdown .cd-dropdown-content ul a,
     #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a {
         text-shadow: @bx-shadow-font-menu-main;
 
@@ -610,27 +608,12 @@
     #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li.bx-menu-tab-active a .sys-icon-a {
         color: @bx-font-color-menu-main-active;
     }
-    .bx-media-phone .cd-dropdown .cd-dropdown-content a:hover, 
-    .bx-media-phone .cd-dropdown .cd-dropdown-content ul a:hover,
-    .bx-media-phone .cd-dropdown .cd-dropdown-content a:hover .sys-icon, 
-    .bx-media-phone .cd-dropdown .cd-dropdown-content ul a:hover .sys-icon,
-    .bx-media-phone .cd-dropdown .cd-dropdown-content a:hover .sys-icon-a, 
-    .bx-media-phone .cd-dropdown .cd-dropdown-content ul a:hover .sys-icon-a,
     #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a:hover,
     #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a:hover .sys-icon,
     #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a:hover .sys-icon-a {
         color: @bx-font-color-menu-main-hover;
     }
 
-    .bx-media-phone .go-back a::before, 
-    .bx-media-phone .go-back a::after,
-    .bx-media-phone .has-children > a::before, 
-    .bx-media-phone .has-children > a::after, 
-    .bx-media-phone .cd-dropdown .cd-close::after, 
-    .bx-media-phone .cd-dropdown .cd-close::before {
-        background-color: @bx-font-color-menu-main;
-    }
-
 
     /* account menu */
     #bx-sliding-menu-account.bx-sliding-menu-main,
@@ -687,23 +670,6 @@
     }
 
 
-    .bx-media-phone #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a,
-    .bx-media-phone #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a .sys-icon,
-    .bx-media-phone #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a .sys-icon-a {
-        color: @bx-font-color-menu-account;
-    }
-    .bx-media-phone #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li.bx-menu-tab-active a,
-    .bx-media-phone #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li.bx-menu-tab-active a .sys-icon,
-    .bx-media-phone #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li.bx-menu-tab-active a .sys-icon-a {
-        color: @bx-font-color-menu-account-active;
-    }
-    .bx-media-phone #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a:hover,
-    .bx-media-phone #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a:hover .sys-icon,
-    .bx-media-phone #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a:hover .sys-icon-a {
-        color: @bx-font-color-menu-account-hover;
-    }
-
-
     /* add menu */
     #bx-sliding-menu-sys_add_content.bx-sliding-menu-main {
         -webkit-box-shadow: @bx-shadow-menu-add;
@@ -1328,11 +1294,57 @@
     }
 }
 
+.bx-media-phone .@{bx-root-class-name} {
+    /* main menu */
+    .cd-dropdown .cd-dropdown-content a, 
+    .cd-dropdown .cd-dropdown-content ul a {
+        text-shadow: @bx-shadow-font-menu-main;
+
+        font-family: @bx-font-family-menu-main;
+        font-size: @bx-font-size-menu-main;
+        font-weight: @bx-font-weight-menu-main;
+        color: @bx-font-color-menu-main;
+    }
+    .cd-dropdown .cd-dropdown-content a:hover, 
+    .cd-dropdown .cd-dropdown-content ul a:hover,
+    .cd-dropdown .cd-dropdown-content a:hover .sys-icon, 
+    .cd-dropdown .cd-dropdown-content ul a:hover .sys-icon,
+    .cd-dropdown .cd-dropdown-content a:hover .sys-icon-a, 
+    .cd-dropdown .cd-dropdown-content ul a:hover .sys-icon-a {
+        color: @bx-font-color-menu-main-hover;
+    }
+
+    .go-back a::before, 
+    .go-back a::after,
+    .has-children > a::before, 
+    .has-children > a::after, 
+    .cd-dropdown .cd-close::after, 
+    .cd-dropdown .cd-close::before {
+        background-color: @bx-font-color-menu-main;
+    }
+
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a,
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a .sys-icon,
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a .sys-icon-a {
+        color: @bx-font-color-menu-account;
+    }
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li.bx-menu-tab-active a,
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li.bx-menu-tab-active a .sys-icon,
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li.bx-menu-tab-active a .sys-icon-a {
+        color: @bx-font-color-menu-account-active;
+    }
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a:hover,
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a:hover .sys-icon,
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt li a:hover .sys-icon-a {
+        color: @bx-font-color-menu-account-hover;
+    }
+}
+
 /* viewport */
-html.@{bx-root-class-name}.bx-media-tablet {
+html.bx-media-tablet {
     font-size: @bx-viewport-font-tablet;
 }
 
-html.@{bx-root-class-name}.bx-media-phone {
+html.bx-media-phone {
     font-size: @bx-viewport-font-mobile;
 }

modules/boonex/lucid/data/template/system/css/menu-dropdown.css

@@ -137,13 +137,9 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
   z-index: 1;
   border-bottom: 1px solid rgba(255,255,255,0.1);
 }
-.cd-dropdown h2,
-.cd-dropdown h2 .sys-icon {
-	color: rgba(255,255,255,1);
-}
 .cd-dropdown h2 img {
-	height: 2rem;
-	margin: 0.5625rem 0;
+    height: 2rem;
+    margin: 0.5625rem 0;
 }
 .cd-dropdown .cd-close {
   /* 'X' close icon - mobile version only */
@@ -244,7 +240,8 @@ li.bx-lcd-mdd-login .bx-lcd-login-form {
     right: 0;
     left: auto;
   }
-:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown h2, .cd-dropdown .cd-close {
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown h2, 
+:where(.bx-media-tablet2, .bx-media-desktop) .cd-dropdown .cd-close {
     /* on desktop - hide title and 'X' */
     display: none;
   }

modules/boonex/lucid/data/template/system/css/menu.less

@@ -1,7 +1,7 @@
 @import (reference) 'default.less';
 @import '../../../../../../../template/css/menu.css';
 
-.@{bx-root-class-name}{
+.@{bx-root-class-name} {
     
     .bx-menu-toolbar-padding {
         padding-top: 0;
@@ -33,8 +33,6 @@
         opacity: 1.0;
     }
 
-
-
     .bx-sliding-smenu-submenu {
         position: absolute;
         display: none;
@@ -112,13 +110,6 @@
         display: none;
     }
 
-    
-
-
-ul.bx-menu-toolbar li a .bx-menu-item-addon {
-	bottom: auto;
-}
-
 
     /*--- Submenu ---*/
     .bx-menu-main-bar-wrapper .bx-menu-main-submenu-wrp {
@@ -224,6 +215,10 @@ ul.bx-menu-toolbar li a .bx-menu-item-addon {
         font-size: 1.0rem;
     }
 
+    ul.bx-menu-toolbar li a .bx-menu-item-addon {
+        bottom: auto;
+    }
+
 
     /*--- Toolbar Site ---*/
     #bx-menu-toolbar-1-container .bx-menu-toolbar li {
@@ -318,8 +313,6 @@ ul.bx-menu-toolbar li a .bx-menu-item-addon {
     }
 
     /*--- Account Popup ---*/
-	
-	
     #bx-sliding-menu-account.bx-sliding-menu-main.bx-sliding-menu-fullheight {
         height: calc(100% - 3.75rem);
     }
@@ -387,8 +380,6 @@ ul.bx-menu-toolbar li a .bx-menu-item-addon {
     }
 
     /*--- Add Content Menu ---*/
-    
-
     #bx-sliding-menu-sys_add_content.bx-sliding-menu-main .bx-menu-object-sys_add_content {
         display: block;
         width: 100%;
@@ -542,115 +533,116 @@ ul.bx-menu-toolbar li a .bx-menu-item-addon {
     }
 }
 
-:where(.bx-media-tablet, .bx-media-desktop) .@{bx-root-class-name}{
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main {
-		position: relative;
-		height: 2.125rem;
-	}
-
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt {
-		position: absolute;
-		width: 100%;
-	}
-
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site {
-		position: relative;
-		display: -webkit-flex;
-		display: flex;
-		-webkit-align-items: center;
-		align-items: center;
-		height: 100%;
-	}
-
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li {
-		position: relative;
-
-		height: 2.125rem;
-		border: 1px solid transparent;
-		border-radius: 0.5rem;
-	}
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li:not(.bx-menu-item-more-auto) {
-		display: block;
-	}
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li > a {
-		position: relative;
-		display: -webkit-flex;
-		display: flex;
-		-webkit-align-items: center;
-		align-items: center;
-		height: 100%;
-	}
-
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-menu-floating-blocks-line {
-		position: absolute;
-		display: none;
-
-		top: 0px;
-		left: 0px;
-		width: 100%;
-		height: 0.1875rem;
-
-		-webkit-border-radius: 0.25rem;
-		border-radius: 0.25rem;
-		background-color: rgba(255, 255, 255, 1.0);
-	}
-
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-sliding-smenu-submenu ul,
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-sliding-smenu-submenu ul li{
-		display: block; 
-	}
-
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li:hover,
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li.bx-menu-tab-active:hover {
-		border: 1px solid rgba(0, 0, 0, 0.05);
-		background-color: rgba(0, 0, 0, 0.05);
-	}
-
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li.bx-menu-tab-active {
-		border-color: transparent;
-		background-color: transparent;
-	}
-
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li:hover .bx-sliding-smenu-submenu {
-		display: block;
-	}
-
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li:hover .bx-menu-floating-blocks-arrow .sys-icon.active {
-		display: inline;
-	}
-
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li:hover .bx-menu-floating-blocks-arrow .sys-icon.inactive {
-		display: none;
-	}
-
-	#bx-sliding-menu-account.bx-sliding-menu-main {
-		left: auto !important;
-		right: 0px !important;
-		width: auto !important;
-	}
-	#bx-sliding-menu-sys_add_content.bx-sliding-menu-main {
-		left: auto !important;
-		right: 0px !important;
-		width: auto !important;
-	}
+:where(.bx-media-tablet, .bx-media-desktop) .@{bx-root-class-name} {
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main {
+        position: relative;
+        height: 2.125rem;
+    }
+
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-sliding-menu-main-cnt {
+        position: absolute;
+        width: 100%;
+    }
+
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site {
+        position: relative;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-align-items: center;
+        align-items: center;
+        height: 100%;
+    }
+
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li {
+        position: relative;
+
+        height: 2.125rem;
+        border: 1px solid transparent;
+        border-radius: 0.5rem;
+    }
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li:not(.bx-menu-item-more-auto) {
+        display: block;
+    }
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li > a {
+        position: relative;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-align-items: center;
+        align-items: center;
+        height: 100%;
+    }
+
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-menu-floating-blocks-line {
+        position: absolute;
+        display: none;
+
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        height: 0.1875rem;
+
+        -webkit-border-radius: 0.25rem;
+        border-radius: 0.25rem;
+        background-color: rgba(255, 255, 255, 1.0);
+    }
+
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-sliding-smenu-submenu ul,
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-sliding-smenu-submenu ul li{
+        display: block; 
+    }
+
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li:hover,
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li.bx-menu-tab-active:hover {
+        border: 1px solid rgba(0, 0, 0, 0.05);
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li.bx-menu-tab-active {
+        border-color: transparent;
+        background-color: transparent;
+    }
+
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site > li:hover .bx-sliding-smenu-submenu {
+        display: block;
+    }
+
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li:hover .bx-menu-floating-blocks-arrow .sys-icon.active {
+        display: inline;
+    }
+
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li:hover .bx-menu-floating-blocks-arrow .sys-icon.inactive {
+        display: none;
+    }
+
+    #bx-sliding-menu-account.bx-sliding-menu-main {
+        left: auto !important;
+        right: 0px !important;
+        width: auto !important;
+    }
+    #bx-sliding-menu-sys_add_content.bx-sliding-menu-main {
+        left: auto !important;
+        right: 0px !important;
+        width: auto !important;
+    }
 }
-.bx-media-phone .@{bx-root-class-name}{
 
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li {
-	   height: auto;
-	}
+.bx-media-phone .@{bx-root-class-name} {
+
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li {
+       height: auto;
+    }
 
-	#bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-sliding-sms-cnt {
-	   padding: 0px 0px 0px 1.7rem;
-	}
+    #bx-sliding-menu-sys_site.bx-sliding-smenu-main ul.bx-menu-object-sys_site li .bx-sliding-sms-cnt {
+       padding: 0px 0px 0px 1.7rem;
+    }
 
-	.bx-sliding-smenu-submenu {
-		position: relative;
+    .bx-sliding-smenu-submenu {
+        position: relative;
 
-		top: 0px;
-		left: 0px;
+        top: 0px;
+        left: 0px;
 
-		background-color: #transparent;
-		box-shadow: none;
-	}	
+        background-color: #transparent;
+        box-shadow: none;
+    }
 }

modules/boonex/ocean/data/template/bx_timeline/css/view.less

@@ -1,6 +1,6 @@
+@import (reference) '../../../../../../../template/css/_mixins.less';
 @import (reference) '../../system/css/default.less';
 @import '../../../../../timeline/template/css/view.css';
-@import (reference) '../../../../../../../template/css/_mixins.less';
 
 div.bx-tl-item-text div.bx-tl-content.bx-tl-overflow:before {
     background: -webkit-linear-gradient(top, transparent, @bx-color-box);

modules/boonex/ocean/data/template/system/css/page_layouts.less

@@ -1,12 +1,12 @@
 @import (reference) 'default.less';
 @import '../../../../../../../template/css/page_layouts.css';
 
-.@{bx-root-class-name}{
+.@{bx-root-class-name} {
     .bx-layout-col .bx-layout-cell.bx-def-padding-right {
-         .bx-ocean.bx-def-padding-sec-right;
+         .bx-ocean .bx-def-padding-sec-right;
     }
 
     .bx-layout-col .bx-layout-cell.bx-def-padding-left {
-         .bx-ocean.bx-def-padding-sec-left;
+         .bx-ocean .bx-def-padding-sec-left;
     }
 }

modules/boonex/protean/data/template/bx_timeline/css/view.less

@@ -24,17 +24,20 @@ div.bx-tl-item-meta-activity {
     align-items: center;
 }
 
-.bx-media-phone div.bx-tl-item-meta-activity {
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
-}
-
-/*--- Load More Style ---*/
-.bx-media-phone div.bx-tl-view-timeline div.bx-tl-load-more {
-    margin-left: 1.0rem;
-}
+.bx-media-phone .@{bx-root-class-name} {
+    /*--- Meta and Activity Styles ---*/
+    div.bx-tl-item-meta-activity {
+        -webkit-flex-wrap: wrap;
+        flex-wrap: wrap;
+    }
+    
+    /*--- Load More Style ---*/
+    div.bx-tl-view-timeline div.bx-tl-load-more {
+        margin-left: 1.0rem;
+    }
 
-/*--- Item Style: Timeline ---*/
-.bx-media-phone div.bx-tl-view-timeline div.bx-tl-items:before {
-    left: 1.875rem;
-}
+    /*--- Item Style: Timeline ---*/
+    div.bx-tl-view-timeline div.bx-tl-items:before {
+        left: 1.875rem;
+    }
+} 

modules/boonex/protean/data/template/system/css/default.less

@@ -12,11 +12,11 @@
 }
 
 .@{bx-root-class-name}.bx-def-image-bg-page {
-	background-image: @bx-image-bg-page;
-	background-repeat: @bx-image-bg-page-repeat;
-	background-attachment: @bx-image-bg-page-attachment;
-	background-size: @bx-image-bg-page-size;
-	background-position: center center;
+    background-image: @bx-image-bg-page;
+    background-repeat: @bx-image-bg-page-repeat;
+    background-attachment: @bx-image-bg-page-attachment;
+    background-size: @bx-image-bg-page-size;
+    background-position: center center;
 }
 
 .@{bx-root-class-name} {
@@ -1225,10 +1225,10 @@
 }
 
 /* viewport */
-html.@{bx-root-class-name}.bx-media-tablet {
+html.bx-media-tablet {
     font-size: @bx-viewport-font-tablet;
 }
 
-html.@{bx-root-class-name}.bx-media-phone {
+html.bx-media-phone {
     font-size: @bx-viewport-font-mobile;
 }