527 lines
8.8 KiB
Plaintext
527 lines
8.8 KiB
Plaintext
//
|
|
// RTL: Main menu
|
|
// --------------------------------------------------
|
|
|
|
#main-menu {
|
|
.navigation,
|
|
.mmc-dropdown-open-ul {
|
|
a {
|
|
text-align: right;
|
|
}
|
|
|
|
.menu-icon {
|
|
margin-left: 5px;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.badge,
|
|
.label {
|
|
margin-left: 0;
|
|
margin-right: 5px;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.mm-dropdown {
|
|
> a {
|
|
// Add some space for the caret
|
|
padding-left: 30px !important;
|
|
padding-right: 14px;
|
|
|
|
// Caret
|
|
&:before {
|
|
content: "\f104";
|
|
left: 14px;
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
// Menu item icon
|
|
.menu-icon {
|
|
margin-right: -5px;
|
|
}
|
|
}
|
|
|
|
// Submenu levels
|
|
> ul {
|
|
@subpadding: 20px;
|
|
|
|
> li > a {
|
|
padding-left: 14px;
|
|
padding-right: @subpadding * 2;
|
|
}
|
|
|
|
> .mm-dropdown > ul {
|
|
> li > a {
|
|
padding-left: 14px;
|
|
padding-right: @subpadding * 3;
|
|
}
|
|
|
|
> .mm-dropdown > ul {
|
|
> li > a {
|
|
padding-left: 14px;
|
|
padding-right: @subpadding * 4;
|
|
}
|
|
|
|
> .mm-dropdown > ul {
|
|
> li > a {
|
|
padding-left: 14px;
|
|
padding-right: @subpadding * 5;
|
|
}
|
|
|
|
> .mm-dropdown > ul {
|
|
> li > a {
|
|
padding-left: 14px;
|
|
padding-right: @subpadding * 6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Expanded submenu caret
|
|
.mm-dropdown.open > a:before {
|
|
.transform(-90deg);
|
|
}
|
|
|
|
// Dropdowns
|
|
.mmc-dropdown-open-ul {
|
|
left: auto;
|
|
right: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
// ************************************************************************* //
|
|
//** Tablets **//
|
|
|
|
@media (min-width: @screen-small) {
|
|
#main-menu {
|
|
|
|
// Navigation
|
|
//
|
|
|
|
.navigation {
|
|
> li {
|
|
> a {
|
|
text-align: center;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
|
|
// Menu item icon
|
|
> .menu-icon {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .mm-dropdown > a {
|
|
padding-left: 14px;
|
|
|
|
&:before {
|
|
left: 7px;
|
|
}
|
|
}
|
|
|
|
// Opened dropdown
|
|
> .mm-dropdown.open {
|
|
// Caret
|
|
> a:before {
|
|
.transform(0deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.main-menu-right #main-menu .navigation > .mm-dropdown > a:before {
|
|
content: "\f105";
|
|
left: auto;
|
|
right: 7px;
|
|
}
|
|
|
|
// Expanded main menu
|
|
&.mme {
|
|
#main-menu {
|
|
|
|
// Navigation
|
|
//
|
|
|
|
.navigation {
|
|
> li {
|
|
> a {
|
|
text-align: right;
|
|
|
|
// Caret
|
|
&:before {
|
|
left: 14px;
|
|
}
|
|
|
|
// Menu item icon
|
|
> .menu-icon {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .mm-dropdown > a {
|
|
padding-left: 30px;
|
|
padding-right: 14px;
|
|
|
|
&:before {
|
|
content: "\f104";
|
|
left: 14px;
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
// Opened submenu
|
|
> .mm-dropdown.open {
|
|
// Caret
|
|
> a:before {
|
|
.transform(-90deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// ************************************************************************* //
|
|
//** Desktops **//
|
|
|
|
@media (min-width: @screen-tablet) {
|
|
|
|
#main-menu {
|
|
|
|
// Navigation
|
|
//
|
|
|
|
ul.navigation {
|
|
> li {
|
|
> a {
|
|
text-align: right;
|
|
|
|
// Caret
|
|
&:before {
|
|
right: auto;
|
|
left: 14px;
|
|
}
|
|
|
|
// Menu item icon
|
|
> .menu-icon {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .mm-dropdown > a {
|
|
padding-left: 30px;
|
|
padding-right: 14px;
|
|
|
|
&:before {
|
|
content: "\f104";
|
|
left: 14px;
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
// Expanded submenu
|
|
> .mm-dropdown.open {
|
|
// Caret
|
|
> a:before {
|
|
.transform(-90deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Collapsed main menu
|
|
&.mmc #main-menu {
|
|
|
|
// Navigation
|
|
//
|
|
|
|
ul.navigation {
|
|
> li {
|
|
> a {
|
|
text-align: center;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
|
|
// Caret
|
|
&:before {
|
|
right: auto;
|
|
left: 7px;
|
|
}
|
|
|
|
> .menu-icon {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .mm-dropdown > a {
|
|
padding-left: 14px;
|
|
}
|
|
|
|
// Opened submenu
|
|
> .mm-dropdown.open {
|
|
// Caret
|
|
> a:before {
|
|
.transform(0deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.mme.mmc #main-menu ul.navigation > .mm-dropdown > a:before {
|
|
left: 7px;
|
|
}
|
|
|
|
&.main-menu-right #main-menu ul.navigation > .mm-dropdown > a:before {
|
|
content: "\f104";
|
|
left: 14px;
|
|
right: auto;
|
|
}
|
|
|
|
&.mmc.main-menu-right #main-menu ul.navigation > .mm-dropdown > a:before,
|
|
&.mmc.mme.main-menu-right #main-menu ul.navigation > .mm-dropdown > a:before {
|
|
content: "\f105";
|
|
left: auto;
|
|
right: 7px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// ************************************************************************* //
|
|
//** Markup **//
|
|
|
|
#main-menu,
|
|
#main-menu-bg {
|
|
left: auto;
|
|
right: -80%;
|
|
}
|
|
|
|
#main-navbar .navbar-header {
|
|
padding-left: 0;
|
|
padding-right: @main-menu-collapsed-width;
|
|
}
|
|
|
|
#main-navbar .navbar-inner,
|
|
#content-wrapper {
|
|
left: auto;
|
|
right: 0%;
|
|
}
|
|
|
|
&.mme #main-navbar .navbar-inner,
|
|
&.mme #content-wrapper {
|
|
left: auto;
|
|
right: 80%;
|
|
}
|
|
|
|
&.mme #main-navbar .navbar-header {
|
|
padding-right: 0;
|
|
}
|
|
|
|
&.mme #main-menu,
|
|
&.mme #main-menu-bg {
|
|
left: auto;
|
|
right: 0%;
|
|
}
|
|
|
|
#main-navbar #main-menu-toggle {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
@media (min-width: @screen-small) {
|
|
|
|
#main-wrapper {
|
|
padding-left: 0;
|
|
padding-right: @main-menu-collapsed-width;
|
|
}
|
|
|
|
#main-menu-bg {
|
|
right: 0;
|
|
}
|
|
|
|
#main-menu {
|
|
right: 0;
|
|
|
|
.mmc-dropdown-open-ul {
|
|
left: auto;
|
|
right: 100%;
|
|
}
|
|
}
|
|
|
|
&.mme {
|
|
#content-wrapper {
|
|
left: 0;
|
|
right: @main-menu-width - @main-menu-collapsed-width;
|
|
}
|
|
|
|
#main-navbar .navbar-inner {
|
|
right: @main-menu-width;
|
|
}
|
|
|
|
#main-navbar #main-menu-toggle {
|
|
width: @main-menu-width;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: @screen-tablet) {
|
|
&.mme #main-wrapper,
|
|
#main-wrapper {
|
|
padding-left: 0;
|
|
padding-right: @main-menu-width;
|
|
}
|
|
|
|
&.mme #content-wrapper {
|
|
right: 0;
|
|
}
|
|
|
|
&.mme #main-navbar .navbar-inner {
|
|
right: 0;
|
|
}
|
|
|
|
&.mmc #main-wrapper,
|
|
&.mme.mmc #main-wrapper {
|
|
padding-left: 0;
|
|
padding-right: @main-menu-collapsed-width;
|
|
}
|
|
|
|
#main-navbar .navbar-header {
|
|
padding-left: 0 !important;
|
|
padding-right: @main-menu-collapsed-width !important;
|
|
}
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// Right(RTL: Left) main menu
|
|
//
|
|
|
|
&.main-menu-right {
|
|
#main-menu-bg {
|
|
left: -80%;
|
|
right: auto;
|
|
}
|
|
|
|
#main-menu {
|
|
left: -80%;
|
|
right: auto;
|
|
|
|
.mmc-dropdown-open-ul {
|
|
right: auto;
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
#main-navbar .navbar-header {
|
|
padding-right: 0;
|
|
}
|
|
|
|
#main-navbar .navbar-inner {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
#main-navbar #main-menu-toggle {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
#main-navbar .navbar-toggle {
|
|
right: auto;
|
|
left: @main-menu-collapsed-width;
|
|
}
|
|
|
|
#content-wrapper {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
&.mme #main-navbar .navbar-inner,
|
|
&.mme #content-wrapper {
|
|
left: 80%;
|
|
right: auto;
|
|
}
|
|
|
|
&.mme #main-menu,
|
|
&.mme #main-menu-bg {
|
|
left: 0%;
|
|
right: auto;
|
|
}
|
|
|
|
&.mme #main-navbar .navbar-toggle {
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: @screen-small) {
|
|
&.main-menu-right {
|
|
#main-wrapper {
|
|
padding-left: @main-menu-collapsed-width;
|
|
padding-right: 0;
|
|
}
|
|
|
|
#main-menu,
|
|
#main-menu-bg {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
&.mme {
|
|
#content-wrapper {
|
|
left: @main-menu-width - @main-menu-collapsed-width;
|
|
right: auto;
|
|
}
|
|
|
|
#main-navbar .navbar-inner {
|
|
left: @main-menu-width;
|
|
right: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: @screen-tablet) {
|
|
&.main-menu-right {
|
|
&.mme #main-wrapper,
|
|
#main-wrapper {
|
|
padding-left: @main-menu-width;
|
|
padding-right: 0;
|
|
}
|
|
|
|
&.mme #content-wrapper,
|
|
#content-wrapper {
|
|
left: 0;
|
|
right: auto;
|
|
}
|
|
|
|
#main-navbar .navbar-inner,
|
|
&.mme #main-navbar .navbar-inner,
|
|
&.mme.mmc #main-navbar .navbar-inner {
|
|
right: auto;
|
|
left: 0;
|
|
margin-right: 0;
|
|
margin-left: @main-menu-collapsed-width;
|
|
}
|
|
|
|
&.mmc #main-wrapper,
|
|
&.mme.mmc #main-wrapper {
|
|
padding-right: 0;
|
|
padding-left: @main-menu-collapsed-width;
|
|
}
|
|
|
|
#main-navbar .navbar-header {
|
|
padding-right: 0 !important;
|
|
}
|
|
}
|
|
} |