🔥 Remove megamenu crate for PageTop integration
This commit is contained in:
parent
0d61c9e045
commit
9b317142e0
31 changed files with 1161 additions and 1828 deletions
|
|
@ -1,22 +0,0 @@
|
|||
[package]
|
||||
name = "pagetop-megamenu"
|
||||
version = "0.0.10"
|
||||
edition = "2021"
|
||||
|
||||
authors = [
|
||||
"Manuel Cillero <manuel@cillero.es>"
|
||||
]
|
||||
description = """\
|
||||
Module for PageTop that provides a new component to include advanced menus in web solutions.\
|
||||
"""
|
||||
homepage = "https://pagetop.cillero.es"
|
||||
repository = "https://github.com/manuelcillero/pagetop"
|
||||
license = "Apache-2.0 OR MIT"
|
||||
|
||||
[dependencies]
|
||||
pagetop = { version = "0.0", path = "../pagetop" }
|
||||
pagetop-jquery = { version = "0.0", path = "../pagetop-jquery" }
|
||||
static-files = "0.2.3"
|
||||
|
||||
[build-dependencies]
|
||||
pagetop-build = { version = "0.0", path = "../pagetop-build" }
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
Módulo que proporciona un nuevo componente para incluir menús avanzados en las aplicaciones web
|
||||
creadas con **PageTop**.
|
||||
|
||||
[PageTop](https://github.com/manuelcillero/pagetop/tree/main/pagetop), es un entorno de desarrollo
|
||||
basado en algunos de los *crates* más estables y populares del ecosistema Rust para proporcionar
|
||||
APIs, patrones de desarrollo y buenas prácticas para la creación de soluciones web SSR (*Server-Side
|
||||
Rendering*).
|
||||
|
||||
|
||||
# 🚧 Advertencia
|
||||
|
||||
**PageTop** sólo libera actualmente versiones de desarrollo. La API no es estable y los cambios son
|
||||
constantes. No puede considerarse preparado hasta que se libere la versión **0.1.0**.
|
||||
|
||||
|
||||
# 📜 Licencia
|
||||
|
||||
Este proyecto tiene licencia, de hecho tiene dos, puedes aplicar cualquiera de las siguientes a tu
|
||||
elección:
|
||||
|
||||
* Licencia Apache versión 2.0
|
||||
([LICENSE-APACHE](https://github.com/manuelcillero/pagetop/blob/main/LICENSE-APACHE) o
|
||||
[http://www.apache.org/licenses/LICENSE-2.0]).
|
||||
|
||||
* Licencia MIT
|
||||
([LICENSE-MIT](https://github.com/manuelcillero/pagetop/blob/main/LICENSE-MIT) o
|
||||
[http://opensource.org/licenses/MIT]).
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
use pagetop_build::StaticFilesBundle;
|
||||
|
||||
fn main() -> std::io::Result<()> {
|
||||
StaticFilesBundle::from_dir("./static")
|
||||
.with_name("megamenu")
|
||||
.build()
|
||||
}
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
use pagetop::prelude::*;
|
||||
|
||||
use crate::component::MegaMenu;
|
||||
|
||||
new_handle!(COMPONENT_MEGAITEM);
|
||||
|
||||
type Label = TypedComponent<L10n>;
|
||||
type Content = TypedComponent<Html>;
|
||||
|
||||
#[derive(Default)]
|
||||
pub enum MegaItemType {
|
||||
#[default]
|
||||
Void,
|
||||
Label(Label),
|
||||
Link(Label, FnContextualPath),
|
||||
LinkBlank(Label, FnContextualPath),
|
||||
Html(Content),
|
||||
Submenu(Label, MegaMenu),
|
||||
Separator,
|
||||
}
|
||||
|
||||
// MegaMenuItem.
|
||||
|
||||
#[rustfmt::skip]
|
||||
#[derive(Default)]
|
||||
pub struct MegaItem {
|
||||
weight : Weight,
|
||||
renderable: Renderable,
|
||||
item_type : MegaItemType,
|
||||
}
|
||||
|
||||
impl ComponentTrait for MegaItem {
|
||||
fn new() -> Self {
|
||||
MegaItem::default()
|
||||
}
|
||||
|
||||
fn handle(&self) -> Handle {
|
||||
COMPONENT_MEGAITEM
|
||||
}
|
||||
|
||||
fn weight(&self) -> Weight {
|
||||
self.weight
|
||||
}
|
||||
|
||||
fn is_renderable(&self, cx: &Context) -> bool {
|
||||
(self.renderable.check)(cx)
|
||||
}
|
||||
|
||||
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
|
||||
match self.item_type() {
|
||||
MegaItemType::Void => PrepareMarkup::None,
|
||||
MegaItemType::Label(label) => PrepareMarkup::With(html! {
|
||||
li class="link" { a href="#" { (label.prepare(cx)) } }
|
||||
}),
|
||||
MegaItemType::Link(label, path) => PrepareMarkup::With(html! {
|
||||
li class="link" { a href=(path(cx)) { (label.prepare(cx)) } }
|
||||
}),
|
||||
MegaItemType::LinkBlank(label, path) => PrepareMarkup::With(html! {
|
||||
li class="link" { a href=(path(cx)) target="_blank" { (label.prepare(cx)) } }
|
||||
}),
|
||||
MegaItemType::Html(content) => PrepareMarkup::With(html! {
|
||||
li class="html" { (content.prepare(cx)) }
|
||||
}),
|
||||
MegaItemType::Submenu(label, menu) => PrepareMarkup::With(html! {
|
||||
li class="submenu" {
|
||||
a href="#" { (label.prepare(cx)) }
|
||||
ul {
|
||||
(menu.items().prepare(cx))
|
||||
}
|
||||
}
|
||||
}),
|
||||
MegaItemType::Separator => PrepareMarkup::With(html! {
|
||||
li class="separator" { }
|
||||
}),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl MegaItem {
|
||||
pub fn label(label: L10n) -> Self {
|
||||
MegaItem {
|
||||
item_type: MegaItemType::Label(Label::with(label)),
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn link(label: L10n, path: FnContextualPath) -> Self {
|
||||
MegaItem {
|
||||
item_type: MegaItemType::Link(Label::with(label), path),
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn link_blank(label: L10n, path: FnContextualPath) -> Self {
|
||||
MegaItem {
|
||||
item_type: MegaItemType::LinkBlank(Label::with(label), path),
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn html(content: Html) -> Self {
|
||||
MegaItem {
|
||||
item_type: MegaItemType::Html(Content::with(content)),
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn submenu(label: L10n, menu: MegaMenu) -> Self {
|
||||
MegaItem {
|
||||
item_type: MegaItemType::Submenu(Label::with(label), menu),
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn separator() -> Self {
|
||||
MegaItem {
|
||||
item_type: MegaItemType::Separator,
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
// MegaItem BUILDER.
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
|
||||
self.weight = value;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_renderable(&mut self, check: FnIsRenderable) -> &mut Self {
|
||||
self.renderable.check = check;
|
||||
self
|
||||
}
|
||||
|
||||
// MegaItem GETTERS.
|
||||
|
||||
pub fn item_type(&self) -> &MegaItemType {
|
||||
&self.item_type
|
||||
}
|
||||
}
|
||||
|
|
@ -1,181 +0,0 @@
|
|||
use pagetop::prelude::*;
|
||||
use pagetop_jquery::JQuery;
|
||||
|
||||
use crate::component::MegaItem;
|
||||
use crate::LOCALES_MEGAMENU;
|
||||
|
||||
new_handle!(COMPONENT_MEGAMENU);
|
||||
|
||||
actions_for_component!(MegaMenu);
|
||||
|
||||
// SmartMenus library version.
|
||||
const VERSION_SMARTMENUS: &str = "1.2.1";
|
||||
|
||||
#[derive(Default)]
|
||||
pub enum MegaMenuTheme {
|
||||
Blue,
|
||||
#[default]
|
||||
Clean,
|
||||
Mint,
|
||||
Simple,
|
||||
}
|
||||
|
||||
#[rustfmt::skip]
|
||||
#[derive(Default)]
|
||||
pub struct MegaMenu {
|
||||
weight : Weight,
|
||||
renderable: Renderable,
|
||||
id : IdentifierValue,
|
||||
items : TypedComponents<MegaItem>,
|
||||
theme : MegaMenuTheme,
|
||||
}
|
||||
|
||||
impl ComponentTrait for MegaMenu {
|
||||
fn new() -> Self {
|
||||
MegaMenu::default()
|
||||
}
|
||||
|
||||
fn handle(&self) -> Handle {
|
||||
COMPONENT_MEGAMENU
|
||||
}
|
||||
|
||||
fn id(&self) -> Option<String> {
|
||||
self.id.get()
|
||||
}
|
||||
|
||||
fn weight(&self) -> Weight {
|
||||
self.weight
|
||||
}
|
||||
|
||||
fn is_renderable(&self, cx: &Context) -> bool {
|
||||
(self.renderable.check)(cx)
|
||||
}
|
||||
|
||||
fn before_prepare_component(&mut self, cx: &mut Context) {
|
||||
cx.alter(ContextOp::AddStyleSheet(
|
||||
StyleSheet::at("/megamenu/css/smartmenus.css").with_version(VERSION_SMARTMENUS),
|
||||
));
|
||||
|
||||
cx.alter(ContextOp::AddJavaScript(
|
||||
JavaScript::at("/megamenu/js/smartmenus.min.js").with_version(VERSION_SMARTMENUS),
|
||||
));
|
||||
JQuery.enable_jquery(cx);
|
||||
|
||||
run_actions_before_prepare_megamenu(self, cx);
|
||||
}
|
||||
|
||||
#[rustfmt::skip]
|
||||
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
|
||||
let id_nav = cx.required_id::<MegaMenu>(self.id());
|
||||
let id_menu = concat_string!(id_nav, "-menu");
|
||||
let id_state = concat_string!(id_nav, "-state");
|
||||
|
||||
let theme = match self.theme() {
|
||||
MegaMenuTheme::Blue => "sm-blue",
|
||||
MegaMenuTheme::Clean => "sm-clean",
|
||||
MegaMenuTheme::Mint => "sm-mint",
|
||||
MegaMenuTheme::Simple => "sm-simple",
|
||||
};
|
||||
cx.alter(ContextOp::AddStyleSheet(
|
||||
StyleSheet::at(concat_string!("/megamenu/css/", theme, ".css"))
|
||||
.with_version(VERSION_SMARTMENUS),
|
||||
));
|
||||
let classes_menu = concat_string!("megamenu-menu sm ", theme);
|
||||
|
||||
PrepareMarkup::With(html! {
|
||||
nav id=(id_nav) class="megamenu" role="navigation" {
|
||||
input id=(id_state) class="megamenu-state" type="checkbox" {}
|
||||
label class="megamenu-btn" for=(id_state) {
|
||||
span class="megamenu-btn-icon" {}
|
||||
(L10n::t("toggle_menu", &LOCALES_MEGAMENU).prepare(cx))
|
||||
}
|
||||
ul id=(id_menu) class=(classes_menu) {
|
||||
(self.items().prepare(cx))
|
||||
}
|
||||
script type="text/javascript" defer {
|
||||
r###"
|
||||
$(function() {
|
||||
$('#"###r (id_menu) r###"').smartmenus({
|
||||
hideTimeout: 0,
|
||||
showTimeout: 80,
|
||||
});
|
||||
});
|
||||
$(function() {
|
||||
var $menuState = $('#"###r (id_state) r###"');
|
||||
if ($menuState.length) {
|
||||
// Animate mobile menu.
|
||||
$menuState.change(function(e) {
|
||||
var $menu = $('#"###r (id_menu) r###"');
|
||||
if (this.checked) {
|
||||
$menu.hide().slideDown(250, function() { $menu.css('display', ''); });
|
||||
} else {
|
||||
$menu.show().slideUp(250, function() { $menu.css('display', ''); });
|
||||
}
|
||||
});
|
||||
// Hide mobile menu beforeunload.
|
||||
$(window).on('beforeunload unload', function() {
|
||||
if ($menuState[0].checked) {
|
||||
$menuState[0].click();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
"###r
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
fn after_prepare_component(&mut self, cx: &mut Context) {
|
||||
run_actions_after_prepare_megamenu(self, cx);
|
||||
}
|
||||
}
|
||||
|
||||
impl MegaMenu {
|
||||
// MegaMenu BUILDER.
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
|
||||
self.weight = value;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_renderable(&mut self, check: FnIsRenderable) -> &mut Self {
|
||||
self.renderable.check = check;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_id(&mut self, id: &str) -> &mut Self {
|
||||
self.id.alter_value(id);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_item(mut self, item: MegaItem) -> Self {
|
||||
self.items.alter(TypedOp::Add(TypedComponent::with(item)));
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_items(&mut self, op: TypedOp<MegaItem>) -> &mut Self {
|
||||
self.items.alter(op);
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_theme(&mut self, theme: MegaMenuTheme) -> &mut Self {
|
||||
self.theme = theme;
|
||||
self
|
||||
}
|
||||
|
||||
// MegaMenu GETTERS.
|
||||
|
||||
pub fn items(&self) -> &TypedComponents<MegaItem> {
|
||||
&self.items
|
||||
}
|
||||
|
||||
pub fn theme(&self) -> &MegaMenuTheme {
|
||||
&self.theme
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
use pagetop::prelude::*;
|
||||
|
||||
pub mod component {
|
||||
mod item;
|
||||
pub use item::{MegaItem, MegaItemType, COMPONENT_MEGAITEM};
|
||||
mod menu;
|
||||
pub use menu::{MegaMenu, COMPONENT_MEGAMENU};
|
||||
}
|
||||
|
||||
new_handle!(MODULE_MEGAMENU);
|
||||
|
||||
static_locales!(LOCALES_MEGAMENU);
|
||||
|
||||
static_files!(megamenu);
|
||||
|
||||
pub struct MegaMenu;
|
||||
|
||||
impl ModuleTrait for MegaMenu {
|
||||
fn handle(&self) -> Handle {
|
||||
MODULE_MEGAMENU
|
||||
}
|
||||
|
||||
fn name(&self) -> L10n {
|
||||
L10n::t("module_name", &LOCALES_MEGAMENU)
|
||||
}
|
||||
|
||||
fn description(&self) -> L10n {
|
||||
L10n::t("module_description", &LOCALES_MEGAMENU)
|
||||
}
|
||||
|
||||
fn dependencies(&self) -> Vec<ModuleRef> {
|
||||
vec![&pagetop_jquery::JQuery]
|
||||
}
|
||||
|
||||
fn configure_service(&self, scfg: &mut service::web::ServiceConfig) {
|
||||
static_files_service!(scfg, "/megamenu", megamenu);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
module_name = MegaMenu
|
||||
module_description = ...
|
||||
|
||||
toggle_menu = Toggle menu visibility
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
module_name = MegaMenu
|
||||
module_description = ...
|
||||
|
||||
toggle_menu = Alternar visibilidad del menú
|
||||
|
|
@ -1,333 +0,0 @@
|
|||
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);
|
||||
.sm-blue {
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active {
|
||||
padding: 10px 20px;
|
||||
/* make room for the toggle button (sub indicator) */
|
||||
padding-right: 58px;
|
||||
background: #3092c0;
|
||||
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
color: #fff;
|
||||
font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
line-height: 23px;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.sm-blue a.current {
|
||||
background: #006892;
|
||||
background-image: linear-gradient(to bottom, #006188, #006f9c);
|
||||
color: #fff;
|
||||
}
|
||||
.sm-blue a.disabled {
|
||||
color: #a1d1e8;
|
||||
}
|
||||
.sm-blue a .sub-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -17px;
|
||||
left: auto;
|
||||
right: 4px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
overflow: hidden;
|
||||
font: bold 16px/34px monospace !important;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.sm-blue a .sub-arrow::before {
|
||||
content: '+';
|
||||
}
|
||||
.sm-blue a.highlighted .sub-arrow::before {
|
||||
content: '-';
|
||||
}
|
||||
.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
.sm-blue > li:last-child > a, .sm-blue > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul {
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
.sm-blue > li:last-child > a.highlighted, .sm-blue > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted {
|
||||
border-radius: 0;
|
||||
}
|
||||
.sm-blue ul {
|
||||
background: #fff;
|
||||
}
|
||||
.sm-blue ul ul {
|
||||
background: rgba(102, 102, 102, 0.1);
|
||||
}
|
||||
.sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active {
|
||||
background: transparent;
|
||||
color: #2b82ac;
|
||||
font-size: 16px;
|
||||
text-shadow: none;
|
||||
border-left: 8px solid transparent;
|
||||
}
|
||||
.sm-blue ul a.current {
|
||||
background: #006892;
|
||||
background-image: linear-gradient(to bottom, #006188, #006f9c);
|
||||
color: #fff;
|
||||
}
|
||||
.sm-blue ul a.disabled {
|
||||
color: #b3b3b3;
|
||||
}
|
||||
.sm-blue ul ul a,
|
||||
.sm-blue ul ul a:hover,
|
||||
.sm-blue ul ul a:focus,
|
||||
.sm-blue ul ul a:active {
|
||||
border-left: 16px solid transparent;
|
||||
}
|
||||
.sm-blue ul ul ul a,
|
||||
.sm-blue ul ul ul a:hover,
|
||||
.sm-blue ul ul ul a:focus,
|
||||
.sm-blue ul ul ul a:active {
|
||||
border-left: 24px solid transparent;
|
||||
}
|
||||
.sm-blue ul ul ul ul a,
|
||||
.sm-blue ul ul ul ul a:hover,
|
||||
.sm-blue ul ul ul ul a:focus,
|
||||
.sm-blue ul ul ul ul a:active {
|
||||
border-left: 32px solid transparent;
|
||||
}
|
||||
.sm-blue ul ul ul ul ul a,
|
||||
.sm-blue ul ul ul ul ul a:hover,
|
||||
.sm-blue ul ul ul ul ul a:focus,
|
||||
.sm-blue ul ul ul ul ul a:active {
|
||||
border-left: 40px solid transparent;
|
||||
}
|
||||
.sm-blue ul li {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.sm-blue ul li:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* Switch to desktop layout
|
||||
-----------------------------------------------
|
||||
These transform the menu tree from
|
||||
collapsible to desktop (navbar + dropdowns)
|
||||
-----------------------------------------------*/
|
||||
/* start... (it's not recommended editing these rules) */
|
||||
.sm-blue ul {
|
||||
position: absolute;
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
.sm-blue li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sm-blue.sm-rtl li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.sm-blue ul li, .sm-blue.sm-rtl ul li, .sm-blue.sm-vertical li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.sm-blue a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sm-blue ul a, .sm-blue.sm-vertical a {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.sm-blue .sm-nowrap > li > a, .sm-blue .sm-nowrap > li > :not(ul) a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ...end */
|
||||
.sm-blue {
|
||||
background: #3092c0;
|
||||
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
|
||||
padding: 13px 24px;
|
||||
background: #3092c0;
|
||||
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
color: #fff;
|
||||
}
|
||||
.sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
|
||||
background: #2b82ac;
|
||||
background-image: linear-gradient(to bottom, #2d89b4, #297ca3);
|
||||
}
|
||||
.sm-blue a.current {
|
||||
background: #006892;
|
||||
background-image: linear-gradient(to bottom, #006188, #006f9c);
|
||||
color: #fff;
|
||||
}
|
||||
.sm-blue a.disabled {
|
||||
background: #3092c0;
|
||||
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
color: #a1d1e8;
|
||||
}
|
||||
.sm-blue a .sub-arrow {
|
||||
top: auto;
|
||||
margin-top: 0;
|
||||
bottom: 2px;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
right: auto;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 5px;
|
||||
border-style: solid dashed dashed dashed;
|
||||
border-color: #a1d1e8 transparent transparent transparent;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.sm-blue a .sub-arrow::before {
|
||||
display: none;
|
||||
}
|
||||
.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
.sm-blue > li:last-child > a, .sm-blue > li:last-child > :not(ul) a {
|
||||
border-radius: 0 8px 8px 0 !important;
|
||||
}
|
||||
.sm-blue > li {
|
||||
border-left: 1px solid #2b82ac;
|
||||
}
|
||||
.sm-blue > li:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.sm-blue ul {
|
||||
border: 1px solid #a8a8a8;
|
||||
padding: 7px 0;
|
||||
background: #fff;
|
||||
border-radius: 0 0 4px 4px !important;
|
||||
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.sm-blue ul ul {
|
||||
border-radius: 4px !important;
|
||||
background: #fff;
|
||||
}
|
||||
.sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
|
||||
border: 0 !important;
|
||||
padding: 9px 23px;
|
||||
background: transparent;
|
||||
color: #2b82ac;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
|
||||
background: #3092c0;
|
||||
background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
|
||||
color: #fff;
|
||||
}
|
||||
.sm-blue ul a.current {
|
||||
background: #006892;
|
||||
background-image: linear-gradient(to bottom, #006188, #006f9c);
|
||||
color: #fff;
|
||||
}
|
||||
.sm-blue ul a.disabled {
|
||||
background: #fff;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
.sm-blue ul a .sub-arrow {
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
margin-left: 0;
|
||||
right: 10px;
|
||||
border-style: dashed dashed dashed solid;
|
||||
border-color: transparent transparent transparent #a1d1e8;
|
||||
}
|
||||
.sm-blue ul li {
|
||||
border: 0;
|
||||
}
|
||||
.sm-blue .scroll-up,
|
||||
.sm-blue .scroll-down {
|
||||
position: absolute;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
height: 20px;
|
||||
}
|
||||
.sm-blue .scroll-up-arrow,
|
||||
.sm-blue .scroll-down-arrow {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-width: 8px;
|
||||
border-style: dashed dashed solid dashed;
|
||||
border-color: transparent transparent #2b82ac transparent;
|
||||
}
|
||||
.sm-blue .scroll-down-arrow {
|
||||
top: 6px;
|
||||
border-style: solid dashed dashed dashed;
|
||||
border-color: #2b82ac transparent transparent transparent;
|
||||
}
|
||||
.sm-blue.sm-rtl.sm-vertical a .sub-arrow {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #a1d1e8 transparent transparent;
|
||||
}
|
||||
.sm-blue.sm-rtl > li:first-child > a, .sm-blue.sm-rtl > li:first-child > :not(ul) a {
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
.sm-blue.sm-rtl > li:last-child > a, .sm-blue.sm-rtl > li:last-child > :not(ul) a {
|
||||
border-radius: 8px 0 0 8px !important;
|
||||
}
|
||||
.sm-blue.sm-rtl > li:first-child {
|
||||
border-left: 1px solid #2b82ac;
|
||||
}
|
||||
.sm-blue.sm-rtl > li:last-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.sm-blue.sm-rtl ul a .sub-arrow {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #a1d1e8 transparent transparent;
|
||||
}
|
||||
.sm-blue.sm-vertical {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.sm-blue.sm-vertical a {
|
||||
padding: 9px 23px;
|
||||
}
|
||||
.sm-blue.sm-vertical a .sub-arrow {
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
margin-left: 0;
|
||||
right: 10px;
|
||||
border-style: dashed dashed dashed solid;
|
||||
border-color: transparent transparent transparent #a1d1e8;
|
||||
}
|
||||
.sm-blue.sm-vertical > li:first-child > a, .sm-blue.sm-vertical > li:first-child > :not(ul) a {
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
.sm-blue.sm-vertical > li:last-child > a, .sm-blue.sm-vertical > li:last-child > :not(ul) a {
|
||||
border-radius: 0 0 8px 8px !important;
|
||||
}
|
||||
.sm-blue.sm-vertical > li {
|
||||
border-left: 0 !important;
|
||||
}
|
||||
.sm-blue.sm-vertical ul {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.sm-blue.sm-vertical ul a {
|
||||
padding: 9px 23px;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=sm-blue.css.map */
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": ["_sm-blue-theme.scss","mixins/_round-corners-last-item.scss","mixins/_sub-items-indentation.scss"],
|
||||
"names": [],
|
||||
"file": "sm-blue.css"
|
||||
}
|
||||
|
|
@ -1,327 +0,0 @@
|
|||
.sm-clean {
|
||||
background: #eeeeee;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active {
|
||||
padding: 13px 20px;
|
||||
/* make room for the toggle button (sub indicator) */
|
||||
padding-right: 58px;
|
||||
color: #555555;
|
||||
font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sm-clean a.current {
|
||||
color: #D23600;
|
||||
}
|
||||
.sm-clean a.disabled {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
.sm-clean a .sub-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -17px;
|
||||
left: auto;
|
||||
right: 4px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
overflow: hidden;
|
||||
font: bold 16px/34px monospace !important;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 5px;
|
||||
}
|
||||
.sm-clean a .sub-arrow::before {
|
||||
content: '+';
|
||||
}
|
||||
.sm-clean a.highlighted .sub-arrow::before {
|
||||
content: '-';
|
||||
}
|
||||
.sm-clean > li:first-child > a, .sm-clean > li:first-child > :not(ul) a {
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
.sm-clean > li:last-child > a, .sm-clean > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul, .sm-clean > li:last-child > ul > li:last-child > a, .sm-clean > li:last-child > ul > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul > li:last-child > ul, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul {
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
.sm-clean > li:last-child > a.highlighted, .sm-clean > li:last-child > *:not(ul) a.highlighted, .sm-clean > li:last-child > ul > li:last-child > a.highlighted, .sm-clean > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-clean > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted {
|
||||
border-radius: 0;
|
||||
}
|
||||
.sm-clean li {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.sm-clean > li:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.sm-clean ul {
|
||||
background: rgba(162, 162, 162, 0.1);
|
||||
}
|
||||
.sm-clean ul a, .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active {
|
||||
font-size: 16px;
|
||||
border-left: 8px solid transparent;
|
||||
}
|
||||
.sm-clean ul ul a,
|
||||
.sm-clean ul ul a:hover,
|
||||
.sm-clean ul ul a:focus,
|
||||
.sm-clean ul ul a:active {
|
||||
border-left: 16px solid transparent;
|
||||
}
|
||||
.sm-clean ul ul ul a,
|
||||
.sm-clean ul ul ul a:hover,
|
||||
.sm-clean ul ul ul a:focus,
|
||||
.sm-clean ul ul ul a:active {
|
||||
border-left: 24px solid transparent;
|
||||
}
|
||||
.sm-clean ul ul ul ul a,
|
||||
.sm-clean ul ul ul ul a:hover,
|
||||
.sm-clean ul ul ul ul a:focus,
|
||||
.sm-clean ul ul ul ul a:active {
|
||||
border-left: 32px solid transparent;
|
||||
}
|
||||
.sm-clean ul ul ul ul ul a,
|
||||
.sm-clean ul ul ul ul ul a:hover,
|
||||
.sm-clean ul ul ul ul ul a:focus,
|
||||
.sm-clean ul ul ul ul ul a:active {
|
||||
border-left: 40px solid transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* Switch to desktop layout
|
||||
-----------------------------------------------
|
||||
These transform the menu tree from
|
||||
collapsible to desktop (navbar + dropdowns)
|
||||
-----------------------------------------------*/
|
||||
/* start... (it's not recommended editing these rules) */
|
||||
.sm-clean ul {
|
||||
position: absolute;
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
.sm-clean li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sm-clean.sm-rtl li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.sm-clean ul li, .sm-clean.sm-rtl ul li, .sm-clean.sm-vertical li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.sm-clean a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sm-clean ul a, .sm-clean.sm-vertical a {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.sm-clean .sm-nowrap > li > a, .sm-clean .sm-nowrap > li > :not(ul) a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ...end */
|
||||
.sm-clean {
|
||||
padding: 0 10px;
|
||||
background: #eeeeee;
|
||||
border-radius: 100px;
|
||||
}
|
||||
.sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active, .sm-clean a.highlighted {
|
||||
padding: 12px 12px;
|
||||
color: #555555;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active, .sm-clean a.highlighted {
|
||||
color: #D23600;
|
||||
}
|
||||
.sm-clean a.current {
|
||||
color: #D23600;
|
||||
}
|
||||
.sm-clean a.disabled {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
.sm-clean a.has-submenu {
|
||||
padding-right: 24px;
|
||||
}
|
||||
.sm-clean a .sub-arrow {
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
right: 12px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 4px;
|
||||
border-style: solid dashed dashed dashed;
|
||||
border-color: #555555 transparent transparent transparent;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.sm-clean a .sub-arrow::before {
|
||||
display: none;
|
||||
}
|
||||
.sm-clean li {
|
||||
border-top: 0;
|
||||
}
|
||||
.sm-clean > li > ul::before,
|
||||
.sm-clean > li > ul::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
left: 30px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-width: 9px;
|
||||
border-style: dashed dashed solid dashed;
|
||||
border-color: transparent transparent #bbbbbb transparent;
|
||||
}
|
||||
.sm-clean > li > ul::after {
|
||||
top: -16px;
|
||||
left: 31px;
|
||||
border-width: 8px;
|
||||
border-color: transparent transparent #fff transparent;
|
||||
}
|
||||
.sm-clean ul {
|
||||
border: 1px solid #bbbbbb;
|
||||
padding: 5px 0;
|
||||
background: #fff;
|
||||
border-radius: 5px !important;
|
||||
box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.sm-clean ul a, .sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted {
|
||||
border: 0 !important;
|
||||
padding: 10px 20px;
|
||||
color: #555555;
|
||||
}
|
||||
.sm-clean ul a:hover, .sm-clean ul a:focus, .sm-clean ul a:active, .sm-clean ul a.highlighted {
|
||||
background: #eeeeee;
|
||||
color: #D23600;
|
||||
}
|
||||
.sm-clean ul a.current {
|
||||
color: #D23600;
|
||||
}
|
||||
.sm-clean ul a.disabled {
|
||||
background: #fff;
|
||||
color: #cccccc;
|
||||
}
|
||||
.sm-clean ul a.has-submenu {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.sm-clean ul a .sub-arrow {
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
border-width: 5px;
|
||||
border-style: dashed dashed dashed solid;
|
||||
border-color: transparent transparent transparent #555555;
|
||||
}
|
||||
.sm-clean .scroll-up,
|
||||
.sm-clean .scroll-down {
|
||||
position: absolute;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
height: 20px;
|
||||
}
|
||||
.sm-clean .scroll-up:hover,
|
||||
.sm-clean .scroll-down:hover {
|
||||
background: #eeeeee;
|
||||
}
|
||||
.sm-clean .scroll-up:hover .scroll-up-arrow {
|
||||
border-color: transparent transparent #D23600 transparent;
|
||||
}
|
||||
.sm-clean .scroll-down:hover .scroll-down-arrow {
|
||||
border-color: #D23600 transparent transparent transparent;
|
||||
}
|
||||
.sm-clean .scroll-up-arrow,
|
||||
.sm-clean .scroll-down-arrow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-width: 6px;
|
||||
border-style: dashed dashed solid dashed;
|
||||
border-color: transparent transparent #555555 transparent;
|
||||
}
|
||||
.sm-clean .scroll-down-arrow {
|
||||
top: 8px;
|
||||
border-style: solid dashed dashed dashed;
|
||||
border-color: #555555 transparent transparent transparent;
|
||||
}
|
||||
.sm-clean.sm-rtl a.has-submenu {
|
||||
padding-right: 12px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
.sm-clean.sm-rtl a .sub-arrow {
|
||||
right: auto;
|
||||
left: 12px;
|
||||
}
|
||||
.sm-clean.sm-rtl.sm-vertical a.has-submenu {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.sm-clean.sm-rtl.sm-vertical a .sub-arrow {
|
||||
right: auto;
|
||||
left: 8px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #555555 transparent transparent;
|
||||
}
|
||||
.sm-clean.sm-rtl > li > ul::before {
|
||||
left: auto;
|
||||
right: 30px;
|
||||
}
|
||||
.sm-clean.sm-rtl > li > ul::after {
|
||||
left: auto;
|
||||
right: 31px;
|
||||
}
|
||||
.sm-clean.sm-rtl ul a.has-submenu {
|
||||
padding: 10px 20px !important;
|
||||
}
|
||||
.sm-clean.sm-rtl ul a .sub-arrow {
|
||||
right: auto;
|
||||
left: 8px;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #555555 transparent transparent;
|
||||
}
|
||||
.sm-clean.sm-vertical {
|
||||
padding: 10px 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.sm-clean.sm-vertical a {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.sm-clean.sm-vertical a:hover, .sm-clean.sm-vertical a:focus, .sm-clean.sm-vertical a:active, .sm-clean.sm-vertical a.highlighted {
|
||||
background: #fff;
|
||||
}
|
||||
.sm-clean.sm-vertical a.disabled {
|
||||
background: #eeeeee;
|
||||
}
|
||||
.sm-clean.sm-vertical a .sub-arrow {
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
border-width: 5px;
|
||||
border-style: dashed dashed dashed solid;
|
||||
border-color: transparent transparent transparent #555555;
|
||||
}
|
||||
.sm-clean.sm-vertical > li > ul::before,
|
||||
.sm-clean.sm-vertical > li > ul::after {
|
||||
display: none;
|
||||
}
|
||||
.sm-clean.sm-vertical ul a {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.sm-clean.sm-vertical ul a:hover, .sm-clean.sm-vertical ul a:focus, .sm-clean.sm-vertical ul a:active, .sm-clean.sm-vertical ul a.highlighted {
|
||||
background: #eeeeee;
|
||||
}
|
||||
.sm-clean.sm-vertical ul a.disabled {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=sm-clean.css.map */
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": ["_sm-clean-theme.scss","mixins/_round-corners-last-item.scss","mixins/_sub-items-indentation.scss"],
|
||||
"names": [],
|
||||
"file": "sm-clean.css"
|
||||
}
|
||||
|
|
@ -1,331 +0,0 @@
|
|||
.sm-mint {
|
||||
border-top: 2px solid #8db863;
|
||||
border-bottom: 2px solid #8db863;
|
||||
background: #fff;
|
||||
}
|
||||
.sm-mint a, .sm-mint a:hover, .sm-mint a:focus, .sm-mint a:active {
|
||||
padding: 13px 20px;
|
||||
/* make room for the toggle button (sub indicator) */
|
||||
padding-right: 58px;
|
||||
color: #333;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sm-mint a.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
.sm-mint a.disabled {
|
||||
color: #cccccc;
|
||||
}
|
||||
.sm-mint a .sub-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -17px;
|
||||
left: auto;
|
||||
right: 4px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
overflow: hidden;
|
||||
font: bold 14px/34px monospace !important;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
background: rgba(141, 184, 99, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.sm-mint a .sub-arrow::before {
|
||||
content: '+';
|
||||
}
|
||||
.sm-mint a.highlighted .sub-arrow::before {
|
||||
content: '-';
|
||||
}
|
||||
.sm-mint li {
|
||||
border-top: 1px solid rgba(141, 184, 99, 0.2);
|
||||
}
|
||||
.sm-mint > li:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.sm-mint ul {
|
||||
background: rgba(141, 184, 99, 0.2);
|
||||
}
|
||||
.sm-mint ul a, .sm-mint ul a:hover, .sm-mint ul a:focus, .sm-mint ul a:active {
|
||||
font-size: 14px;
|
||||
border-left: 8px solid transparent;
|
||||
}
|
||||
.sm-mint ul ul a,
|
||||
.sm-mint ul ul a:hover,
|
||||
.sm-mint ul ul a:focus,
|
||||
.sm-mint ul ul a:active {
|
||||
border-left: 16px solid transparent;
|
||||
}
|
||||
.sm-mint ul ul ul a,
|
||||
.sm-mint ul ul ul a:hover,
|
||||
.sm-mint ul ul ul a:focus,
|
||||
.sm-mint ul ul ul a:active {
|
||||
border-left: 24px solid transparent;
|
||||
}
|
||||
.sm-mint ul ul ul ul a,
|
||||
.sm-mint ul ul ul ul a:hover,
|
||||
.sm-mint ul ul ul ul a:focus,
|
||||
.sm-mint ul ul ul ul a:active {
|
||||
border-left: 32px solid transparent;
|
||||
}
|
||||
.sm-mint ul ul ul ul ul a,
|
||||
.sm-mint ul ul ul ul ul a:hover,
|
||||
.sm-mint ul ul ul ul ul a:focus,
|
||||
.sm-mint ul ul ul ul ul a:active {
|
||||
border-left: 40px solid transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* Switch to desktop layout
|
||||
-----------------------------------------------
|
||||
These transform the menu tree from
|
||||
collapsible to desktop (navbar + dropdowns)
|
||||
-----------------------------------------------*/
|
||||
/* start... (it's not recommended editing these rules) */
|
||||
.sm-mint ul {
|
||||
position: absolute;
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
.sm-mint li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sm-mint.sm-rtl li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.sm-mint ul li, .sm-mint.sm-rtl ul li, .sm-mint.sm-vertical li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.sm-mint a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sm-mint ul a, .sm-mint.sm-vertical a {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.sm-mint .sm-nowrap > li > a, .sm-mint .sm-nowrap > li > :not(ul) a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ...end */
|
||||
.sm-mint {
|
||||
border-top: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.sm-mint a, .sm-mint a:hover, .sm-mint a:focus, .sm-mint a:active, .sm-mint a.highlighted {
|
||||
padding: 11px 20px;
|
||||
color: #333;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.sm-mint a:hover, .sm-mint a:focus, .sm-mint a:active {
|
||||
background: #8db863;
|
||||
color: #fff;
|
||||
}
|
||||
.sm-mint a.highlighted {
|
||||
background: #F6FFED;
|
||||
color: #333;
|
||||
box-shadow: 0 4px 3px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.sm-mint a.disabled {
|
||||
background: transparent;
|
||||
color: #cccccc;
|
||||
box-shadow: none;
|
||||
}
|
||||
.sm-mint a.has-submenu {
|
||||
padding-right: 34px;
|
||||
}
|
||||
.sm-mint a .sub-arrow {
|
||||
top: 50%;
|
||||
margin-top: -3px;
|
||||
right: 20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-width: 6px 4.02px 0 4.02px;
|
||||
border-style: solid dashed dashed dashed;
|
||||
border-color: #8db863 transparent transparent transparent;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.sm-mint a:hover .sub-arrow, .sm-mint a:focus .sub-arrow, .sm-mint a:active .sub-arrow {
|
||||
border-color: #fff transparent transparent transparent;
|
||||
}
|
||||
.sm-mint a.highlighted .sub-arrow {
|
||||
border-color: #8db863 transparent transparent transparent;
|
||||
}
|
||||
.sm-mint a.disabled .sub-arrow {
|
||||
border-color: #8db863 transparent transparent transparent;
|
||||
}
|
||||
.sm-mint a .sub-arrow::before {
|
||||
display: none;
|
||||
}
|
||||
.sm-mint li {
|
||||
border-top: 0;
|
||||
}
|
||||
.sm-mint ul {
|
||||
border: 0;
|
||||
padding: 8px 0;
|
||||
background: #F6FFED;
|
||||
border-radius: 0 4px 4px 4px;
|
||||
box-shadow: 0 4px 3px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.sm-mint ul ul {
|
||||
border-radius: 4px;
|
||||
}
|
||||
.sm-mint ul a, .sm-mint ul a:hover, .sm-mint ul a:focus, .sm-mint ul a:active, .sm-mint ul a.highlighted {
|
||||
border: 0 !important;
|
||||
padding: 10px 20px;
|
||||
color: #333;
|
||||
border-radius: 0;
|
||||
}
|
||||
.sm-mint ul a:hover, .sm-mint ul a:focus, .sm-mint ul a:active, .sm-mint ul a.highlighted {
|
||||
background: #8db863;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
.sm-mint ul a.disabled {
|
||||
background: transparent;
|
||||
color: #b3b3b3;
|
||||
}
|
||||
.sm-mint ul a.has-submenu {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.sm-mint ul a .sub-arrow {
|
||||
right: 10px;
|
||||
margin-top: -4.02px;
|
||||
border-width: 4.02px 0 4.02px 6px;
|
||||
border-style: dashed dashed dashed solid;
|
||||
border-color: transparent transparent transparent #8db863;
|
||||
}
|
||||
.sm-mint ul a:hover .sub-arrow, .sm-mint ul a:focus .sub-arrow, .sm-mint ul a:active .sub-arrow, .sm-mint ul a.highlighted .sub-arrow {
|
||||
border-color: transparent transparent transparent #fff;
|
||||
}
|
||||
.sm-mint ul a.disabled .sub-arrow {
|
||||
border-color: transparent transparent transparent #8db863;
|
||||
}
|
||||
.sm-mint .scroll-up,
|
||||
.sm-mint .scroll-down {
|
||||
position: absolute;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
background: #F6FFED;
|
||||
height: 20px;
|
||||
}
|
||||
.sm-mint .scroll-up-arrow,
|
||||
.sm-mint .scroll-down-arrow {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-width: 0 6px 8px 6px;
|
||||
border-style: dashed dashed solid dashed;
|
||||
border-color: transparent transparent #8db863 transparent;
|
||||
}
|
||||
.sm-mint .scroll-down-arrow {
|
||||
border-width: 8px 6px 0 6px;
|
||||
border-style: solid dashed dashed dashed;
|
||||
border-color: #8db863 transparent transparent transparent;
|
||||
}
|
||||
.sm-mint.sm-rtl a.has-submenu {
|
||||
padding-right: 20px;
|
||||
padding-left: 34px;
|
||||
}
|
||||
.sm-mint.sm-rtl a .sub-arrow {
|
||||
right: auto;
|
||||
left: 20px;
|
||||
}
|
||||
.sm-mint.sm-rtl.sm-vertical {
|
||||
border-right: 0;
|
||||
border-left: 2px solid #8db863;
|
||||
}
|
||||
.sm-mint.sm-rtl.sm-vertical a {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.sm-mint.sm-rtl.sm-vertical a.has-submenu {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.sm-mint.sm-rtl.sm-vertical a .sub-arrow {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
border-width: 4.02px 6px 4.02px 0;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #8db863 transparent transparent;
|
||||
}
|
||||
.sm-mint.sm-rtl.sm-vertical a:hover .sub-arrow, .sm-mint.sm-rtl.sm-vertical a:focus .sub-arrow, .sm-mint.sm-rtl.sm-vertical a:active .sub-arrow, .sm-mint.sm-rtl.sm-vertical a.highlighted .sub-arrow {
|
||||
border-color: transparent #fff transparent transparent;
|
||||
}
|
||||
.sm-mint.sm-rtl.sm-vertical a.disabled .sub-arrow {
|
||||
border-color: transparent #8db863 transparent transparent;
|
||||
}
|
||||
.sm-mint.sm-rtl ul {
|
||||
border-radius: 4px 0 4px 4px;
|
||||
}
|
||||
.sm-mint.sm-rtl ul a {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.sm-mint.sm-rtl ul a.has-submenu {
|
||||
padding: 10px 20px !important;
|
||||
}
|
||||
.sm-mint.sm-rtl ul a .sub-arrow {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
border-width: 4.02px 6px 4.02px 0;
|
||||
border-style: dashed solid dashed dashed;
|
||||
border-color: transparent #8db863 transparent transparent;
|
||||
}
|
||||
.sm-mint.sm-rtl ul a:hover .sub-arrow, .sm-mint.sm-rtl ul a:focus .sub-arrow, .sm-mint.sm-rtl ul a:active .sub-arrow, .sm-mint.sm-rtl ul a.highlighted .sub-arrow {
|
||||
border-color: transparent #fff transparent transparent;
|
||||
}
|
||||
.sm-mint.sm-rtl ul a.disabled .sub-arrow {
|
||||
border-color: transparent #8db863 transparent transparent;
|
||||
}
|
||||
.sm-mint.sm-vertical {
|
||||
border-bottom: 0;
|
||||
border-right: 2px solid #8db863;
|
||||
}
|
||||
.sm-mint.sm-vertical a {
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.sm-mint.sm-vertical a:hover, .sm-mint.sm-vertical a:focus, .sm-mint.sm-vertical a:active, .sm-mint.sm-vertical a.highlighted {
|
||||
background: #8db863;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
}
|
||||
.sm-mint.sm-vertical a.disabled {
|
||||
background: transparent;
|
||||
color: #cccccc;
|
||||
}
|
||||
.sm-mint.sm-vertical a .sub-arrow {
|
||||
right: 10px;
|
||||
margin-top: -4.02px;
|
||||
border-width: 4.02px 0 4.02px 6px;
|
||||
border-style: dashed dashed dashed solid;
|
||||
border-color: transparent transparent transparent #8db863;
|
||||
}
|
||||
.sm-mint.sm-vertical a:hover .sub-arrow, .sm-mint.sm-vertical a:focus .sub-arrow, .sm-mint.sm-vertical a:active .sub-arrow, .sm-mint.sm-vertical a.highlighted .sub-arrow {
|
||||
border-color: transparent transparent transparent #fff;
|
||||
}
|
||||
.sm-mint.sm-vertical a.disabled .sub-arrow {
|
||||
border-color: transparent transparent transparent #8db863;
|
||||
}
|
||||
.sm-mint.sm-vertical ul {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.sm-mint.sm-vertical ul a {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=sm-mint.css.map */
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": ["_sm-mint-theme.scss","mixins/_sub-items-indentation.scss"],
|
||||
"names": [],
|
||||
"file": "sm-mint.css"
|
||||
}
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
.sm-simple {
|
||||
border: 1px solid #bbbbbb;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active {
|
||||
padding: 13px 20px;
|
||||
/* make room for the toggle button (sub indicator) */
|
||||
padding-right: 58px;
|
||||
color: #555555;
|
||||
font-family: "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sm-simple a.current {
|
||||
background: #555555;
|
||||
color: #fff;
|
||||
}
|
||||
.sm-simple a.disabled {
|
||||
color: #cccccc;
|
||||
}
|
||||
.sm-simple a .sub-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -17px;
|
||||
left: auto;
|
||||
right: 4px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
overflow: hidden;
|
||||
font: bold 14px/34px monospace !important;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.sm-simple a .sub-arrow::before {
|
||||
content: '+';
|
||||
}
|
||||
.sm-simple a.highlighted .sub-arrow::before {
|
||||
content: '-';
|
||||
}
|
||||
.sm-simple li {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.sm-simple > li:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.sm-simple ul {
|
||||
background: rgba(179, 179, 179, 0.1);
|
||||
}
|
||||
.sm-simple ul a, .sm-simple ul a:hover, .sm-simple ul a:focus, .sm-simple ul a:active {
|
||||
font-size: 14px;
|
||||
border-left: 8px solid transparent;
|
||||
}
|
||||
.sm-simple ul ul a,
|
||||
.sm-simple ul ul a:hover,
|
||||
.sm-simple ul ul a:focus,
|
||||
.sm-simple ul ul a:active {
|
||||
border-left: 16px solid transparent;
|
||||
}
|
||||
.sm-simple ul ul ul a,
|
||||
.sm-simple ul ul ul a:hover,
|
||||
.sm-simple ul ul ul a:focus,
|
||||
.sm-simple ul ul ul a:active {
|
||||
border-left: 24px solid transparent;
|
||||
}
|
||||
.sm-simple ul ul ul ul a,
|
||||
.sm-simple ul ul ul ul a:hover,
|
||||
.sm-simple ul ul ul ul a:focus,
|
||||
.sm-simple ul ul ul ul a:active {
|
||||
border-left: 32px solid transparent;
|
||||
}
|
||||
.sm-simple ul ul ul ul ul a,
|
||||
.sm-simple ul ul ul ul ul a:hover,
|
||||
.sm-simple ul ul ul ul ul a:focus,
|
||||
.sm-simple ul ul ul ul ul a:active {
|
||||
border-left: 40px solid transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
/* Switch to desktop layout
|
||||
-----------------------------------------------
|
||||
These transform the menu tree from
|
||||
collapsible to desktop (navbar + dropdowns)
|
||||
-----------------------------------------------*/
|
||||
/* start... (it's not recommended editing these rules) */
|
||||
.sm-simple ul {
|
||||
position: absolute;
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
.sm-simple li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sm-simple.sm-rtl li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.sm-simple ul li, .sm-simple.sm-rtl ul li, .sm-simple.sm-vertical li {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.sm-simple a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sm-simple ul a, .sm-simple.sm-vertical a {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.sm-simple .sm-nowrap > li > a, .sm-simple .sm-nowrap > li > :not(ul) a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ...end */
|
||||
.sm-simple {
|
||||
background: #fff;
|
||||
}
|
||||
.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
|
||||
padding: 11px 20px;
|
||||
color: #555555;
|
||||
}
|
||||
.sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
|
||||
background: #eeeeee;
|
||||
}
|
||||
.sm-simple a.current {
|
||||
background: #555555;
|
||||
color: #fff;
|
||||
}
|
||||
.sm-simple a.disabled {
|
||||
background: #fff;
|
||||
color: #cccccc;
|
||||
}
|
||||
.sm-simple a.has-submenu {
|
||||
padding-right: 32px;
|
||||
}
|
||||
.sm-simple a .sub-arrow {
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
right: 20px;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
font: 14px/16px monospace !important;
|
||||
background: transparent;
|
||||
}
|
||||
.sm-simple a.highlighted .sub-arrow::before {
|
||||
content: '+';
|
||||
}
|
||||
.sm-simple > li {
|
||||
border-top: 0;
|
||||
border-left: 1px solid #eeeeee;
|
||||
}
|
||||
.sm-simple > li:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.sm-simple ul {
|
||||
border: 1px solid #bbbbbb;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.sm-simple ul a {
|
||||
border: 0 !important;
|
||||
}
|
||||
.sm-simple ul a.has-submenu {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.sm-simple ul a .sub-arrow {
|
||||
left: 8px;
|
||||
right: auto;
|
||||
}
|
||||
.sm-simple ul > li {
|
||||
border-left: 0;
|
||||
border-top: 1px solid #eeeeee;
|
||||
}
|
||||
.sm-simple ul > li:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.sm-simple .scroll-up,
|
||||
.sm-simple .scroll-down {
|
||||
position: absolute;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
height: 20px;
|
||||
}
|
||||
.sm-simple .scroll-up-arrow,
|
||||
.sm-simple .scroll-down-arrow {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-width: 8px;
|
||||
border-style: dashed dashed solid dashed;
|
||||
border-color: transparent transparent #555555 transparent;
|
||||
}
|
||||
.sm-simple .scroll-down-arrow {
|
||||
top: 6px;
|
||||
border-style: solid dashed dashed dashed;
|
||||
border-color: #555555 transparent transparent transparent;
|
||||
}
|
||||
.sm-simple.sm-rtl a.has-submenu {
|
||||
padding-right: 20px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
.sm-simple.sm-rtl a .sub-arrow {
|
||||
left: 20px;
|
||||
right: auto;
|
||||
}
|
||||
.sm-simple.sm-rtl.sm-vertical a.has-submenu {
|
||||
padding: 11px 20px;
|
||||
}
|
||||
.sm-simple.sm-rtl.sm-vertical a .sub-arrow {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
}
|
||||
.sm-simple.sm-rtl > li:first-child {
|
||||
border-left: 1px solid #eeeeee;
|
||||
}
|
||||
.sm-simple.sm-rtl > li:last-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.sm-simple.sm-rtl ul a.has-submenu {
|
||||
padding: 11px 20px;
|
||||
}
|
||||
.sm-simple.sm-rtl ul a .sub-arrow {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
}
|
||||
.sm-simple.sm-vertical a .sub-arrow {
|
||||
left: 8px;
|
||||
right: auto;
|
||||
}
|
||||
.sm-simple.sm-vertical li {
|
||||
border-left: 0;
|
||||
border-top: 1px solid #eeeeee;
|
||||
}
|
||||
.sm-simple.sm-vertical > li:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=sm-simple.css.map */
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "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",
|
||||
"sources": ["_sm-simple-theme.scss","mixins/_sub-items-indentation.scss"],
|
||||
"names": [],
|
||||
"file": "sm-simple.css"
|
||||
}
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
.megamenu:after {
|
||||
clear: both;
|
||||
content: "\00a0";
|
||||
display: block;
|
||||
height: 0;
|
||||
font: 0px/0 serif;
|
||||
overflow: hidden;
|
||||
}/*
|
||||
@media (min-width: 768px) {
|
||||
.megamenu {
|
||||
position: relative;
|
||||
}
|
||||
}*/
|
||||
|
||||
.megamenu-menu {
|
||||
clear: both;
|
||||
}/*
|
||||
@media (min-width: 768px) {
|
||||
.megamenu-menu {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
}
|
||||
}*/
|
||||
|
||||
/* Mobile menu toggle button */
|
||||
|
||||
.megamenu-btn {
|
||||
float: right;
|
||||
margin: 6px 10px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
text-indent: 29px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
/* Hide the button in desktop view */
|
||||
.megamenu-btn {
|
||||
position: absolute;
|
||||
top: -99999px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hamburger icon */
|
||||
|
||||
.megamenu-btn-icon,
|
||||
.megamenu-btn-icon:before,
|
||||
.megamenu-btn-icon:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 2px;
|
||||
height: 2px;
|
||||
width: 24px;
|
||||
background: #555;
|
||||
-webkit-transition: all 0.25s;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
.megamenu-btn-icon:before {
|
||||
content: '';
|
||||
top: -7px;
|
||||
left: 0;
|
||||
}
|
||||
.megamenu-btn-icon:after {
|
||||
content: '';
|
||||
top: 7px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* X icon */
|
||||
|
||||
.megamenu-state:checked ~ .megamenu-btn .megamenu-btn-icon {
|
||||
height: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.megamenu-state:checked ~ .megamenu-btn .megamenu-btn-icon:before {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.megamenu-state:checked ~ .megamenu-btn .megamenu-btn-icon:after {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* Hide menu state checkbox (keep it visible to screen readers) */
|
||||
|
||||
.megamenu-state {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
|
||||
/* Hide the menu in mobile view */
|
||||
|
||||
.megamenu-state:not(:checked) ~ .megamenu-menu {
|
||||
display: none;
|
||||
}
|
||||
.megamenu-state:checked ~ .megamenu-menu {
|
||||
display: block;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
/* Always show the menu in desktop view */
|
||||
.megamenu-state:not(:checked) ~ .megamenu-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Core */
|
||||
|
||||
.sm{box-sizing:border-box;z-index:9999;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
||||
.sm,.sm ul,.sm li{display:block;list-style:none;margin:0;padding:0;line-height:normal;direction:ltr;text-align:left;}
|
||||
.sm-rtl,.sm-rtl ul,.sm-rtl li{direction:rtl;text-align:right;}
|
||||
.sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6{margin:0;padding:0;}
|
||||
.sm ul{display:none;}
|
||||
.sm li,.sm a{position:relative;}
|
||||
.sm a{display:block;}
|
||||
.sm a.disabled{cursor:default;}
|
||||
.sm::after{content:"";display:block;height:0;font:0px/0 serif;clear:both;overflow:hidden;}
|
||||
.sm *,.sm *::before,.sm *::after{box-sizing:inherit;}
|
||||
3
pagetop-megamenu/static/js/smartmenus.min.js
vendored
3
pagetop-megamenu/static/js/smartmenus.min.js
vendored
File diff suppressed because one or more lines are too long
17
pagetop/src/base/component/menu.rs
Normal file
17
pagetop/src/base/component/menu.rs
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
mod menu_main;
|
||||
pub use menu_main::{Menu, COMPONENT_MENU};
|
||||
|
||||
mod item;
|
||||
pub use item::{Item, ItemType, COMPONENT_MENU_ITEM};
|
||||
|
||||
mod submenu;
|
||||
pub use submenu::{Submenu, COMPONENT_MENU_SUBMENU};
|
||||
|
||||
mod megamenu;
|
||||
pub use megamenu::{Megamenu, COMPONENT_MENU_MEGAMENU};
|
||||
|
||||
mod group;
|
||||
pub use group::{Group, COMPONENT_MENU_GROUP};
|
||||
|
||||
mod element;
|
||||
pub use element::{Element, ElementType, COMPONENT_MENU_ELEMENT};
|
||||
92
pagetop/src/base/component/menu/element.rs
Normal file
92
pagetop/src/base/component/menu/element.rs
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
use crate::prelude::*;
|
||||
|
||||
use super::Submenu;
|
||||
|
||||
new_handle!(COMPONENT_MENU_ELEMENT);
|
||||
|
||||
type Content = TypedComponent<Html>;
|
||||
type SubmenuItems = TypedComponent<Submenu>;
|
||||
|
||||
#[derive(Default)]
|
||||
pub enum ElementType {
|
||||
#[default]
|
||||
Void,
|
||||
Html(Content),
|
||||
Submenu(SubmenuItems),
|
||||
}
|
||||
|
||||
// Element.
|
||||
|
||||
#[rustfmt::skip]
|
||||
#[derive(Default)]
|
||||
pub struct Element {
|
||||
weight : Weight,
|
||||
renderable : Renderable,
|
||||
element_type: ElementType,
|
||||
}
|
||||
|
||||
impl ComponentTrait for Element {
|
||||
fn new() -> Self {
|
||||
Element::default()
|
||||
}
|
||||
|
||||
fn handle(&self) -> Handle {
|
||||
COMPONENT_MENU_ELEMENT
|
||||
}
|
||||
|
||||
fn weight(&self) -> Weight {
|
||||
self.weight
|
||||
}
|
||||
|
||||
fn is_renderable(&self, cx: &Context) -> bool {
|
||||
(self.renderable.check)(cx)
|
||||
}
|
||||
|
||||
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
|
||||
match self.element_type() {
|
||||
ElementType::Void => PrepareMarkup::None,
|
||||
ElementType::Html(content) => PrepareMarkup::With(html! {
|
||||
(content.prepare(cx))
|
||||
}),
|
||||
ElementType::Submenu(submenu) => PrepareMarkup::With(html! {
|
||||
(submenu.prepare(cx))
|
||||
}),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl Element {
|
||||
pub fn html(content: Html) -> Self {
|
||||
Element {
|
||||
element_type: ElementType::Html(Content::with(content)),
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn submenu(submenu: Submenu) -> Self {
|
||||
Element {
|
||||
element_type: ElementType::Submenu(SubmenuItems::with(submenu)),
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
// Element BUILDER.
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
|
||||
self.weight = value;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_renderable(&mut self, check: FnIsRenderable) -> &mut Self {
|
||||
self.renderable.check = check;
|
||||
self
|
||||
}
|
||||
|
||||
// Element GETTERS.
|
||||
|
||||
pub fn element_type(&self) -> &ElementType {
|
||||
&self.element_type
|
||||
}
|
||||
}
|
||||
86
pagetop/src/base/component/menu/group.rs
Normal file
86
pagetop/src/base/component/menu/group.rs
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
use crate::prelude::*;
|
||||
|
||||
use super::Element;
|
||||
|
||||
new_handle!(COMPONENT_MENU_GROUP);
|
||||
|
||||
type Elements = TypedComponents<Element>;
|
||||
|
||||
#[rustfmt::skip]
|
||||
#[derive(Default)]
|
||||
pub struct Group {
|
||||
weight : Weight,
|
||||
renderable: Renderable,
|
||||
id : OptionId,
|
||||
elements : Elements,
|
||||
}
|
||||
|
||||
impl ComponentTrait for Group {
|
||||
fn new() -> Self {
|
||||
Group::default()
|
||||
}
|
||||
|
||||
fn handle(&self) -> Handle {
|
||||
COMPONENT_MENU_GROUP
|
||||
}
|
||||
|
||||
fn id(&self) -> Option<String> {
|
||||
self.id.get()
|
||||
}
|
||||
|
||||
fn weight(&self) -> Weight {
|
||||
self.weight
|
||||
}
|
||||
|
||||
fn is_renderable(&self, cx: &Context) -> bool {
|
||||
(self.renderable.check)(cx)
|
||||
}
|
||||
|
||||
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
|
||||
PrepareMarkup::With(html! {
|
||||
div id=[self.id()] class="menu-group" {
|
||||
(self.elements().prepare(cx))
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
impl Group {
|
||||
// Group BUILDER.
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
|
||||
self.weight = value;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_renderable(&mut self, check: FnIsRenderable) -> &mut Self {
|
||||
self.renderable.check = check;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
|
||||
self.id.alter_value(id);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_element(mut self, element: Element) -> Self {
|
||||
self.elements
|
||||
.alter(TypedOp::Add(TypedComponent::with(element)));
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_elements(&mut self, op: TypedOp<Element>) -> &mut Self {
|
||||
self.elements.alter(op);
|
||||
self
|
||||
}
|
||||
|
||||
// Group GETTERS.
|
||||
|
||||
pub fn elements(&self) -> &Elements {
|
||||
&self.elements
|
||||
}
|
||||
}
|
||||
179
pagetop/src/base/component/menu/item.rs
Normal file
179
pagetop/src/base/component/menu/item.rs
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
use crate::prelude::*;
|
||||
|
||||
use super::{Megamenu, Submenu};
|
||||
|
||||
new_handle!(COMPONENT_MENU_ITEM);
|
||||
|
||||
type Label = TypedComponent<L10n>;
|
||||
type Content = TypedComponent<Html>;
|
||||
type SubmenuItems = TypedComponent<Submenu>;
|
||||
type MegamenuGroups = TypedComponent<Megamenu>;
|
||||
type Description = TypedComponent<L10n>;
|
||||
|
||||
#[derive(Default)]
|
||||
pub enum ItemType {
|
||||
#[default]
|
||||
Void,
|
||||
Label(Label),
|
||||
Link(Label, FnContextualPath),
|
||||
LinkBlank(Label, FnContextualPath),
|
||||
Html(Content),
|
||||
Submenu(Label, SubmenuItems),
|
||||
Megamenu(Label, MegamenuGroups),
|
||||
}
|
||||
|
||||
// Item.
|
||||
|
||||
#[rustfmt::skip]
|
||||
#[derive(Default)]
|
||||
pub struct Item {
|
||||
weight : Weight,
|
||||
renderable : Renderable,
|
||||
item_type : ItemType,
|
||||
description: Description,
|
||||
}
|
||||
|
||||
impl ComponentTrait for Item {
|
||||
fn new() -> Self {
|
||||
Item::default()
|
||||
}
|
||||
|
||||
fn handle(&self) -> Handle {
|
||||
COMPONENT_MENU_ITEM
|
||||
}
|
||||
|
||||
fn weight(&self) -> Weight {
|
||||
self.weight
|
||||
}
|
||||
|
||||
fn is_renderable(&self, cx: &Context) -> bool {
|
||||
(self.renderable.check)(cx)
|
||||
}
|
||||
|
||||
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
|
||||
let description = self.description.get().into_string(cx);
|
||||
match self.item_type() {
|
||||
ItemType::Void => PrepareMarkup::None,
|
||||
ItemType::Label(label) => PrepareMarkup::With(html! {
|
||||
li class="menu-label" {
|
||||
span title=[description] {
|
||||
(label.prepare(cx))
|
||||
}
|
||||
}
|
||||
}),
|
||||
ItemType::Link(label, path) => PrepareMarkup::With(html! {
|
||||
li class="menu-link" {
|
||||
a href=(path(cx)) title=[description] {
|
||||
(label.prepare(cx))
|
||||
}
|
||||
}
|
||||
}),
|
||||
ItemType::LinkBlank(label, path) => PrepareMarkup::With(html! {
|
||||
li class="menu-link" {
|
||||
a href=(path(cx)) title=[description] target="_blank" {
|
||||
(label.prepare(cx))
|
||||
}
|
||||
}
|
||||
}),
|
||||
ItemType::Html(content) => PrepareMarkup::With(html! {
|
||||
li class="html" {
|
||||
(content.prepare(cx))
|
||||
}
|
||||
}),
|
||||
ItemType::Submenu(label, submenu) => PrepareMarkup::With(html! {
|
||||
li class="menu-children" {
|
||||
a href="#" title=[description] {
|
||||
(label.prepare(cx)) i class="menu-icon bi-chevron-down" {}
|
||||
}
|
||||
div class="menu-subs" {
|
||||
(submenu.prepare(cx))
|
||||
}
|
||||
}
|
||||
}),
|
||||
ItemType::Megamenu(label, megamenu) => PrepareMarkup::With(html! {
|
||||
li class="menu-children" {
|
||||
a href="#" title=[description] {
|
||||
(label.prepare(cx)) i class="menu-icon bi-chevron-down" {}
|
||||
}
|
||||
div class="menu-subs menu-mega" {
|
||||
(megamenu.prepare(cx))
|
||||
}
|
||||
}
|
||||
}),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl Item {
|
||||
pub fn label(label: L10n) -> Self {
|
||||
Item {
|
||||
item_type: ItemType::Label(Label::with(label)),
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn link(label: L10n, path: FnContextualPath) -> Self {
|
||||
Item {
|
||||
item_type: ItemType::Link(Label::with(label), path),
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn link_blank(label: L10n, path: FnContextualPath) -> Self {
|
||||
Item {
|
||||
item_type: ItemType::LinkBlank(Label::with(label), path),
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn html(content: Html) -> Self {
|
||||
Item {
|
||||
item_type: ItemType::Html(Content::with(content)),
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn submenu(label: L10n, submenu: Submenu) -> Self {
|
||||
Item {
|
||||
item_type: ItemType::Submenu(Label::with(label), SubmenuItems::with(submenu)),
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn megamenu(label: L10n, megamenu: Megamenu) -> Self {
|
||||
Item {
|
||||
item_type: ItemType::Megamenu(Label::with(label), MegamenuGroups::with(megamenu)),
|
||||
..Default::default()
|
||||
}
|
||||
}
|
||||
|
||||
// Item BUILDER.
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
|
||||
self.weight = value;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_renderable(&mut self, check: FnIsRenderable) -> &mut Self {
|
||||
self.renderable.check = check;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_description(&mut self, text: L10n) -> &mut Self {
|
||||
self.description.set(text);
|
||||
self
|
||||
}
|
||||
|
||||
// Item GETTERS.
|
||||
|
||||
pub fn item_type(&self) -> &ItemType {
|
||||
&self.item_type
|
||||
}
|
||||
|
||||
pub fn description(&self) -> &Description {
|
||||
&self.description
|
||||
}
|
||||
}
|
||||
85
pagetop/src/base/component/menu/megamenu.rs
Normal file
85
pagetop/src/base/component/menu/megamenu.rs
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
use crate::prelude::*;
|
||||
|
||||
use super::Group;
|
||||
|
||||
new_handle!(COMPONENT_MENU_MEGAMENU);
|
||||
|
||||
type Groups = TypedComponents<Group>;
|
||||
|
||||
#[rustfmt::skip]
|
||||
#[derive(Default)]
|
||||
pub struct Megamenu {
|
||||
weight : Weight,
|
||||
renderable: Renderable,
|
||||
id : OptionId,
|
||||
groups : Groups,
|
||||
}
|
||||
|
||||
impl ComponentTrait for Megamenu {
|
||||
fn new() -> Self {
|
||||
Megamenu::default()
|
||||
}
|
||||
|
||||
fn handle(&self) -> Handle {
|
||||
COMPONENT_MENU_MEGAMENU
|
||||
}
|
||||
|
||||
fn id(&self) -> Option<String> {
|
||||
self.id.get()
|
||||
}
|
||||
|
||||
fn weight(&self) -> Weight {
|
||||
self.weight
|
||||
}
|
||||
|
||||
fn is_renderable(&self, cx: &Context) -> bool {
|
||||
(self.renderable.check)(cx)
|
||||
}
|
||||
|
||||
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
|
||||
PrepareMarkup::With(html! {
|
||||
div id=[self.id()] class="menu-groups" {
|
||||
(self.groups().prepare(cx))
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
impl Megamenu {
|
||||
// Megamenu BUILDER.
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
|
||||
self.weight = value;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_renderable(&mut self, check: FnIsRenderable) -> &mut Self {
|
||||
self.renderable.check = check;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
|
||||
self.id.alter_value(id);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_group(mut self, group: Group) -> Self {
|
||||
self.groups.alter(TypedOp::Add(TypedComponent::with(group)));
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_groups(&mut self, op: TypedOp<Group>) -> &mut Self {
|
||||
self.groups.alter(op);
|
||||
self
|
||||
}
|
||||
|
||||
// Megamenu GETTERS.
|
||||
|
||||
pub fn groups(&self) -> &Groups {
|
||||
&self.groups
|
||||
}
|
||||
}
|
||||
122
pagetop/src/base/component/menu/menu_main.rs
Normal file
122
pagetop/src/base/component/menu/menu_main.rs
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
use crate::prelude::*;
|
||||
use crate::LOCALES_PAGETOP;
|
||||
|
||||
use super::Item;
|
||||
|
||||
new_handle!(COMPONENT_MENU);
|
||||
|
||||
actions_for_component!(Menu);
|
||||
|
||||
#[rustfmt::skip]
|
||||
#[derive(Default)]
|
||||
pub struct Menu {
|
||||
weight : Weight,
|
||||
renderable: Renderable,
|
||||
id : OptionId,
|
||||
items : TypedComponents<Item>,
|
||||
}
|
||||
|
||||
impl ComponentTrait for Menu {
|
||||
fn new() -> Self {
|
||||
Menu::default()
|
||||
}
|
||||
|
||||
fn handle(&self) -> Handle {
|
||||
COMPONENT_MENU
|
||||
}
|
||||
|
||||
fn id(&self) -> Option<String> {
|
||||
self.id.get()
|
||||
}
|
||||
|
||||
fn weight(&self) -> Weight {
|
||||
self.weight
|
||||
}
|
||||
|
||||
fn is_renderable(&self, cx: &Context) -> bool {
|
||||
(self.renderable.check)(cx)
|
||||
}
|
||||
|
||||
fn before_prepare_component(&mut self, cx: &mut Context) {
|
||||
run_actions_before_prepare_menu(self, cx);
|
||||
}
|
||||
|
||||
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
|
||||
cx.set_param::<bool>(PARAM_INCLUDE_MENU, true);
|
||||
cx.set_param::<bool>(PARAM_INCLUDE_ICONS, true);
|
||||
|
||||
PrepareMarkup::With(html! {
|
||||
div id=[self.id()] class="menu-container" {
|
||||
div class="menu-wrapper" {
|
||||
div class="menu-main" {
|
||||
div class="menu-overlay" {}
|
||||
nav class="menu" {
|
||||
div class="menu-header" {
|
||||
button type="button" class="menu-arrow" {
|
||||
i class="bi-chevron-left" {}
|
||||
}
|
||||
div class="menu-title" {}
|
||||
button type="button" class="menu-close" {
|
||||
i class="bi-x" {}
|
||||
}
|
||||
}
|
||||
ul class="menu-section" {
|
||||
(self.items().prepare(cx))
|
||||
}
|
||||
}
|
||||
}
|
||||
button
|
||||
type="button"
|
||||
class="menu-trigger"
|
||||
title=[L10n::t("menu_toggle", &LOCALES_PAGETOP).into_string(cx)]
|
||||
{
|
||||
span {} span {} span {}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
fn after_prepare_component(&mut self, cx: &mut Context) {
|
||||
run_actions_after_prepare_menu(self, cx);
|
||||
}
|
||||
}
|
||||
|
||||
impl Menu {
|
||||
// Menu BUILDER.
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
|
||||
self.weight = value;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_renderable(&mut self, check: FnIsRenderable) -> &mut Self {
|
||||
self.renderable.check = check;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
|
||||
self.id.alter_value(id);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_item(mut self, item: Item) -> Self {
|
||||
self.items.alter(TypedOp::Add(TypedComponent::with(item)));
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_items(&mut self, op: TypedOp<Item>) -> &mut Self {
|
||||
self.items.alter(op);
|
||||
self
|
||||
}
|
||||
|
||||
// Menu GETTERS.
|
||||
|
||||
pub fn items(&self) -> &TypedComponents<Item> {
|
||||
&self.items
|
||||
}
|
||||
}
|
||||
102
pagetop/src/base/component/menu/submenu.rs
Normal file
102
pagetop/src/base/component/menu/submenu.rs
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
use crate::prelude::*;
|
||||
|
||||
use super::Item;
|
||||
|
||||
new_handle!(COMPONENT_MENU_SUBMENU);
|
||||
|
||||
type TitleSubmenu = TypedComponent<L10n>;
|
||||
type Items = TypedComponents<Item>;
|
||||
|
||||
#[rustfmt::skip]
|
||||
#[derive(Default)]
|
||||
pub struct Submenu {
|
||||
weight : Weight,
|
||||
renderable: Renderable,
|
||||
id : OptionId,
|
||||
title : TitleSubmenu,
|
||||
items : Items,
|
||||
}
|
||||
|
||||
impl ComponentTrait for Submenu {
|
||||
fn new() -> Self {
|
||||
Submenu::default()
|
||||
}
|
||||
|
||||
fn handle(&self) -> Handle {
|
||||
COMPONENT_MENU_SUBMENU
|
||||
}
|
||||
|
||||
fn id(&self) -> Option<String> {
|
||||
self.id.get()
|
||||
}
|
||||
|
||||
fn weight(&self) -> Weight {
|
||||
self.weight
|
||||
}
|
||||
|
||||
fn is_renderable(&self, cx: &Context) -> bool {
|
||||
(self.renderable.check)(cx)
|
||||
}
|
||||
|
||||
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
|
||||
PrepareMarkup::With(html! {
|
||||
div id=[self.id()] class="menu-items" {
|
||||
@if let Some(title) = self.title().get().into_string(cx) {
|
||||
h4 class="menu-title" { (title) }
|
||||
}
|
||||
ul {
|
||||
(self.items().prepare(cx))
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
impl Submenu {
|
||||
// Submenu BUILDER.
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_weight(&mut self, value: Weight) -> &mut Self {
|
||||
self.weight = value;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_renderable(&mut self, check: FnIsRenderable) -> &mut Self {
|
||||
self.renderable.check = check;
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_id(&mut self, id: impl Into<String>) -> &mut Self {
|
||||
self.id.alter_value(id);
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_title(&mut self, title: L10n) -> &mut Self {
|
||||
self.title.set(title);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_item(mut self, item: Item) -> Self {
|
||||
self.items.alter(TypedOp::Add(TypedComponent::with(item)));
|
||||
self
|
||||
}
|
||||
|
||||
#[fn_builder]
|
||||
pub fn alter_items(&mut self, op: TypedOp<Item>) -> &mut Self {
|
||||
self.items.alter(op);
|
||||
self
|
||||
}
|
||||
|
||||
// Submenu GETTERS.
|
||||
|
||||
pub fn title(&self) -> &TitleSubmenu {
|
||||
&self.title
|
||||
}
|
||||
|
||||
pub fn items(&self) -> &Items {
|
||||
&self.items
|
||||
}
|
||||
}
|
||||
|
|
@ -4,3 +4,6 @@ site_home = Home
|
|||
# PoweredBy component.
|
||||
poweredby_pagetop = Powered by {$pagetop_link}
|
||||
pagetop_logo = PageTop logo
|
||||
|
||||
# Menu component.
|
||||
menu_toggle = Toggle menu visibility
|
||||
|
|
|
|||
|
|
@ -4,3 +4,6 @@ site_home = Inicio
|
|||
# PoweredBy component.
|
||||
poweredby_pagetop = Funciona con {$pagetop_link}
|
||||
pagetop_logo = Logotipo de PageTop
|
||||
|
||||
# Menu component.
|
||||
menu_toggle = Alternar visibilidad del menú
|
||||
|
|
|
|||
369
pagetop/static/theme/css/menu.css
Normal file
369
pagetop/static/theme/css/menu.css
Normal file
|
|
@ -0,0 +1,369 @@
|
|||
.menu-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: var(--menu--color-background);
|
||||
}
|
||||
|
||||
.menu-wrapper {
|
||||
margin-right: var(--menu--item-gap);
|
||||
}
|
||||
.menu-wrapper a,
|
||||
.menu-wrapper button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu-main .menu ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.menu-main .menu li {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 1.5rem;
|
||||
padding: var(--menu--line-padding) 0;
|
||||
line-height: var(--menu--line-height);
|
||||
list-style: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.menu-main .menu li.menu-label,
|
||||
.menu-main .menu li > a {
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
color: var(--menu--color-base);
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.menu-main .menu li > a {
|
||||
border: none;
|
||||
outline: none;
|
||||
-webkit-transition: color 0.3s ease-in-out;
|
||||
-o-transition: color 0.3s ease-in-out;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
.menu-main .menu li:hover > a {
|
||||
color: var(--menu--color-highlight);
|
||||
}
|
||||
.menu-main .menu li > a > i.menu-icon {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-subs {
|
||||
position: absolute;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: var(--menu--color-background);
|
||||
border-radius: var(--border-radius);
|
||||
border-top: 3px solid var(--menu--color-highlight);
|
||||
z-index: 500;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
-webkit-box-shadow: 0 4px 6px -1px var(--menu--color-border), 0 2px 4px -1px var(--menu--color-shadow);
|
||||
box-shadow: 0 4px 6px -1px var(--menu--color-border), 0 2px 4px -1px var(--menu--color-shadow);
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.menu-main .menu li.menu-children:hover > .menu-subs {
|
||||
margin-top: 0.4rem;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-items {
|
||||
min-width: var(--menu--item-width-min);
|
||||
max-width: var(--menu--item-width-max);
|
||||
}
|
||||
.menu-main .menu li .menu-items .menu-title {
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
padding: var(--menu--line-padding) 0;
|
||||
line-height: var(--menu--line-height);
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--menu--color-highlight);
|
||||
text-transform: uppercase;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.menu-main .menu li .menu-items li {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-mega {
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
-ms-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-groups {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.menu-header,
|
||||
.menu-trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Applies <= 992px */
|
||||
@media only screen and (max-width: 62em) {
|
||||
.menu-wrapper {
|
||||
margin-left: var(--menu--item-gap);
|
||||
}
|
||||
.menu-trigger {
|
||||
cursor: pointer;
|
||||
width: var(--menu--trigger-width);
|
||||
height: var(--menu--item-height);
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.menu-trigger span {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
margin: 12.675% 0;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--menu--color-base);
|
||||
}
|
||||
|
||||
.menu-main .menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--menu--side-width);
|
||||
height: 100%;
|
||||
z-index: 1099;
|
||||
overflow: hidden;
|
||||
background: var(--menu--color-background);
|
||||
-webkit-transform: translate(-100%);
|
||||
-ms-transform: translate(-100%);
|
||||
transform: translate(-100%);
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.menu-main .menu.active {
|
||||
-webkit-transform: translate(0%);
|
||||
-ms-transform: translate(0%);
|
||||
transform: translate(0%);
|
||||
}
|
||||
|
||||
.menu-main .menu li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.menu-main .menu li.menu-label,
|
||||
.menu-main .menu li > a {
|
||||
display: block;
|
||||
padding: var(--menu--line-padding) var(--menu--item-height) var(--menu--line-padding) var(--menu--item-gap);
|
||||
border-bottom: 1px solid var(--menu--color-border);
|
||||
}
|
||||
.menu-main .menu li ul li.menu-label,
|
||||
.menu-main .menu li ul li > a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.menu-main .menu li > a > i.menu-icon {
|
||||
position: absolute;
|
||||
top: var(--menu--line-padding);
|
||||
right: var(--menu--line-padding);
|
||||
font-size: 1.25rem;
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-subs {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: none;
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 4rem 0 0;
|
||||
border-top: 0;
|
||||
opacity: 1;
|
||||
overflow-y: auto;
|
||||
visibility: visible;
|
||||
-webkit-transform: translateX(0%);
|
||||
-ms-transform: translateX(0%);
|
||||
transform: translateX(0%);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.menu-main .menu li .menu-subs.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-main .menu li.menu-children:hover > .menu-subs {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-items .menu-title {
|
||||
padding: var(--menu--line-padding) var(--menu--item-height) var(--menu--line-padding) var(--menu--item-gap);
|
||||
}
|
||||
|
||||
.menu-main .menu li .menu-groups {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-main .menu .menu-header {
|
||||
position: relative;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
top: 0;
|
||||
height: var(--menu--item-height);
|
||||
z-index: 501;
|
||||
border-bottom: 1px solid var(--menu--color-border);
|
||||
}
|
||||
.menu-main .menu .menu-header .menu-title {
|
||||
padding: var(--menu--line-padding);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.menu-main .menu .menu-header .menu-close,
|
||||
.menu-main .menu .menu-header .menu-arrow {
|
||||
width: var(--menu--item-height);
|
||||
min-width: var(--menu--item-height);
|
||||
height: var(--menu--item-height);
|
||||
line-height: var(--menu--item-height);
|
||||
color: var(--menu--color-base);
|
||||
cursor: pointer;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.menu-main .menu .menu-header .menu-close {
|
||||
font-size: 2.25rem;
|
||||
border-left: 1px solid var(--menu--color-border);
|
||||
}
|
||||
.menu-main .menu .menu-header .menu-arrow {
|
||||
font-size: 1.25rem;
|
||||
border-right: 1px solid var(--menu--color-border);
|
||||
display: none;
|
||||
}
|
||||
.menu-main .menu .menu-header.active .menu-arrow {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu-main .menu .menu-section {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1098;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.menu-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* ANIMATIONS */
|
||||
|
||||
@-webkit-keyframes slideLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0%);
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideLeft {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0%);
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes slideRight {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0%);
|
||||
transform: translateX(0%);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideRight {
|
||||
0% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(0%);
|
||||
transform: translateX(0%);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -117,6 +117,20 @@
|
|||
--color--green: #3fa21c;
|
||||
--header-height-wide-when-fixed: calc(6 * var(--sp));
|
||||
--mobile-nav-width: 31.25rem;
|
||||
--border-radius: 0.1875rem;
|
||||
*/
|
||||
--border-radius: 0.1875rem;
|
||||
|
||||
--menu--color-background: #fafafa;
|
||||
--menu--color-base: #121212;
|
||||
--menu--color-highlight: #e91e63;
|
||||
--menu--color-border: rgba(0, 0, 0, 0.1);
|
||||
--menu--color-shadow: rgba(0, 0, 0, 0.06);
|
||||
--menu--line-padding: 0.625rem;
|
||||
--menu--line-height: 1.875rem;
|
||||
--menu--item-height: calc(var(--menu--line-padding) + var(--menu--line-height));
|
||||
--menu--item-width-min: 14rem;
|
||||
--menu--item-width-max: 20rem;
|
||||
--menu--item-gap: 1rem;
|
||||
--menu--trigger-width: var(--menu--item-height);
|
||||
--menu--side-width: 20rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,11 @@
|
|||
/* LAYOUT */
|
||||
|
||||
.region {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* COMPONENTS */
|
||||
|
||||
/* Image component */
|
||||
|
||||
.img-fluid {
|
||||
|
|
@ -26,8 +34,8 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
/* LG - Applies <= 1024px */
|
||||
@media (max-width: 64em) {
|
||||
/* LG - Applies <= 992px */
|
||||
@media (max-width: 62em) {
|
||||
.site-branding-slogan {
|
||||
font-size: var(--font-size-l);
|
||||
}
|
||||
|
|
|
|||
78
pagetop/static/theme/js/menu.js
Normal file
78
pagetop/static/theme/js/menu.js
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
function menuShowChildren(nav, children) {
|
||||
let submenu = children[0].querySelector('.menu-subs');
|
||||
submenu.classList.add('active');
|
||||
submenu.style.animation = 'slideLeft 0.5s ease forwards';
|
||||
|
||||
let title = children[0].querySelector('i').parentNode.childNodes[0].textContent;
|
||||
nav.querySelector('.menu-title').innerHTML = title;
|
||||
nav.querySelector('.menu-header').classList.add('active');
|
||||
}
|
||||
|
||||
function menuHideChildren(nav, children) {
|
||||
let submenu = children[0].querySelector('.menu-subs');
|
||||
submenu.style.animation = 'slideRight 0.5s ease forwards';
|
||||
setTimeout(() => {
|
||||
submenu.classList.remove('active');
|
||||
}, 300);
|
||||
|
||||
children.shift();
|
||||
if (children.length > 0) {
|
||||
let title = children[0].querySelector('i').parentNode.childNodes[0].textContent;
|
||||
nav.querySelector('.menu-title').innerHTML = title;
|
||||
} else {
|
||||
nav.querySelector('.menu-header').classList.remove('active');
|
||||
nav.querySelector('.menu-title').innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
function menuToggle(nav, overlay) {
|
||||
nav.classList.toggle('active');
|
||||
overlay.classList.toggle('active');
|
||||
}
|
||||
|
||||
document.querySelectorAll('.menu-container').forEach(menu => {
|
||||
|
||||
let menuChildren = [];
|
||||
const menuNav = menu.querySelector('.menu');
|
||||
const menuOverlay = menu.querySelector('.menu-overlay');
|
||||
|
||||
menu.querySelector('.menu-section').addEventListener('click', (e) => {
|
||||
if (!menuNav.classList.contains('active')) {
|
||||
return;
|
||||
}
|
||||
let target = e.target.closest('.menu-children');
|
||||
if (target && target != menuChildren[0]) {
|
||||
menuChildren.unshift(target);
|
||||
menuShowChildren(menuNav, menuChildren);
|
||||
}
|
||||
});
|
||||
menu.querySelector('.menu-arrow').addEventListener('click', () => {
|
||||
menuHideChildren(menuNav, menuChildren);
|
||||
});
|
||||
menu.querySelector('.menu-close').addEventListener('click', () => {
|
||||
menuToggle(menuNav, menuOverlay);
|
||||
setTimeout(() => {
|
||||
menuNav.querySelector('.menu-header').classList.remove('active');
|
||||
menuNav.querySelector('.menu-title').innerHTML = '';
|
||||
menu.querySelectorAll('.menu-subs').forEach(close => {
|
||||
close.classList.remove('active');
|
||||
});
|
||||
menuChildren = [];
|
||||
}, 300);
|
||||
});
|
||||
menu.querySelector('.menu-trigger').addEventListener('click', () => {
|
||||
menuToggle(menuNav, menuOverlay);
|
||||
});
|
||||
|
||||
menuOverlay.addEventListener('click', () => {
|
||||
menuToggle(menuNav, menuOverlay);
|
||||
});
|
||||
|
||||
window.onresize = function () {
|
||||
if (this.innerWidth >= 992) {
|
||||
if (menuNav.classList.contains('active')) {
|
||||
menuToggle(menuNav, menuOverlay);
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue