// MMenu overrides
.mm-menu {
- &.mm-offcanvas {
- max-width: 320px;
- width: 100%; // Max-width will limit overall width but this allows it to take up more space on very narrow screens
- }
-
- .mm-navbar {
- height: auto;
-
- a, >* {
- color: @menu-text;
- }
- }
+ &.mm-offcanvas {
+ max-width: 320px;
+ width: 100%; // Max-width will limit overall width but this allows it to take up more space on very narrow screens
+ }
+
+ .mm-navbar {
+ height: auto;
+
+ a, > * {
+ color: @menu-text;
+ }
+ }
}
// Menu title bar
.mm-navbar .mm-title {
- line-height: 60px;
- padding: 0 !important;
+ line-height: 60px;
+ padding: 0 !important;
}
// < Title bar back arrow
.mm-btn.mm-prev {
- height: 60px;
+ height: 60px;
}
// Make menu items sit properly under title bar
-.mm-panels>.mm-panel>.mm-listview:first-child, .mm-panels>.mm-panel>.mm-navbar+.mm-listview {
- margin-top: 0;
+.mm-panels > .mm-panel > .mm-listview:first-child, .mm-panels > .mm-panel > .mm-navbar + .mm-listview {
+ margin-top: 0;
}
// Submenu arrows < >
-.mm-menu .mm-btn:after, .mm-menu .mm-btn:before, .mm-menu .mm-listview>li .mm-next:after {
- border-color: @menu-text;
+.mm-menu .mm-btn:after, .mm-menu .mm-btn:before, .mm-menu .mm-listview > li .mm-next:after {
+ border-color: @menu-text;
}
// Main list settings
.mm-listview {
- font-size: 16px;
- line-height: 40px;
+ font-size: 16px;
+ line-height: 40px;
}
// Disable borders between list items
-.mm-listview>li:not(.mm-divider):after, .mm-navbar {
- border: none;
+.mm-listview > li:not(.mm-divider):after, .mm-navbar {
+ border: none;
}
// Extra padding for submenus with title bars
-.mm-panels>.mm-panel.mm-hasnavbar {
- padding-top: 60px;
+.mm-panels > .mm-panel.mm-hasnavbar {
+ padding-top: 60px;
}
// Page overlay opacity
#mm-blocker {
- background-color: #000;
- opacity: 0;
+ background-color: #000;
+ opacity: 0;
}
-html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker {
- opacity: 0.5;
- transition: opacity .4s ease 0s; // No delay before fading in the overlay
+
+html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
+ opacity: 0.5;
+ transition: opacity .4s ease 0s; // No delay before fading in the overlay
}
// Selected menu item
-.mm-menu .mm-listview>li.mm-selected>a:not(.mm-next), .mm-menu .mm-listview>li.mm-selected>span {
- background: rgba(255,255,255,.2);
+.mm-menu .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu .mm-listview > li.mm-selected > span {
+ background: rgba(255, 255, 255, .2);
}
-
// Fluidbook menu styles
#menu {
- //position: relative;
- //white-space: nowrap;
- background-color: @menu-background;
- color: @menu-text;
- box-shadow: rgba(0, 0, 0, 0.2) -5px 6px 13px 0px; // ToDo: adjust drop-shadow depending on which side the menu comes from
-
- a, li > span {
- padding: 10px 10px 10px 29px;
-
- .rtl & {
- padding: 10px 29px 10px 10px !important;
- }
-
- img {
- display: inline-block;
- vertical-align: middle;
- margin-right: 0.7em;
- }
- }
-
- //> a {
- // vertical-align: top;
- // display: inline-block;
- //}
+ //position: relative;
+ //white-space: nowrap;
+ background-color: @menu-background;
+ color: @menu-text;
+ box-shadow: rgba(0, 0, 0, 0.2) -5px 6px 13px 0px; // ToDo: adjust drop-shadow depending on which side the menu comes from
+
+ a, li > span {
+ padding: 10px 10px 10px 29px;
+
+ .rtl & {
+ padding: 10px 29px 10px 10px !important;
+ }
+
+ img {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 0.7em;
+ }
+ }
+
+ //> a {
+ // vertical-align: top;
+ // display: inline-block;
+ //}
}
#menuOpener {
- display: none;
-
- @media all and (max-width: @menu-breakpoint) {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- height: 100%;
- font-size: 16px;
- line-height: 1;
- color: @icon-color;
- display: flex;
- align-items: center;
- }
-
- // Positioning for left-to-right Fluidbooks + inverted menu on RTL
- .ltr &, .rtl.menu-inverted & {
- left: 9px;
- right: auto;
- flex-direction: row;
- }
-
- // Positioning for right-to-left Fluidbooks + inverted menu on LTR
- .rtl &, .ltr.menu-inverted & {
- right: 9px;
- left: auto;
- flex-direction: row-reverse; // Swap text and icon positions
- }
-
- .label {
- margin: 0 9px;
- }
-
- .svg-icon {
- width: 20px;
- vertical-align: middle;
- margin: 0 9px;
- }
+ display: none;
+
+ @media all and (max-width: @menu-breakpoint) {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ height: 100%;
+ font-size: 16px;
+ line-height: 1;
+ color: @icon-color;
+ display: flex;
+ align-items: center;
+ }
+
+ // Positioning for left-to-right Fluidbooks + inverted menu on RTL
+ .ltr &, .rtl.menu-inverted & {
+ left: 9px;
+ right: auto;
+ flex-direction: row;
+ }
+
+ // Positioning for right-to-left Fluidbooks + inverted menu on LTR
+ .rtl &, .ltr.menu-inverted & {
+ right: 9px;
+ left: auto;
+ flex-direction: row-reverse; // Swap text and icon positions
+ }
+
+ .label {
+ margin: 0 9px;
+ }
+
+ .svg-icon {
+ width: 20px;
+ vertical-align: middle;
+ margin: 0 9px;
+ }
}
#menuSearch {
- position: fixed; // So we can scroll the other items below...
- top: 0;
- left: 0;
- width: 100%;
- z-index: 2; // Ensure search box sits above #shareLinks
-
- &:after {
- border: none;
- }
+ position: fixed; // So we can scroll the other items below...
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 2; // Ensure search box sits above #shareLinks
+
+ &:after {
+ border: none;
+ }
}
// Main menu with icons
#menuList {
- overflow: hidden;
- position: relative;
- height: 100%;
-
- &:before {
- height: 0; // Fix spacing with search box
- }
-
- > ul {
- margin-top: 60px; // Spacing for search box
- margin-bottom: 0;
- padding-top: 20px;
- padding-bottom: 20px;
- }
-
- .svg-icon {
- width: 26px;
- height: 26px;
- vertical-align: middle;
- }
-
- // The "extra" image in the menu
- .nav-icon {
- margin-right: 0;
- }
+ overflow: hidden;
+ position: relative;
+ height: 100%;
+
+ &:before {
+ height: 0; // Fix spacing with search box
+ }
+
+ > ul {
+ margin-top: 60px; // Spacing for search box
+ margin-bottom: 0;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ }
+
+ .svg-icon {
+ width: 26px;
+ height: 26px;
+ vertical-align: middle;
+ }
+
+ .v2 {
+ .svg-icon {
+ width: auto;
+ height: 20px;
+ }
+ }
+
+ // The "extra" image in the menu
+ .nav-icon {
+ margin-right: 0;
+ }
}
#menu #menuClose { // Extra specificity needed to override MMenu RTL styles
- position: absolute;
- top: 0;
- right: 0;
- width: 60px;
- height: 60px;
- padding: 21px 21px 23px 23px !important; // Controls size of icon and position within the element
- color: @menu-text;
- background-color: @menu-button-background;
-
- .rtl & {
- right: auto;
- left: 0;
- }
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 60px;
+ height: 60px;
+ padding: 21px 21px 23px 23px !important; // Controls size of icon and position within the element
+ color: @menu-text;
+ background-color: @menu-button-background;
+
+ .rtl & {
+ right: auto;
+ left: 0;
+ }
}
-
#searchForm {
- //position: fixed;
- //top: 0;
- //left: 0;
- position: relative;
- padding: 0;
- text-align: left;
-
- .rtl & {
- text-align: right;
- }
+ //position: fixed;
+ //top: 0;
+ //left: 0;
+ position: relative;
+ padding: 0;
+ text-align: left;
+
+ .rtl & {
+ text-align: right;
+ }
}
#q {
- background-color: @menu-field-background;
- color: @menu-field-text;
- -webkit-appearance: none;
- border: none;
- border-radius: 0;
- height: 60px;
- font-size: 16px;
- padding: 0 1em 0 70px;
- width: 260px;
-
- .rtl & {
- padding: 0 70px 0 1em;
- }
+ background-color: @menu-field-background;
+ color: @menu-field-text;
+ -webkit-appearance: none;
+ border: none;
+ border-radius: 0;
+ height: 60px;
+ font-size: 16px;
+ padding: 0 1em 0 70px;
+ width: 260px;
+
+ .rtl & {
+ padding: 0 70px 0 1em;
+ }
}
#submitSearch {
- position: absolute;
- left: 0;
- top: 50%;
- transform: translateY(-50%);
- color: @menu-background;
-
- .svg-icon {
- width: 25px;
- height: 25px;
- }
-
- .ltr & {
- margin: 0;
- }
-
- .rtl & {
- left: auto;
- right: 0;
- }
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ color: @menu-background;
+
+ .svg-icon {
+ width: 25px;
+ height: 25px;
+ }
+
+ .ltr & {
+ margin: 0;
+ }
+
+ .rtl & {
+ left: auto;
+ right: 0;
+ }
}
.menu-item-title {
- margin: 0 10px;
+ margin: 0 10px;
}
#menuSearchResults, #menuSearchHints {
- display: none; // Hidden by default, displayed via JS
+ display: none; // Hidden by default, displayed via JS
}
#menuSearchHints {
- padding: 15px 0;
-
- .hint {
- padding: 13px 30px;
- font-size: 16px;
- display: block;
- width: 100%;
- height: auto;
- position: relative;
-
- // > arrow
- &:after {
- content: '';
- position: absolute;
- border-top: 2px solid transparent;
- border-left: 2px solid transparent;
- border-color: currentColor;
- display: block;
- width: 8px;
- height: 8px;
- margin: auto;
- top: 0;
- bottom: 0;
- right: 25px;
- transform: rotate(135deg);
-
- // Reverse arrow position and direction for RTL screens
- .rtl & {
- right: auto;
- left: 25px;
- transform: rotate(315deg);
- }
- }
-
- em {
- font-style: normal;
- }
- }
+ padding: 15px 0;
+
+ .hint {
+ padding: 13px 30px;
+ font-size: 16px;
+ display: block;
+ width: 100%;
+ height: auto;
+ position: relative;
+
+ // > arrow
+ &:after {
+ content: '';
+ position: absolute;
+ border-top: 2px solid transparent;
+ border-left: 2px solid transparent;
+ border-color: currentColor;
+ display: block;
+ width: 8px;
+ height: 8px;
+ margin: auto;
+ top: 0;
+ bottom: 0;
+ right: 25px;
+ transform: rotate(135deg);
+
+ // Reverse arrow position and direction for RTL screens
+ .rtl & {
+ right: auto;
+ left: 25px;
+ transform: rotate(315deg);
+ }
+ }
+
+ em {
+ font-style: normal;
+ }
+ }
}
#menu #menuSearchResults {
- position: relative;
- height: 100%;
- // Max height is now handled via JS
- //max-height: ~"calc(100vh - 60px - 100px)"; // 100vh - search form height - results margins
- margin: 50px auto 0 0;
- width: 295px; // To make 25px gap to right of scrollbar (320px - 25px)
-
- .rtl & {
- margin-right: 0;
- margin-left: auto;
- }
-
- a {
- padding: 0 !important;
- }
-
- .doubleThumb {
- display: block !important;
- margin: 0 auto 40px auto !important;
- &:not(.simple), &.simple .thumb img {
- box-shadow: 10px 4px 10px 0px rgba(68, 68, 68, 0.5);
- }
- }
-
- .hits {
- font-size: 16px !important;
- }
-
- .padding {
- display: none !important;
- }
-
- .no-results {
- padding: 5px 25px;
- }
-
- // Perfect Scrollbar mods
- .ps__scrollbar-y-rail {
- background: rgba(0, 0, 0, 0.1);
- width: 6px;
- opacity: 1;
- }
-
- .ps__scrollbar-y {
- right: 0;
- background-color: @menu-text;
- }
-
- .ps:hover>.ps__scrollbar-y-rail:hover {
- width: 11px;
- }
+ position: relative;
+ height: 100%;
+ // Max height is now handled via JS
+ //max-height: ~"calc(100vh - 60px - 100px)"; // 100vh - search form height - results margins
+ margin: 50px auto 0 0;
+ width: 295px; // To make 25px gap to right of scrollbar (320px - 25px)
+
+ .rtl & {
+ margin-right: 0;
+ margin-left: auto;
+ }
+
+ a {
+ padding: 0 !important;
+ }
+
+ .doubleThumb {
+ display: block !important;
+ margin: 0 auto 40px auto !important;
+ &:not(.simple), &.simple .thumb img {
+ box-shadow: 10px 4px 10px 0px rgba(68, 68, 68, 0.5);
+ }
+ }
+
+ .hits {
+ font-size: 16px !important;
+ }
+
+ .padding {
+ display: none !important;
+ }
+
+ .no-results {
+ padding: 5px 25px;
+ }
+
+ // Perfect Scrollbar mods
+ .ps__scrollbar-y-rail {
+ background: rgba(0, 0, 0, 0.1);
+ width: 6px;
+ opacity: 1;
+ }
+
+ .ps__scrollbar-y {
+ right: 0;
+ background-color: @menu-text;
+ }
+
+ .ps:hover > .ps__scrollbar-y-rail:hover {
+ width: 11px;
+ }
}
-
#menu #shareLinks {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- background-color: @menu-button-background;
- line-height: 1;
- padding: 20px 0;
-
- .svg-icon {
- margin: 0;
- }
-
- .share-icons {
- padding-left: 29px;
- white-space: nowrap;
-
- .rtl & {
- padding-left: 0;
- padding-right: 29px;
- }
- }
-
- .shareList {
- padding: 0;
- }
-
- li {
- display: inline-block;
- padding: 0;
-
- &:not(:last-of-type) {
- margin-right: 33px;
-
- .rtl & {
- margin-right: 0;
- margin-left: 33px;
- }
- }
-
- a {
- padding: 0 !important;
- }
-
- img {
- margin: 0;
- }
- }
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ background-color: @menu-button-background;
+ line-height: 1;
+ padding: 20px 0;
+
+ .svg-icon {
+ margin: 0;
+ }
+
+ .share-icons {
+ padding-left: 29px;
+ white-space: nowrap;
+
+ .rtl & {
+ padding-left: 0;
+ padding-right: 29px;
+ }
+ }
+
+ .shareList {
+ padding: 0;
+ }
+
+ li {
+ display: inline-block;
+ padding: 0;
+
+ &:not(:last-of-type) {
+ margin-right: 33px;
+
+ .rtl & {
+ margin-right: 0;
+ margin-left: 33px;
+ }
+ }
+
+ a {
+ padding: 0 !important;
+ }
+
+ img {
+ margin: 0;
+ }
+ }
}
\ No newline at end of file
#horizontalNav {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
-
- @media all and (max-width: @menu-breakpoint) {
- display: none;
- }
-
- // Positioning for left-to-right Fluidbooks + inverted menu on RTL
- .ltr &, .rtl.menu-inverted & {
- left: 0;
- right: auto;
- }
-
- // Positioning for right-to-left Fluidbooks + inverted menu on LTR
- .rtl &, .ltr.menu-inverted & {
- right: 0;
- left: auto;
- }
-
- // Locales icon + text link
- &_locales {
- border-left: 1px solid;
- margin-right: 1.5em;
- margin-left: 14px;
-
- .rtl & {
- border-left: none;
- border-right: 1px solid;
- }
-
- .svg-icon {
- margin: 0 7px 0 30px !important;
-
- .rtl & {
- margin: 0 30px 0 7px !important;
- }
- }
- }
-
- // Optional extra image
- &_extra {
- img {
- vertical-align: middle;
- }
- }
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+
+ @media all and (max-width: @menu-breakpoint) {
+ display: none;
+ }
+
+ // Positioning for left-to-right Fluidbooks + inverted menu on RTL
+ .ltr &, .rtl.menu-inverted & {
+ left: 0;
+ right: auto;
+ }
+
+ // Positioning for right-to-left Fluidbooks + inverted menu on LTR
+ .rtl &, .ltr.menu-inverted & {
+ right: 0;
+ left: auto;
+ }
+
+ // Locales icon + text link
+ &_locales {
+ border-left: 1px solid;
+ margin-right: 1.5em;
+ margin-left: 14px;
+
+ .rtl & {
+ border-left: none;
+ border-right: 1px solid;
+ }
+
+ .svg-icon {
+ margin: 0 7px 0 30px !important;
+
+ .rtl & {
+ margin: 0 30px 0 7px !important;
+ }
+ }
+ }
+
+ // Optional extra image
+ &_extra {
+ img {
+ vertical-align: middle;
+ }
+ }
}
#iconList {
- list-style-type: none;
- margin: 0;
- padding: 0;
-
- li {
- display: inline-block;
- }
-
- a {
- color: @icon-color;
- display: inline-block;
-
- // Styling when help overlay is open
- .help & {
- color: #ccc;
- }
- }
-
- .svg-icon {
- width: 25px;
- height: 25px;
- margin: 0 17px;
- color: @icon-color;
- vertical-align: middle;
-
- .help & {
- color: #ccc;
- }
- }
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+
+ li {
+ display: inline-block;
+ }
+
+ a {
+ color: @icon-color;
+ display: inline-block;
+
+ // Styling when help overlay is open
+ .help & {
+ color: #ccc;
+ }
+ }
+
+ .svg-icon {
+ width: 25px;
+ height: 25px;
+
+ margin: 0 17px;
+ color: @icon-color;
+ vertical-align: middle;
+
+ .help & {
+ color: #ccc;
+ }
+ }
+
+ &.v2 {
+ .svg-icon {
+ width: auto;
+ height: 20px;
+ }
+ }
}
// Small dropdown arrow after locale name
.icon-locales .menu-item-title:after {
- content: '';
- width: 6px;
- height: 6px;
- vertical-align: middle;
- margin: -3px 0 0 10px;
- border-style: solid;
- border-width: 0 2px 2px 0; // Make right angle for arrow
- transform: rotate(45deg); // Rotate to downwards position
- display: inline-block;
-
- .rtl & {
- margin-right: 10px;
- }
+ content: '';
+ width: 6px;
+ height: 6px;
+ vertical-align: middle;
+ margin: -3px 0 0 10px;
+ border-style: solid;
+ border-width: 0 2px 2px 0; // Make right angle for arrow
+ transform: rotate(45deg); // Rotate to downwards position
+ display: inline-block;
+
+ .rtl & {
+ margin-right: 10px;
+ }
}
\ No newline at end of file
projects / fluidbook-html5.git / commitdiff