From 9b093bd20610d4e9fa3e89b45ee7d686ce116e50 Mon Sep 17 00:00:00 2001 From: Sajeeb Ahamed Date: Fri, 20 Aug 2021 22:24:32 +0600 Subject: [PATCH] :bug: fix mega menu position issue, :art: update the module chrome --- .../html/layouts/chromes/sp_xhtml.php | 38 + .../shaper_helixultimate/scss/animation.scss | 0 .../shaper_helixultimate/scss/bs4-rtl.scss | 0 templates/shaper_helixultimate/scss/edit.scss | 0 .../shaper_helixultimate/scss/legacy.scss | 0 .../shaper_helixultimate/scss/master.scss | 0 templates/shaper_helixultimate/scss/menu.scss | 0 .../shaper_helixultimate/scss/offcanvas.scss | 565 +-- .../shaper_helixultimate/scss/preloaders.scss | 0 .../shaper_helixultimate/scss/presets.scss | 0 .../shaper_helixultimate/scss/responsive.scss | 0 templates/shaper_helixultimate/scss/rtl.scss | 0 .../shaper_helixultimate/scss/theme.scss | 4204 +++++++++-------- 13 files changed, 2432 insertions(+), 2375 deletions(-) create mode 100644 templates/shaper_helixultimate/html/layouts/chromes/sp_xhtml.php mode change 100644 => 100755 templates/shaper_helixultimate/scss/animation.scss mode change 100644 => 100755 templates/shaper_helixultimate/scss/bs4-rtl.scss mode change 100644 => 100755 templates/shaper_helixultimate/scss/edit.scss mode change 100644 => 100755 templates/shaper_helixultimate/scss/legacy.scss mode change 100644 => 100755 templates/shaper_helixultimate/scss/master.scss mode change 100644 => 100755 templates/shaper_helixultimate/scss/menu.scss mode change 100644 => 100755 templates/shaper_helixultimate/scss/offcanvas.scss mode change 100644 => 100755 templates/shaper_helixultimate/scss/preloaders.scss mode change 100644 => 100755 templates/shaper_helixultimate/scss/presets.scss mode change 100644 => 100755 templates/shaper_helixultimate/scss/responsive.scss mode change 100644 => 100755 templates/shaper_helixultimate/scss/rtl.scss mode change 100644 => 100755 templates/shaper_helixultimate/scss/theme.scss diff --git a/templates/shaper_helixultimate/html/layouts/chromes/sp_xhtml.php b/templates/shaper_helixultimate/html/layouts/chromes/sp_xhtml.php new file mode 100644 index 00000000..385819cb --- /dev/null +++ b/templates/shaper_helixultimate/html/layouts/chromes/sp_xhtml.php @@ -0,0 +1,38 @@ + + * @license GNU General Public License version 2 or later; see LICENSE.txt + */ + +defined('_JEXEC') or die; + +$module = $displayData['module']; +$params = $displayData['params']; +$attribs = $displayData['attribs']; + +if ($module->content === null || $module->content === '') +{ + return; +} + +$moduleTag = htmlspecialchars($params->get('module_tag', 'div'), ENT_QUOTES, 'UTF-8'); +$bootstrapSize = (int) $params->get('bootstrap_size', 0); +$moduleClass = $bootstrapSize !== 0 ? ' span' . $bootstrapSize : ''; +$headerTag = htmlspecialchars($params->get('header_tag', 'h3'), ENT_QUOTES, 'UTF-8'); +$headerClass = htmlspecialchars($params->get('header_class', 'sp-module-title'), ENT_COMPAT, 'UTF-8'); + +if ($module->content) { + echo '<' . $moduleTag . ' class="sp-module ' . htmlspecialchars($params->get('moduleclass_sfx'), ENT_COMPAT, 'UTF-8') . $moduleClass . '">'; + + if ($module->showtitle) { + echo '<' . $headerTag . ' class="' . $headerClass . '">' . $module->title . ''; + } + + echo '
'; + echo $module->content; + echo '
'; + echo ''; +} diff --git a/templates/shaper_helixultimate/scss/animation.scss b/templates/shaper_helixultimate/scss/animation.scss old mode 100644 new mode 100755 diff --git a/templates/shaper_helixultimate/scss/bs4-rtl.scss b/templates/shaper_helixultimate/scss/bs4-rtl.scss old mode 100644 new mode 100755 diff --git a/templates/shaper_helixultimate/scss/edit.scss b/templates/shaper_helixultimate/scss/edit.scss old mode 100644 new mode 100755 diff --git a/templates/shaper_helixultimate/scss/legacy.scss b/templates/shaper_helixultimate/scss/legacy.scss old mode 100644 new mode 100755 diff --git a/templates/shaper_helixultimate/scss/master.scss b/templates/shaper_helixultimate/scss/master.scss old mode 100644 new mode 100755 diff --git a/templates/shaper_helixultimate/scss/menu.scss b/templates/shaper_helixultimate/scss/menu.scss old mode 100644 new mode 100755 diff --git a/templates/shaper_helixultimate/scss/offcanvas.scss b/templates/shaper_helixultimate/scss/offcanvas.scss old mode 100644 new mode 100755 index 998061b0..28622235 --- a/templates/shaper_helixultimate/scss/offcanvas.scss +++ b/templates/shaper_helixultimate/scss/offcanvas.scss @@ -1,315 +1,326 @@ #offcanvas-toggler { - display: inline-flex; - align-items: center; - height: $header_height; - line-height: $header_height; - font-size: 20px; - > span { - &:hover { - color: #fff; - } - } + display: inline-flex; + align-items: center; + height: $header_height; + line-height: $header_height; + font-size: 20px; + > span { + &:hover { + color: #fff; + } + } } .offcanvas-init { - overflow-x: hidden; - position: relative; + overflow-x: hidden; + position: relative; } .offcanvas-active { - .offcanvas-overlay { - visibility: visible; - opacity: 1; - } + .offcanvas-overlay { + visibility: visible; + opacity: 1; + } } .offcanvas-overlay { - background: rgba(0, 0, 0, 0.5); - bottom: 0; - left: 0; - opacity: 0; - position: absolute; - right: 0; - top: 0; - z-index: 9999; - visibility: hidden; - -webkit-transition: 0.4s; - transition: 0.4s; - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); + background: rgba(0, 0, 0, 0.5); + bottom: 0; + left: 0; + opacity: 0; + position: absolute; + right: 0; + top: 0; + z-index: 9999; + visibility: hidden; + -webkit-transition: 0.4s; + transition: 0.4s; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); } .body-wrapper { - position: relative; - -webkit-transition: 0.4s; - transition: 0.4s; - backface-visibility: hidden; + position: relative; + -webkit-transition: 0.4s; + transition: 0.4s; + backface-visibility: hidden; } .close-offcanvas { - position: absolute; - top: 15px; - z-index: 1; + position: absolute; + top: 15px; + z-index: 1; } .offcanvas-menu { - width: $offcanvas_width; - height: 100%; - position: fixed; - top: 60px; - overflow: inherit; - -webkit-transition: all 0.4s; - transition: all 0.4s; - z-index: 10000; - #offcanvas-toggler{ - display: none !important; - } - .offcanvas-inner { - padding: 25px; - .sp-sign-in{ - .signin-text{ - display: none !important; - } - } - .sp-profile-wrapper{ - .user-text{ - display: none !important; - } - } - .sp-contact-info, - .social-icons{ - font-size: 14px; - >li>a{ - opacity: .7; - &:hover, &:focus{ - opacity: 1; - } - } - } - .sp-contact-info{ - >li:not(:last-child){ - margin-bottom: 10px; - } - } - .sp-module { - padding: 0; - margin: 0; - &:not(:last-child) { - margin-right: 20px; - } + width: $offcanvas_width; + height: 100%; + position: fixed; + top: 60px; + overflow: inherit; + -webkit-transition: all 0.4s; + transition: all 0.4s; + z-index: 10000; - .sp-module-title { - font-size: 1rem; - font-weight: bold; - } + #offcanvas-toggler { + display: none !important; + } + .offcanvas-inner { + padding: 25px; + .header-modules { + margin-left: 0px; + } + .finder { + margin-bottom: 10px; + } + .sp-sign-in { + position: relative; + top: 44px; + .signin-text { + display: none !important; + } + } + .sp-profile-wrapper { + .user-text { + display: none !important; + } + } + .sp-contact-info, + .social-icons { + font-size: 14px; + > li > a { + opacity: 0.7; + &:hover, + &:focus { + opacity: 1; + } + } + } + .sp-contact-info { + > li:not(:last-child) { + margin-bottom: 10px; + } + } + .sp-module { + padding: 0; + margin: 0; + &:not(:last-child) { + margin-right: 20px; + } - &:not(:last-child) { - margin-bottom: 20px; - } - } - ul.menu { - &,ul{ - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - padding: 0; - margin: 0; - margin: 0 0 15px 0; - list-style: none; - } - > li { - border: 0; - padding: 0; - margin: 0; - position: relative; - overflow: hidden; - display: block; - font-weight: 600; - >a, - >span { - display: block; - font-size: 18px; - padding: 0.125rem 0; - position: relative; - opacity: .7; - transition: .3s; - &:hover{ - opacity: 1; - } - } + .sp-module-title { + font-size: 1rem; + font-weight: bold; + } - &.menu-parent { - > a, - > .menu-separator { - > .menu-toggler { - display: block; - position: absolute; - top: 50%; - cursor: pointer; - transform: translateY(-50%); - -webkit-transform: translateY(-50%); - &:after { - font-family: 'Font Awesome 5 Free'; - content: '\f105'; - font-weight: 900; - } - } - } + &:not(:last-child) { + margin-bottom: 20px; + } + } + ul.menu { + &, + ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding: 0; + margin: 0; + margin: 0 0 15px 0; + list-style: none; + } + > li { + border: 0; + padding: 0; + margin: 0; + position: relative; + overflow: hidden; + display: block; + font-weight: 600; + > a, + > span { + display: block; + font-size: 18px; + padding: 0.125rem 0; + position: relative; + opacity: 0.7; + transition: 0.3s; + &:hover { + opacity: 1; + } + } - &.menu-parent-open { - > a, - > .menu-separator { - > .menu-toggler { - &:after { - font-family: 'Font Awesome 5 Free'; - content: '\f107'; - font-weight: 900; - } - } - } - > .nav-header { - > .menu-toggler { - &:after { - font-family: 'Font Awesome 5 Free'; - content: '\f107'; - font-weight: 900; - } - } - } - } - > .nav-header { - > .menu-toggler { - display: block; - position: absolute; - top: 50%; - cursor: pointer; - transform: translateY(-50%); - -webkit-transform: translateY(-50%); - &:after { - font-family: 'Font Awesome 5 Free'; - content: '\f105'; - font-weight: 900; - } - } - } - } + &.menu-parent { + > a, + > .menu-separator { + > .menu-toggler { + display: block; + position: absolute; + top: 50%; + cursor: pointer; + transform: translateY(-50%); + -webkit-transform: translateY(-50%); + &:after { + font-family: "Font Awesome 5 Free"; + content: "\f105"; + font-weight: 900; + } + } + } - ul { - display: none; - li { - a { - font-size: 0.875rem; - } - } - } - } - } - } - // border-menu - &.border-menu{ - .offcanvas-inner ul.menu{ - >li{ - border-bottom: 1px solid rgba(32, 31, 31, 0.1); - margin-bottom: 0; - >a{ - padding: 15px 10px; - } - } - ul{ - padding-bottom: 15px; - } - } - } - // center alignment - &.center-alignment{ - .offcanvas-inner { - padding: 0px 15px; - } - } + &.menu-parent-open { + > a, + > .menu-separator { + > .menu-toggler { + &:after { + font-family: "Font Awesome 5 Free"; + content: "\f107"; + font-weight: 900; + } + } + } + > .nav-header { + > .menu-toggler { + &:after { + font-family: "Font Awesome 5 Free"; + content: "\f107"; + font-weight: 900; + } + } + } + } + > .nav-header { + > .menu-toggler { + display: block; + position: absolute; + top: 50%; + cursor: pointer; + transform: translateY(-50%); + -webkit-transform: translateY(-50%); + &:after { + font-family: "Font Awesome 5 Free"; + content: "\f105"; + font-weight: 900; + } + } + } + } + + ul { + display: none; + li { + a { + font-size: 0.875rem; + } + } + } + } + } + } + // border-menu + &.border-menu { + .offcanvas-inner ul.menu { + > li { + border-bottom: 1px solid rgba(32, 31, 31, 0.1); + margin-bottom: 0; + > a { + padding: 15px 10px; + } + } + ul { + padding-bottom: 15px; + } + } + } + // center alignment + &.center-alignment { + .offcanvas-inner { + padding: 0px 15px; + } + } } body { - &.ltr { - #offcanvas-toggler { - &.offcanvas-toggler-right { - float: right; - margin-left: 20px; - } + &.ltr { + #offcanvas-toggler { + &.offcanvas-toggler-right { + float: right; + margin-left: 20px; + } - &.offcanvas-toggler-left { - float: left; - margin-right: 20px; - } - } + &.offcanvas-toggler-left { + float: left; + margin-right: 20px; + } + } - &.offcanvs-position-left { - .body-wrapper { - left: 0; - } + &.offcanvs-position-left { + .body-wrapper { + left: 0; + } - .offcanvas-menu { - left: -$offcanvas_width; - top: 0; - } + .offcanvas-menu { + left: -$offcanvas_width; + top: 0; + } - &.offcanvas-active { - .offcanvas-menu { - left: 0; - top: 0; - } - } - } + &.offcanvas-active { + .offcanvas-menu { + left: 0; + top: 0; + } + } + } - &.offcanvs-position-right { - .body-wrapper { - right: 0; - } + &.offcanvs-position-right { + .body-wrapper { + right: 0; + } - .offcanvas-menu { - right: -$offcanvas_width; - top: 0; - } + .offcanvas-menu { + right: -$offcanvas_width; + top: 0; + } - &.offcanvas-active { - .offcanvas-menu { - right: 0; - top: 0; - } - } - } + &.offcanvas-active { + .offcanvas-menu { + right: 0; + top: 0; + } + } + } - .close-offcanvas { - right: 15px; - } + .close-offcanvas { + right: 15px; + } - .offcanvas-menu { - .offcanvas-inner { - ul.menu { - > li { - &.menu-parent { - > a, - > .menu-separator { - > .menu-toggler { - right: 0; - } - } - > .nav-header { - > .menu-toggler { - right: 0; - } - } - } + .offcanvas-menu { + .offcanvas-inner { + ul.menu { + > li { + &.menu-parent { + > a, + > .menu-separator { + > .menu-toggler { + right: 0; + } + } + > .nav-header { + > .menu-toggler { + right: 0; + } + } + } - ul { - margin-left: 10px; - } - } - } - } - } - } + ul { + margin-left: 10px; + } + } + } + } + } + } } diff --git a/templates/shaper_helixultimate/scss/preloaders.scss b/templates/shaper_helixultimate/scss/preloaders.scss old mode 100644 new mode 100755 diff --git a/templates/shaper_helixultimate/scss/presets.scss b/templates/shaper_helixultimate/scss/presets.scss old mode 100644 new mode 100755 diff --git a/templates/shaper_helixultimate/scss/responsive.scss b/templates/shaper_helixultimate/scss/responsive.scss old mode 100644 new mode 100755 diff --git a/templates/shaper_helixultimate/scss/rtl.scss b/templates/shaper_helixultimate/scss/rtl.scss old mode 100644 new mode 100755 diff --git a/templates/shaper_helixultimate/scss/theme.scss b/templates/shaper_helixultimate/scss/theme.scss old mode 100644 new mode 100755 index a5b7df37..1ef74dc1 --- a/templates/shaper_helixultimate/scss/theme.scss +++ b/templates/shaper_helixultimate/scss/theme.scss @@ -1,1442 +1,1444 @@ // Global CSS Variables :root { - --header_height: $header_height; + --header_height: $header_height; } body { - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - &.helix-ultimate-preloader { - overflow: hidden; - &:before { - content: " "; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 99998; - background: rgba(255, 255, 255, 0.9); - } - &:after { - content: "\f110"; - font-family: "FontAwesome"; - font-size: 36px; - position: fixed; - top: 50%; - left: 50%; - margin-top: -24px; - margin-left: -24px; - width: 48px; - height: 48px; - line-break: 48px; - text-align: center; - color: #007bff; - -webkit-animation: fa-spin 2s infinite linear; - animation: fa-spin 2s infinite linear; - z-index: 99999; - } - } + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + &.helix-ultimate-preloader { + overflow: hidden; + &:before { + content: " "; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 99998; + background: rgba(255, 255, 255, 0.9); + } + &:after { + content: "\f110"; + font-family: "FontAwesome"; + font-size: 36px; + position: fixed; + top: 50%; + left: 50%; + margin-top: -24px; + margin-left: -24px; + width: 48px; + height: 48px; + line-break: 48px; + text-align: center; + color: #007bff; + -webkit-animation: fa-spin 2s infinite linear; + animation: fa-spin 2s infinite linear; + z-index: 99999; + } + } } a { - transition: color 400ms, background-color 400ms; + transition: color 400ms, background-color 400ms; } a, a:hover, a:focus, a:active { - text-decoration: none; + text-decoration: none; } label { - font-weight: normal; + font-weight: normal; } legend { - padding-bottom: 10px; + padding-bottom: 10px; } img { - display: block; - max-width: 100%; - height: auto; + display: block; + max-width: 100%; + height: auto; } //Bootstrap 5 customize .row { - --bs-gutter-x: 1.875rem; + --bs-gutter-x: 1.875rem; } .container { - padding-left: 15px; - padding-right: 15px; + padding-left: 15px; + padding-right: 15px; } .element-invisible { - position: absolute; - padding: 0; - margin: 0; - border: 0; - height: 1px; - width: 1px; - overflow: hidden; + position: absolute; + padding: 0; + margin: 0; + border: 0; + height: 1px; + width: 1px; + overflow: hidden; } //Topbar #sp-top-bar { - padding: 8px 0; - .sp-module { - display: inline-block; - margin: 0 0 0 1.25rem; - } - font-size: 0.875rem; + padding: 8px 0; + .sp-module { + display: inline-block; + margin: 0 0 0 1.25rem; + } + font-size: 0.875rem; } ul.social-icons { - list-style: none; - padding: 0; - margin: 0; - display: inline-block; - > li { - display: inline-block; - line-height: 1.5; - &:not(:last-child) { - margin-right: 20px; - } - } + list-style: none; + padding: 0; + margin: 0; + display: inline-block; + > li { + display: inline-block; + line-height: 1.5; + &:not(:last-child) { + margin-right: 20px; + } + } } .flex-auto { - flex: auto; + flex: auto; } #sp-menu { - &.menu-with-social { - .sp-megamenu-wrapper { - flex: auto; - justify-content: space-between; - display: flex; - align-items: center; - } - } - > .sp-column { - height: 100%; - } - .social-wrap { - position: relative; - padding-left: 60px; - &:after { - content: ""; - margin-top: 10px; - margin-bottom: 10px; - position: absolute; - width: 2px; - height: calc(var(--header_height) - 20px); - left: 30px; - background-color: rgba(80, 80, 80, 0.2); - } - } - ul.social-icons { - > li:not(:last-child) { - margin-right: 20px; - } - a { - color: #9c9c9c; - } - } - .social-wrap.no-border { - ul.social-icons { - border-left: none; - padding-left: 0px; - } - } - &.menu-center { - .sp-megamenu-wrapper { - justify-content: center; - } - } - .mod-finder.js-finder-searchform { - label { - display: none; - } - } + &.menu-with-social { + .sp-megamenu-wrapper { + flex: auto; + justify-content: space-between; + display: flex; + align-items: center; + } + } + > .sp-column { + height: 100%; + } + .social-wrap { + position: relative; + padding-left: 60px; + &:after { + content: ""; + margin-top: 10px; + margin-bottom: 10px; + position: absolute; + width: 2px; + height: calc(var(--header_height) - 20px); + left: 30px; + background-color: rgba(80, 80, 80, 0.2); + } + } + ul.social-icons { + > li:not(:last-child) { + margin-right: 20px; + } + a { + color: #9c9c9c; + } + } + .social-wrap.no-border { + ul.social-icons { + border-left: none; + padding-left: 0px; + } + } + &.menu-center { + .sp-megamenu-wrapper { + justify-content: center; + } + } + .mod-finder.js-finder-searchform { + label { + display: none; + } + } } .menu-flex { - .sp-megamenu-wrapper { - display: flex; - justify-content: flex-end; - } + .sp-megamenu-wrapper { + display: flex; + justify-content: flex-end; + } } #menu-right { - .sp-module { - &:first-child { - border-right: 2px solid rgba(80, 80, 80, 0.2); - padding-right: 30px; - } - } + .sp-module { + &:first-child { + border-right: 2px solid rgba(80, 80, 80, 0.2); + padding-right: 30px; + } + } } .header-has-modules { - #offcanvas-toggler { - margin-right: 20px; - margin-left: 0; - } + #offcanvas-toggler { + margin-right: 20px; + margin-left: 0; + } } // language switcher .sp-module-content { - .mod-languages { - ul.lang-inline { - margin: 0; - padding: 0; - li { - border: none; - display: inline-block; - margin: 0 5px 0 0; - a { - padding: 0 !important; - } - > a:before { - display: none; - } - } - } - } - - // Latest Articles - .latestnews { - > li { - > a { - > span { - display: block; - margin-top: 5px; - font-size: 85%; - } - } - } - } + .mod-languages { + ul.lang-inline { + margin: 0; + padding: 0; + li { + border: none; + display: inline-block; + margin: 0 5px 0 0; + a { + padding: 0 !important; + } + > a:before { + display: none; + } + } + } + } + + // Latest Articles + .latestnews { + > li { + > a { + > span { + display: block; + margin-top: 5px; + font-size: 85%; + } + } + } + } } .sp-contact-info { - list-style: none; - padding: 0; - margin: 0 -10px; - li { - display: inline-block; - margin: 0 10px; - font-size: 90%; - white-space: nowrap; - i { - margin: 0 3px; - } - } + list-style: none; + padding: 0; + margin: 0 -10px; + li { + display: inline-block; + margin: 0 10px; + font-size: 90%; + white-space: nowrap; + i { + margin: 0 3px; + } + } } // Header #sp-header { - height: $header_height; - width: 100%; - position: relative; - z-index: 99; - box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); - animation: spFadeIn 0.5s; - #offcanvas-toggler.offcanvas, - #offcanvas-toggler.mega { - display: none !important; - } - &.full-header-left, - &.full-header-center, - &.header-with-modal-menu, - &.lg-header, - &.header-with-social { - #offcanvas-toggler.offcanvas { - display: flex !important; - } - .menu-with-offcanvas #offcanvas-toggler { - display: none !important; - } - } - &.full-header { - padding-left: 45px; - padding-right: 45px; - } - &.lg-header { - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); - .logo { - height: auto; - } - #offcanvas-toggler { - margin-right: 20px; - margin-left: 0px; - &.offcanvas-toggler-right.offcanvas { - display: none !important; - } - } - .sp-column { - height: 100%; - } - #sp-logo { - #offcanvas-toggler { - display: none; - } - } - } - &.header-with-modal-menu { - color: $menu_text_color; - a { - color: $menu_text_color; - &:hover, - &:focus { - color: $menu_text_hover_color; - } - } - .sp-contact-info { - > li { - margin-right: 15px; - opacity: 0.7; - transition: 0.3s; - &:hover, - &:focus { - opacity: 1; - } - > span { - margin-right: 5px; - } - } - } - #offcanvas-toggler { - display: none !important; - } - &.center-layout { - .modules-wrapper { - height: auto; - border: none; - padding: 0px; - max-width: 730px; - margin: 0 auto; - } - #modal-menu .modal-menu-inner > .container { - align-items: flex-start; - padding: 170px 0 0; - } - #modal-menu { - .search { - margin-bottom: 80px; - form { - &:after { - font-size: 16px; - } - &:hover { - &:after { - display: none; - } - } - input { - background: transparent; - border-bottom: 2px solid rgba(32, 31, 31, 0.1); - font-size: 26px; - padding: 7px; - border-radius: 0px; - &::placeholder { - color: rgba(32, 31, 31, 0.4); - } - &:focus, - &:active, - &:active:focus { - box-shadow: none; - border-bottom: 2px solid rgba(32, 31, 31, 0.7); - } - } - } - } - } - .sp-megamenu-wrapper { - justify-content: center; - ul.sp-megamenu-parent { - flex-direction: row; - } - .sp-megamenu-parent > li { - > a, - > span { - padding: 0; - &:after { - top: 100%; - width: 2px; - height: 20px; - left: 50%; - transform: translateX(-50%); - margin: 10px 0 0 0; - } - } - &.sp-has-child { - &:hover > a:after, - &:hover > span:after { - height: 30px; - } - > .sp-dropdown { - animation: spFadeIn 0.5s; - } - } - &:not(:last-child) { - > a, - > span { - margin-right: 70px; - } - } - > .sp-dropdown.sp-dropdown-main { - top: 100%; - padding-top: 50px; - padding-left: 0; - left: 0px !important; - transition: 0.35s; - li.sp-menu-item > a, - li.sp-menu-item > span { - padding: 6px 0; - } - } - } - } - } - &.classic-layout { - .modal-menu-inner > div { - flex-direction: column; - align-items: flex-start; - padding: 40px 0; - .sp-megamenu-wrapper { - height: 100%; - align-items: center; - } - .social-icons { - margin-top: auto; - margin-bottom: 0px; - width: 100%; - border-top: 2px solid rgb(32 31 31 / 10%); - padding-top: 20px; - font-size: 12px; - } - } - } - } - .logo { - height: $header_height; - display: inline-flex; - margin: 0; - align-items: center; - a { - font-size: 24px; - line-height: 1; - margin: 0; - padding: 0; - } - p { - margin: 5px 0 0; - } - } - &.header-sticky { - position: fixed; - z-index: 9999; - top: 0; - left: 0; - width: 100%; - animation: spFadeInDown 0.5s; - } - .sp-module { - margin-left: 20px; - } - nav.sp-megamenu-wrapper { - #offcanvas-toggler { - display: none; - } - } + height: $header_height; + width: 100%; + position: relative; + z-index: 99; + box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); + animation: spFadeIn 0.5s; + #offcanvas-toggler.offcanvas, + #offcanvas-toggler.mega { + display: none !important; + } + &.full-header-left, + &.full-header-center, + &.header-with-modal-menu, + &.lg-header, + &.header-with-social { + #offcanvas-toggler.offcanvas { + display: flex !important; + } + .menu-with-offcanvas #offcanvas-toggler { + display: none !important; + } + } + &.full-header { + padding-left: 45px; + padding-right: 45px; + } + &.lg-header { + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); + .logo { + height: auto; + } + #offcanvas-toggler { + margin-right: 20px; + margin-left: 0px; + &.offcanvas-toggler-right.offcanvas { + display: none !important; + } + } + .sp-column { + height: 100%; + } + #sp-logo { + #offcanvas-toggler { + display: none; + } + } + } + &.header-with-modal-menu { + color: $menu_text_color; + a { + color: $menu_text_color; + &:hover, + &:focus { + color: $menu_text_hover_color; + } + } + .sp-contact-info { + > li { + margin-right: 15px; + opacity: 0.7; + transition: 0.3s; + &:hover, + &:focus { + opacity: 1; + } + > span { + margin-right: 5px; + } + } + } + #offcanvas-toggler { + display: none !important; + } + &.center-layout { + .modules-wrapper { + height: auto; + border: none; + padding: 0px; + max-width: 730px; + margin: 0 auto; + } + #modal-menu .modal-menu-inner > .container { + align-items: flex-start; + padding: 170px 0 0; + } + #modal-menu { + .search { + margin-bottom: 80px; + form { + &:after { + font-size: 16px; + } + &:hover { + &:after { + display: none; + } + } + input { + background: transparent; + border-bottom: 2px solid rgba(32, 31, 31, 0.1); + font-size: 26px; + padding: 7px; + border-radius: 0px; + &::placeholder { + color: rgba(32, 31, 31, 0.4); + } + &:focus, + &:active, + &:active:focus { + box-shadow: none; + border-bottom: 2px solid rgba(32, 31, 31, 0.7); + } + } + } + } + } + .sp-megamenu-wrapper { + justify-content: center; + ul.sp-megamenu-parent { + flex-direction: row; + } + .sp-megamenu-parent > li { + > a, + > span { + padding: 0; + &:after { + top: 100%; + width: 2px; + height: 20px; + left: 50%; + transform: translateX(-50%); + margin: 10px 0 0 0; + } + } + &.sp-has-child { + &:hover > a:after, + &:hover > span:after { + height: 30px; + } + > .sp-dropdown { + animation: spFadeIn 0.5s; + } + } + &:not(:last-child) { + > a, + > span { + margin-right: 70px; + } + } + > .sp-dropdown.sp-dropdown-main { + top: 100%; + padding-top: 50px; + padding-left: 0; + left: auto !important; + right: 0px; + transition: 0.35s; + li.sp-menu-item > a, + li.sp-menu-item > span { + padding: 6px 0; + } + } + } + } + } + &.classic-layout { + .modal-menu-inner > div { + flex-direction: column; + align-items: flex-start; + padding: 40px 0; + .sp-megamenu-wrapper { + height: 100%; + align-items: flex-start; + } + .social-icons { + margin-top: auto; + margin-bottom: 0px; + width: 100%; + border-top: 2px solid rgb(32 31 31 / 10%); + padding-top: 20px; + font-size: 12px; + } + } + } + } + .logo { + height: $header_height; + display: inline-flex; + margin: 0; + align-items: center; + a { + font-size: 24px; + line-height: 1; + margin: 0; + padding: 0; + } + p { + margin: 5px 0 0; + } + } + &.header-sticky { + position: fixed; + z-index: 9999; + top: 0; + left: 0; + width: 100%; + animation: spFadeInDown 0.5s; + } + .sp-module { + margin-left: 20px; + } + nav.sp-megamenu-wrapper { + #offcanvas-toggler { + display: none; + } + } } #sp-header-topbar { - position: relative; - z-index: 111; - .sp-profile-wrapper { - .sp-sign-in { - .user-text { - display: none !important; - } - } - } - #sp-logo { - #offcanvas-toggler { - display: none !important; - } - } - .container-inner { - border-bottom: 1px solid #e5e5e5; - > .row { - min-height: $header_height; - } - } - a { - color: #909196; - } - .sp-contact-info { - color: #909196; - } + position: relative; + z-index: 111; + .sp-profile-wrapper { + .sp-sign-in { + .user-text { + display: none !important; + } + } + } + #sp-logo { + #offcanvas-toggler { + display: none !important; + } + } + .container-inner { + border-bottom: 1px solid #e5e5e5; + > .row { + min-height: $header_height; + } + } + a { + color: #909196; + } + .sp-contact-info { + color: #909196; + } } .header-modules { - margin-left: 20px; - .sp-module { - margin-left: 20px; - } - .search { - position: relative; - form { - &:after { - content: "\f002"; - font-family: "Font Awesome 5 Free"; - font-weight: 900; - position: absolute; - top: 0; - font-size: 12px; - line-height: 32px; - right: 10px; - } - input { - background: #efeff0; - border: none; - height: 32px; - font-size: 15px; - border-radius: 3px; - padding: 5px 10px; - } - } - } + margin-left: 20px; + .sp-module { + margin-left: 20px; + } + .search { + position: relative; + form { + &:after { + content: "\f002"; + font-family: "Font Awesome 5 Free"; + font-weight: 900; + position: absolute; + top: 0; + font-size: 12px; + line-height: 32px; + right: 10px; + } + input { + background: #efeff0; + border: none; + height: 32px; + font-size: 15px; + border-radius: 3px; + padding: 5px 10px; + } + } + } } // Modal Menu Variation .burger-icon { - width: 25px; - cursor: pointer; - > span { - display: block; - height: 2px; - background-color: #000; - margin: 5px 0; - transition: background-color 0.3s ease-in, opacity 0.3s ease-in, transform 0.3s ease-in; - } + width: 25px; + cursor: pointer; + > span { + display: block; + height: 2px; + background-color: #000; + margin: 5px 0; + transition: background-color 0.3s ease-in, opacity 0.3s ease-in, + transform 0.3s ease-in; + } } .offcanvas-active, #modal-menu-toggler.active { - .burger-icon > span { - background-color: #000; - &:nth-child(1) { - transform: translate(0, 8px) rotate(-45deg); - } + .burger-icon > span { + background-color: #000; + &:nth-child(1) { + transform: translate(0, 8px) rotate(-45deg); + } - &:nth-child(2) { - opacity: 0; - } + &:nth-child(2) { + opacity: 0; + } - &:nth-child(3) { - transform: translate(0, -5px) rotate(45deg); - } - } + &:nth-child(3) { + transform: translate(0, -5px) rotate(45deg); + } + } } .offcanvas-active .close-offcanvas { - .burger-icon > span { - transition-delay: 0.2s; - } + .burger-icon > span { + transition-delay: 0.2s; + } } body.modal-menu-active { - overflow-y: hidden; + overflow-y: hidden; } #modal-menu { - background: #f9f9f9; - position: fixed !important; - top: $header_height; - left: 0; - right: 0; - transition: 0.5s; - bottom: 120%; - overflow: hidden; - display: flex; - z-index: 10; - &.has-bg { - background-image: url(../images/menu-bg.jpg); - background-repeat: no-repeat; - background-size: cover; - background-position: center center; - } - &.active { - bottom: 0; - } - - .sp-megamenu-parent > li { - > a, - > span { - display: block; - - &:after { - opacity: 0.3; - transition: 0.3s; - } - } - - &:hover, - &.active { - > a, - > span { - color: $link_color; - - &:after { - opacity: 1; - } - } - } - } - - .sp-megamenu-parent > li > a .nav-counter, - .sp-megamenu-parent > li > span .nav-counter { - font-size: 16px; - } - - .sp-megamenu-parent > li:hover > a:before, - .sp-megamenu-parent > li.active > a:before { - width: 0; - opacity: 0; - } - - .modal-menu-inner { - position: relative !important; - width: 100%; - - #menu-dismiss { - position: absolute; - top: 60px; - left: 60px; - cursor: pointer; - - svg { - font-size: 55px; - } - } - - > .container { - display: flex; - padding: 70px 0; - align-items: center; - height: 100%; - > .row { - width: 100%; - } - } - } - - ul.sp-megamenu-parent { - display: flex !important; - flex-direction: column; - > li { - position: relative; - - &:not(:last-child) { - margin-bottom: 30px; - } - - > a, - > span { - font-size: 26px; - font-weight: 600; - line-height: 1.4; - text-transform: initial; - } - } - li.sp-has-child { - > a, - > span { - position: relative; - &:after { - content: ""; - float: right; - margin-left: 7px; - font-weight: 900; - width: 12px; - height: 2px; - background: #252525; - position: absolute; - top: 50%; - margin-left: 20px; - transition: 0.3s; - } - } - &:hover { - > a, - > span { - &:after { - width: 30px; - } - } - > .sp-dropdown { - animation: spFadeInDown 0.5s; - } - } - } - .sp-dropdown { - left: 100% !important; - transition: 0.3s; - padding-left: 30px; - - &.sp-dropdown-main { - top: 0px; - } - - .sp-dropdown-inner { - box-shadow: none; - border-radius: 0px; - position: relative; - overflow: visible !important; - max-height: initial; - padding: 0; - background-color: transparent; - - ul > li > a { - font-weight: 500 !important; - font-size: 15px !important; - } - } - } - } - .modules-wrapper { - display: flex; - flex-direction: column; - height: 100%; - justify-content: center; - max-width: 330px; - border-left: 2px solid rgb(32 31 31 / 10%); - padding: 30px; - color: $menu_text_color; - a { - color: $menu_text_color; - &:hover, - &:focus { - color: $menu_text_hover_color; - } - } - - .sp-module { - margin-left: 0; - margin-bottom: 15px; - } - .search form { - margin-bottom: 30px; - input { - height: 40px; - } - } - .sp-contact-info { - margin-bottom: 10px; - display: flex; - flex-direction: column; - > li { - margin-bottom: 35px; - > span { - font-size: 12px; - margin-bottom: 10px; - } - > a { - opacity: 0.7; - &:hover, - &:focus { - opacity: 1; - } - } - } - } - .social-icons { - font-size: 14px; - a { - opacity: 0.7; - &:hover, - &:focus { - opacity: 1; - } - } - } - } + background: #f9f9f9; + position: fixed !important; + top: $header_height; + left: 0; + right: 0; + transition: 0.5s; + bottom: 120%; + overflow: hidden; + display: flex; + z-index: 10; + &.has-bg { + background-image: url(../images/menu-bg.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + } + &.active { + bottom: 0; + } + + .sp-megamenu-parent > li { + > a, + > span { + display: block; + + &:after { + opacity: 0.3; + transition: 0.3s; + } + } + + &:hover, + &.active { + > a, + > span { + color: $link_color; + + &:after { + opacity: 1; + } + } + } + } + + .sp-megamenu-parent > li > a .nav-counter, + .sp-megamenu-parent > li > span .nav-counter { + font-size: 16px; + } + + .sp-megamenu-parent > li:hover > a:before, + .sp-megamenu-parent > li.active > a:before { + width: 0; + opacity: 0; + } + + .modal-menu-inner { + position: relative !important; + width: 100%; + + #menu-dismiss { + position: absolute; + top: 60px; + left: 60px; + cursor: pointer; + + svg { + font-size: 55px; + } + } + + > .container { + display: flex; + padding: 70px 0; + align-items: center; + height: 100%; + > .row { + width: 100%; + } + } + } + + ul.sp-megamenu-parent { + display: flex !important; + flex-direction: column; + > li { + position: relative; + + &:not(:last-child) { + margin-bottom: 30px; + } + + > a, + > span { + font-size: 26px; + font-weight: 600; + line-height: 1.4; + text-transform: initial; + } + } + li.sp-has-child { + > a, + > span { + position: relative; + &:after { + content: ""; + float: right; + margin-left: 7px; + font-weight: 900; + width: 12px; + height: 2px; + background: #252525; + position: absolute; + top: 50%; + margin-left: 20px; + transition: 0.3s; + } + } + &:hover { + > a, + > span { + &:after { + width: 30px; + } + } + > .sp-dropdown { + animation: spFadeInDown 0.5s; + } + } + } + .sp-dropdown { + left: 100% !important; + transition: 0.3s; + padding-left: 30px; + + &.sp-dropdown-main { + top: 0px; + } + + .sp-dropdown-inner { + box-shadow: none; + border-radius: 0px; + position: relative; + overflow: visible !important; + max-height: initial; + padding: 0; + background-color: transparent; + + ul > li > a { + font-weight: 500 !important; + font-size: 15px !important; + } + } + } + } + .modules-wrapper { + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + max-width: 330px; + border-left: 2px solid rgb(32 31 31 / 10%); + padding: 30px; + color: $menu_text_color; + a { + color: $menu_text_color; + &:hover, + &:focus { + color: $menu_text_hover_color; + } + } + + .sp-module { + margin-left: 0; + margin-bottom: 15px; + } + .search form { + margin-bottom: 30px; + input { + height: 40px; + } + } + .sp-contact-info { + margin-bottom: 10px; + display: flex; + flex-direction: column; + > li { + margin-bottom: 35px; + > span { + font-size: 12px; + margin-bottom: 10px; + } + > a { + opacity: 0.7; + &:hover, + &:focus { + opacity: 1; + } + } + } + } + .social-icons { + font-size: 14px; + a { + opacity: 0.7; + &:hover, + &:focus { + opacity: 1; + } + } + } + } } #sp-logo.has-border { - position: relative; - padding-right: 45px; - &:after { - content: ""; - margin-top: 10px; - margin-bottom: 10px; - position: absolute; - width: 2px; - height: calc(var(--header_height) - 20px); - right: 15px; - background-color: rgba(80, 80, 80, 0.2); - } - .sp-column { - display: inline-flex; - align-items: center; - } + position: relative; + padding-right: 45px; + &:after { + content: ""; + margin-top: 10px; + margin-bottom: 10px; + position: absolute; + width: 2px; + height: calc(var(--header_height) - 20px); + right: 15px; + background-color: rgba(80, 80, 80, 0.2); + } + .sp-column { + display: inline-flex; + align-items: center; + } } // profile .sp-profile-wrapper { - position: relative; - font-size: 14px; - .arrow-icon { - font-size: 11px; - } - .sp-profile-dropdown { - background: #fff; - border: 1px solid #e4e4e4; - border-radius: 3px; - padding: 10px 15px !important; - list-style: none !important; - font-size: 14px; - position: absolute; - min-width: 100px; - right: 0; - top: 100%; - display: none !important; - > li:not(:last-child) { - border-bottom: 1px solid #e4e4e4; - padding-bottom: 5px; - margin-bottom: 5px; - line-height: 1.3; - } - } - &:hover { - .sp-profile-dropdown { - display: block !important; - animation: spFadeInDown 0.5s; - } - } + position: relative; + font-size: 14px; + .arrow-icon { + font-size: 11px; + } + .sp-profile-dropdown { + background: #fff; + border: 1px solid #e4e4e4; + border-radius: 3px; + padding: 10px 15px !important; + list-style: none !important; + font-size: 14px; + position: absolute; + min-width: 100px; + right: 0; + top: 100%; + display: none !important; + > li:not(:last-child) { + border-bottom: 1px solid #e4e4e4; + padding-bottom: 5px; + margin-bottom: 5px; + line-height: 1.3; + } + } + &:hover { + .sp-profile-dropdown { + display: block !important; + animation: spFadeInDown 0.5s; + } + } } // Page Title #sp-title { - min-height: 0; + min-height: 0; } .sp-page-title { - padding: 30px 0; - background-repeat: no-repeat; - background-position: 50% 50%; - background-size: cover; - background-attachment: fixed; - .sp-page-title-heading, - .sp-page-title-sub-heading { - margin: 0; - padding: 0; - color: #fff; - } - .sp-page-title-heading { - font-size: 24px; - line-height: 1; - } - .sp-page-title-sub-heading { - font-size: 14px; - font-weight: normal; - line-height: 1; - margin-top: 10px; - } - .breadcrumb { - background: none; - padding: 0; - margin: 10px 0 0 0; - > .active { - color: rgba(255, 255, 255, 0.8); - } - > span, - > li, - > li + li:before, - > li > a { - color: #fff; - } - } + padding: 30px 0; + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: cover; + background-attachment: fixed; + .sp-page-title-heading, + .sp-page-title-sub-heading { + margin: 0; + padding: 0; + color: #fff; + } + .sp-page-title-heading { + font-size: 24px; + line-height: 1; + } + .sp-page-title-sub-heading { + font-size: 14px; + font-weight: normal; + line-height: 1; + margin-top: 10px; + } + .breadcrumb { + background: none; + padding: 0; + margin: 10px 0 0 0; + > .active { + color: rgba(255, 255, 255, 0.8); + } + > span, + > li, + > li + li:before, + > li > a { + color: #fff; + } + } } .breadcrumb { - padding: 0.75rem 1rem; - background-color: #e9ecef; - border-radius: 0.25rem; + padding: 0.75rem 1rem; + background-color: #e9ecef; + border-radius: 0.25rem; } // Body .body-innerwrapper { - overflow-x: hidden; + overflow-x: hidden; } .layout-boxed .body-innerwrapper { - max-width: 1240px; - margin: 0 auto; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); + max-width: 1240px; + margin: 0 auto; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } #sp-main-body { - padding: 100px 0; + padding: 100px 0; } body.view-article.remove-container { - .body-innerwrapper { - > #sp-main-body, - > .sp-main-body { - > .container { - max-width: 100%; - padding: 0; - } - } - } + .body-innerwrapper { + > #sp-main-body, + > .sp-main-body { + > .container { + max-width: 100%; + padding: 0; + } + } + } } .com-sppagebuilder #sp-main-body { - padding: 0; + padding: 0; } // Left and Right #sp-left, #sp-right { - .sp-module { - margin-top: 50px; - border: 1px solid #f3f3f3; - padding: 30px; - border-radius: 3px; - - &:first-child { - margin-top: 0; - } - .sp-module-title { - margin: 0 0 30px; - padding-bottom: 20px; - font-size: 22px; - font-weight: 700; - border-bottom: 1px solid #f3f3f3; - } - //Un-ordered List - ul { - list-style: none; - padding: 0; - margin: 0; - > li { - display: block; - border-bottom: 1px solid #f3f3f3; - > a { - display: block; - padding: 5px 0; - line-height: 36px; - padding: 2px 0; - } - &:last-child { - border-bottom: none; - } - } - } - //List category - .categories-module { - ul { - margin: 0 10px; - } - } - //Latest News - .latestnews { - > div { - padding-bottom: 5px; - margin-bottom: 5px; - border-bottom: 1px solid #e8e8e8; - &:last-child { - padding-bottom: 0; - margin-bottom: 0; - border-bottom: 0; - } - > a { - display: block; - font-weight: 400; - } - } - } - //Tags Cloud - .tagscloud { - margin: -2px 0; - .tag-name { - display: inline-block; - padding: 5px 10px; - background: #808080; - color: #fff; - border-radius: 4px; - margin: 2px 0; - span { - display: inline-block; - min-width: 10px; - padding: 3px 7px; - font-size: 12px; - font-weight: 700; - line-height: 1; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - background-color: rgba(0, 0, 0, 0.2); - border-radius: 10px; - } - } - } - } + .sp-module { + margin-top: 50px; + border: 1px solid #f3f3f3; + padding: 30px; + border-radius: 3px; + + &:first-child { + margin-top: 0; + } + .sp-module-title { + margin: 0 0 30px; + padding-bottom: 20px; + font-size: 22px; + font-weight: 700; + border-bottom: 1px solid #f3f3f3; + } + //Un-ordered List + ul { + list-style: none; + padding: 0; + margin: 0; + > li { + display: block; + border-bottom: 1px solid #f3f3f3; + > a { + display: block; + padding: 5px 0; + line-height: 36px; + padding: 2px 0; + } + &:last-child { + border-bottom: none; + } + } + } + //List category + .categories-module { + ul { + margin: 0 10px; + } + } + //Latest News + .latestnews { + > div { + padding-bottom: 5px; + margin-bottom: 5px; + border-bottom: 1px solid #e8e8e8; + &:last-child { + padding-bottom: 0; + margin-bottom: 0; + border-bottom: 0; + } + > a { + display: block; + font-weight: 400; + } + } + } + //Tags Cloud + .tagscloud { + margin: -2px 0; + .tag-name { + display: inline-block; + padding: 5px 10px; + background: #808080; + color: #fff; + border-radius: 4px; + margin: 2px 0; + span { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: 12px; + font-weight: 700; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + background-color: rgba(0, 0, 0, 0.2); + border-radius: 10px; + } + } + } + } } // Login Form .login { - img { - display: inline-block; - margin: 20px 0; - } - .checkbox { - input[type="checkbox"] { - margin-top: 6px; - } - } + img { + display: inline-block; + margin: 20px 0; + } + .checkbox { + input[type="checkbox"] { + margin-top: 6px; + } + } } .form-links { - ul { - list-style: none; - padding: 0; - margin: 0; - } + ul { + list-style: none; + padding: 0; + margin: 0; + } } // Search .hide-label { - border: 0; - clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ - clip: rect(1px, 1px, 1px, 1px); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + border: 0; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } .search { - .btn-toolbar { - margin-bottom: 20px; - span.icon-search { - margin: 0; - } - button { - color: #fff; - } - } - .phrases { - .phrases-box { - .controls { - label { - display: inline-block; - margin: 0 20px 20px; - } - } - } - .ordering-box { - margin-bottom: 15px; - } - } - .only { - label { - display: inline-block; - margin: 0 20px 20px; - } - } - .search-results { - dt.result-title { - margin-top: 40px; - } - dt, - dd { - margin: 5px 0; - } - } + .btn-toolbar { + margin-bottom: 20px; + span.icon-search { + margin: 0; + } + button { + color: #fff; + } + } + .phrases { + .phrases-box { + .controls { + label { + display: inline-block; + margin: 0 20px 20px; + } + } + } + .ordering-box { + margin-bottom: 15px; + } + } + .only { + label { + display: inline-block; + margin: 0 20px 20px; + } + } + .search-results { + dt.result-title { + margin-top: 40px; + } + dt, + dd { + margin: 5px 0; + } + } } .filter-search { - .chzn-container-single { - .chzn-single { - height: 34px; - line-height: 34px; - } - } + .chzn-container-single { + .chzn-single { + height: 34px; + line-height: 34px; + } + } } .form-search { - .finder { - label { - display: block; - } - .input-medium { - width: 60%; - border-radius: 4px; - } - } + .finder { + label { + display: block; + } + .input-medium { + width: 60%; + border-radius: 4px; + } + } } .finder { - .word { - input { - display: inline-block; - } - } - .search-results.list-striped { - li { - padding: 20px 0; - } - } + .word { + input { + display: inline-block; + } + } + .search-results.list-striped { + li { + padding: 20px 0; + } + } } // Blog .article-list { - .article { - margin-bottom: 30px; - padding: 20px; - border: 1px solid #f5f5f5; - border-radius: 3px; - - .article-intro-image, - .article-featured-video, - .article-featured-audio, - .article-feature-gallery { - margin: -20px -20px 20px -20px; - border-radius: 3px 3px 0 0; - border-bottom: 1px solid #f5f5f5; - overflow: hidden; - img { - border-radius: 3px 3px 0 0; - } - } - - .article-header { - h1, - h2 { - font-size: 1.375rem; - margin: 0 0 1.25rem 0; - - a { - color: $text_color; - &:hover, - &:active, - &:focus { - color: $link_hover_color; - } - } - } - } - - .readmore { - font-size: 0.875rem; - a { - color: $text_color; - font-weight: 500; - &:hover, - &:active, - &:focus { - color: $link_hover_color; - } - } - } - } + .article { + margin-bottom: 30px; + padding: 20px; + border: 1px solid #f5f5f5; + border-radius: 3px; + + .article-intro-image, + .article-featured-video, + .article-featured-audio, + .article-feature-gallery { + margin: -20px -20px 20px -20px; + border-radius: 3px 3px 0 0; + border-bottom: 1px solid #f5f5f5; + overflow: hidden; + img { + border-radius: 3px 3px 0 0; + } + } + + .article-header { + h1, + h2 { + font-size: 1.375rem; + margin: 0 0 1.25rem 0; + + a { + color: $text_color; + &:hover, + &:active, + &:focus { + color: $link_hover_color; + } + } + } + } + + .readmore { + font-size: 0.875rem; + a { + color: $text_color; + font-weight: 500; + &:hover, + &:active, + &:focus { + color: $link_hover_color; + } + } + } + } } .related-article-large { - .article-image { - width: 350px; - min-width: 350px; - } - - .article-information { - border-left: 1px solid #f1f1f1; - padding-left: 20px; - margin-left: 20px; - - > span { - font-size: 0.813rem; - - + span::before { - display: inline-block; - padding-right: 0.5rem; - padding-left: 0.5rem; - content: "/"; - } - - a { - color: $text_color; - &:hover { - color: $link_hover_color; - } - } - } - - .intro-text { - margin-top: 20px; - } - } + .article-image { + width: 350px; + min-width: 350px; + } + + .article-information { + border-left: 1px solid #f1f1f1; + padding-left: 20px; + margin-left: 20px; + + > span { + font-size: 0.813rem; + + + span::before { + display: inline-block; + padding-right: 0.5rem; + padding-left: 0.5rem; + content: "/"; + } + + a { + color: $text_color; + &:hover { + color: $link_hover_color; + } + } + } + + .intro-text { + margin-top: 20px; + } + } } .article-info { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-bottom: 1rem; - > span { - font-size: 0.813rem; - - + span::before { - display: inline-block; - padding-right: 0.5rem; - padding-left: 0.5rem; - content: "/"; - } - - a { - color: $text_color; - &:hover { - color: $link_hover_color; - } - } - } + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-bottom: 1rem; + > span { + font-size: 0.813rem; + + + span::before { + display: inline-block; + padding-right: 0.5rem; + padding-left: 0.5rem; + content: "/"; + } + + a { + color: $text_color; + &:hover { + color: $link_hover_color; + } + } + } } .article-details { - .article-header { - position: relative; - h1, - h2 { - font-size: 2.25rem; - } - } - - .article-info { - margin-bottom: 1rem; - } - - .article-full-image { - text-align: center; - img { - display: inline-block; - border-radius: 4px; - } - margin-bottom: 2rem; - } - - .article-featured-video, - .article-featured-audio, - .article-feature-gallery { - margin-bottom: 2rem; - } - - .article-ratings-social-share { - padding: 1rem 0; - border-top: 1px solid #f5f5f5; - border-bottom: 1px solid #f5f5f5; - margin-bottom: 1rem; - } - - .article-author-information { - padding-top: 2rem; - margin-top: 2rem; - border-top: 1px solid #f5f5f5; - } - - .article-can-edit { - position: relative; - margin-bottom: 10px; - a { - display: inline-block; - background: #2a61c9; - color: #fff; - padding: 5px 12px; - border-radius: 3px; - font-size: 14px; - } - } + .article-header { + position: relative; + h1, + h2 { + font-size: 2.25rem; + } + } + + .article-info { + margin-bottom: 1rem; + } + + .article-full-image { + text-align: center; + img { + display: inline-block; + border-radius: 4px; + } + margin-bottom: 2rem; + } + + .article-featured-video, + .article-featured-audio, + .article-feature-gallery { + margin-bottom: 2rem; + } + + .article-ratings-social-share { + padding: 1rem 0; + border-top: 1px solid #f5f5f5; + border-bottom: 1px solid #f5f5f5; + margin-bottom: 1rem; + } + + .article-author-information { + padding-top: 2rem; + margin-top: 2rem; + border-top: 1px solid #f5f5f5; + } + + .article-can-edit { + position: relative; + margin-bottom: 10px; + a { + display: inline-block; + background: #2a61c9; + color: #fff; + padding: 5px 12px; + border-radius: 3px; + font-size: 14px; + } + } } .related-article-list-container { - margin-top: 15px; - .related-article-title { - font-size: 22px; - padding-bottom: 15px; - border-bottom: 1px solid #f3f3f3; - } - ul.related-article-list { - list-style: none; - padding: 0; - li { - margin-bottom: 10px; - .article-header { - h2 { - font-size: 1.2rem; - a { - color: #252525; - &:hover { - color: #044cd0; - } - } - } - } - .published { - font-size: 14px; - } - } - } + margin-top: 15px; + .related-article-title { + font-size: 22px; + padding-bottom: 15px; + border-bottom: 1px solid #f3f3f3; + } + ul.related-article-list { + list-style: none; + padding: 0; + li { + margin-bottom: 10px; + .article-header { + h2 { + font-size: 1.2rem; + a { + color: #252525; + &:hover { + color: #044cd0; + } + } + } + } + .published { + font-size: 14px; + } + } + } } .tags { - list-style: none; - padding: 0; - margin: 2rem 0 0 0; - display: block; - > li { - display: inline-block; - a { - display: block; - font-size: 0.875rem; - padding: 0.5rem 1rem; - border-radius: 6.25rem; - &:hover { - color: #fff; - } - } - } + list-style: none; + padding: 0; + margin: 2rem 0 0 0; + display: block; + > li { + display: inline-block; + a { + display: block; + font-size: 0.875rem; + padding: 0.5rem 1rem; + border-radius: 6.25rem; + &:hover { + color: #fff; + } + } + } } .pager { - list-style: none; - padding: 2rem 0 0 0; - margin: 2rem 0 0 0; - border-top: 1px solid #f5f5f5; - - &::after { - display: block; - clear: both; - content: ""; - } - - > li { - display: inline-block; - &.previous { - float: left; - } - &.next { - float: right; - } - a { - display: inline-block; - font-size: 0.785rem; - padding: 1rem 2.5rem; - border-radius: 100px; - } - } + list-style: none; + padding: 2rem 0 0 0; + margin: 2rem 0 0 0; + border-top: 1px solid #f5f5f5; + + &::after { + display: block; + clear: both; + content: ""; + } + + > li { + display: inline-block; + &.previous { + float: left; + } + &.next { + float: right; + } + a { + display: inline-block; + font-size: 0.785rem; + padding: 1rem 2.5rem; + border-radius: 100px; + } + } } #article-comments { - padding-top: 2rem; - margin-top: 2rem; - border-top: 1px solid #f5f5f5; + padding-top: 2rem; + margin-top: 2rem; + border-top: 1px solid #f5f5f5; } //Article Voting .article-ratings { - display: flex; - align-items: center; - .rating-symbol { - unicode-bidi: bidi-override; - direction: rtl; - font-size: 1rem; - display: inline-block; - margin-left: 5px; - span.rating-star { - font-family: "Font Awesome 5 Free"; - font-weight: normal; - font-style: normal; - display: inline-block; - &.active:before { - content: "\f005"; - font-weight: 900; - color: #f6bc00; - } - &:before { - content: "\f005"; - padding-right: 5px; - } - } - - span.rating-star:hover:before, - span.rating-star:hover ~ span.rating-star:before { - content: "\f005"; - color: #e7b000; - font-weight: 900; - cursor: pointer; - } - } - - .ratings-count { - font-size: 0.785rem; - color: #4c4b4b; - } - - .fa-spinner { - margin-right: 5px; - } + display: flex; + align-items: center; + .rating-symbol { + unicode-bidi: bidi-override; + direction: rtl; + font-size: 1rem; + display: inline-block; + margin-left: 5px; + span.rating-star { + font-family: "Font Awesome 5 Free"; + font-weight: normal; + font-style: normal; + display: inline-block; + &.active:before { + content: "\f005"; + font-weight: 900; + color: #f6bc00; + } + &:before { + content: "\f005"; + padding-right: 5px; + } + } + + span.rating-star:hover:before, + span.rating-star:hover ~ span.rating-star:before { + content: "\f005"; + color: #e7b000; + font-weight: 900; + cursor: pointer; + } + } + + .ratings-count { + font-size: 0.785rem; + color: #4c4b4b; + } + + .fa-spinner { + margin-right: 5px; + } } // Misc .pagination-wrapper { - align-items: center; - .pagination { - margin-bottom: 0; - } + align-items: center; + .pagination { + margin-bottom: 0; + } } //Social Share .article-social-share { - float: right; - .social-share-icon { - ul { - padding: 0; - list-style: none; - margin: 0; - li { - &:not(:last-child) { - margin-right: 10px; - } - display: inline-block; - a { - border: 1px solid #ededed; - font-size: 1rem; - border-radius: 50%; - height: 34px; - line-height: 34px; - text-align: center; - width: 34px; - display: inline-block; - &:hover, - &:focus { - color: #fff; - } - } - } - } - } + float: right; + .social-share-icon { + ul { + padding: 0; + list-style: none; + margin: 0; + li { + &:not(:last-child) { + margin-right: 10px; + } + display: inline-block; + a { + border: 1px solid #ededed; + font-size: 1rem; + border-radius: 50%; + height: 34px; + line-height: 34px; + text-align: center; + width: 34px; + display: inline-block; + &:hover, + &:focus { + color: #fff; + } + } + } + } + } } .newsfeed-category { - .category { - list-style: none; - padding: 0; - margin: 0; - li { - padding: 5px 0; - } - } - #filter-search { - margin: 10px 0; - } + .category { + list-style: none; + padding: 0; + margin: 0; + li { + padding: 5px 0; + } + } + #filter-search { + margin: 10px 0; + } } .category-module, @@ -1447,340 +1449,340 @@ body.view-article.remove-container { .mostread, .form-links, .list-striped { - list-style: none; - padding: 0; - margin: 0; - li { - padding: 2px 0; - h4 { - margin: 5px 0; - } - } + list-style: none; + padding: 0; + margin: 0; + li { + padding: 2px 0; + h4 { + margin: 5px 0; + } + } } //Social and rating .article-footer-top { - display: table; - clear: both; - width: 100%; - .post_rating { - float: left; - } + display: table; + clear: both; + width: 100%; + .post_rating { + float: left; + } } // contentpane .contentpane { - &:not(.com-sppagebuilder) { - padding: 20px; - } + &:not(.com-sppagebuilder) { + padding: 20px; + } } // Bottom #sp-bottom { - padding: 60px 0 30px; - font-size: 14px; - line-height: 1.6; - .sp-module { - margin-bottom: 30px; - .sp-module-title { - font-weight: 700; - font-size: 18px; - margin: 0 0 30px; - color: #fff; - } - - ul { - list-style: none; - padding: 0; - margin: 0; - > li { - display: block; - margin-bottom: 15px; - &:last-child { - margin-bottom: 0; - } - > a { - display: block; - } - } - } - } + padding: 60px 0 30px; + font-size: 14px; + line-height: 1.6; + .sp-module { + margin-bottom: 30px; + .sp-module-title { + font-weight: 700; + font-size: 18px; + margin: 0 0 30px; + color: #fff; + } + + ul { + list-style: none; + padding: 0; + margin: 0; + > li { + display: block; + margin-bottom: 15px; + &:last-child { + margin-bottom: 0; + } + > a { + display: block; + } + } + } + } } // Footer #sp-footer { - font-size: 14px; - padding: 0; - - .container-inner { - padding: 30px 0; - border-top: 1px solid rgba(255, 255, 255, 0.1); - } - - ul { - &.menu { - display: inline-block; - list-style: none; - padding: 0; - margin: 0 -10px; - li { - display: inline-block; - margin: 0 10px; - a { - display: block; - &:hover { - background: none; - } - } - } - } - } - - #sp-footer2 { - text-align: right; - } + font-size: 14px; + padding: 0; + + .container-inner { + padding: 30px 0; + border-top: 1px solid rgba(255, 255, 255, 0.1); + } + + ul { + &.menu { + display: inline-block; + list-style: none; + padding: 0; + margin: 0 -10px; + li { + display: inline-block; + margin: 0 10px; + a { + display: block; + &:hover { + background: none; + } + } + } + } + } + + #sp-footer2 { + text-align: right; + } } // Coming soon html.coming-soon { - width: 100%; - height: 100%; - min-height: 100%; - - body { - width: 100%; - height: 100%; - min-height: 100%; - display: -ms-flexbox; - display: -webkit-box; - display: flex; - -ms-flex-align: center; - -ms-flex-pack: center; - -webkit-box-align: center; - align-items: center; - -webkit-box-pack: center; - justify-content: center; - padding-top: 40px; - padding-bottom: 40px; - text-align: center; - background-repeat: no-repeat; - background-position: 50% 40%; - } - - .coming-soon-logo { - display: inline-block; - margin-bottom: 2rem; - } - - #coming-soon-countdown { - margin-top: 4rem; - - .coming-soon-days, - .coming-soon-hours, - .coming-soon-minutes, - .coming-soon-seconds { - margin: 0; - float: left; - width: 25%; - - .coming-soon-number { - width: 100%; - font-size: 4.5rem; - letter-spacing: -1px; - line-height: 1; - } - - .coming-soon-string { - font-size: 1.5rem; - letter-spacing: -1px; - display: block; - text-transform: uppercase; - } - } - } - - .coming-soon-position { - margin-top: 2rem; - } - - .social-icons { - margin-top: 4rem; - } - .coming-soon-login form { - display: inline-block; - } + width: 100%; + height: 100%; + min-height: 100%; + + body { + width: 100%; + height: 100%; + min-height: 100%; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-align: center; + -ms-flex-pack: center; + -webkit-box-align: center; + align-items: center; + -webkit-box-pack: center; + justify-content: center; + padding-top: 40px; + padding-bottom: 40px; + text-align: center; + background-repeat: no-repeat; + background-position: 50% 40%; + } + + .coming-soon-logo { + display: inline-block; + margin-bottom: 2rem; + } + + #coming-soon-countdown { + margin-top: 4rem; + + .coming-soon-days, + .coming-soon-hours, + .coming-soon-minutes, + .coming-soon-seconds { + margin: 0; + float: left; + width: 25%; + + .coming-soon-number { + width: 100%; + font-size: 4.5rem; + letter-spacing: -1px; + line-height: 1; + } + + .coming-soon-string { + font-size: 1.5rem; + letter-spacing: -1px; + display: block; + text-transform: uppercase; + } + } + } + + .coming-soon-position { + margin-top: 2rem; + } + + .social-icons { + margin-top: 4rem; + } + .coming-soon-login form { + display: inline-block; + } } // error html.error-page { - width: 100%; - height: 100%; - - body { - width: 100%; - height: 100%; - display: -ms-flexbox; - display: -webkit-box; - display: flex; - -ms-flex-align: center; - -ms-flex-pack: center; - -webkit-box-align: center; - align-items: center; - -webkit-box-pack: center; - justify-content: center; - padding-top: 40px; - padding-bottom: 40px; - text-align: center; - background-repeat: no-repeat; - background-position: 50% 40%; - } - - .error-logo { - display: inline-block; - margin-bottom: 2rem; - } - - .error-code { - margin: 0 0 1rem; - font-size: 6rem; - line-break: 1; - } - - .error-message { - font-size: 1.5rem; - margin-bottom: 3rem; - } + width: 100%; + height: 100%; + + body { + width: 100%; + height: 100%; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-align: center; + -ms-flex-pack: center; + -webkit-box-align: center; + align-items: center; + -webkit-box-pack: center; + justify-content: center; + padding-top: 40px; + padding-bottom: 40px; + text-align: center; + background-repeat: no-repeat; + background-position: 50% 40%; + } + + .error-logo { + display: inline-block; + margin-bottom: 2rem; + } + + .error-code { + margin: 0 0 1rem; + font-size: 6rem; + line-break: 1; + } + + .error-message { + font-size: 1.5rem; + margin-bottom: 3rem; + } } .sp-social-share { - ul { - display: block; - padding: 0; - margin: 20px -5px 0; - li { - display: inline-block; - font-size: 24px; - margin: 0 5px; - } - } + ul { + display: block; + padding: 0; + margin: 20px -5px 0; + li { + display: inline-block; + font-size: 24px; + margin: 0 5px; + } + } } // profile .profile { - > div:not(:last-child) { - margin-bottom: 30px; - } + > div:not(:last-child) { + margin-bottom: 30px; + } } .dl-horizontal { - dt { - margin: 8px 0; - text-align: left; - } + dt { + margin: 8px 0; + text-align: left; + } } // page-header .page-header { - padding-bottom: 15px; + padding-bottom: 15px; } // featured contact table.category { - width: 100%; - thead, - tbody { - > tr { - border: 1px solid #f2f2f2; - th, - td { - padding: 10px; - } - } - } + width: 100%; + thead, + tbody { + > tr { + border: 1px solid #f2f2f2; + th, + td { + padding: 10px; + } + } + } } //contact from .contact-form { - .form-actions { - background: none; - border: none; - } + .form-actions { + background: none; + border: none; + } } @media print { - .visible-print { - display: inherit !important; - } - .hidden-print { - display: none !important; - } + .visible-print { + display: inherit !important; + } + .hidden-print { + display: none !important; + } } // Preloader .sp-preloader { - height: 100%; - left: 0; - position: fixed; - top: 0; - width: 100%; - z-index: 99999; - > div { - border-radius: 50%; - height: 50px; - width: 50px; - top: 50%; - left: 50%; - margin-top: -25px; - margin-left: -25px; - position: absolute; - animation: spSpin 0.75s linear infinite; - &:after { - content: ""; - position: absolute; - width: 49px; - height: 49px; - top: 1px; - right: 0; - left: 0; - margin: auto; - border-radius: 50%; - } - } + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 99999; + > div { + border-radius: 50%; + height: 50px; + width: 50px; + top: 50%; + left: 50%; + margin-top: -25px; + margin-left: -25px; + position: absolute; + animation: spSpin 0.75s linear infinite; + &:after { + content: ""; + position: absolute; + width: 49px; + height: 49px; + top: 1px; + right: 0; + left: 0; + margin: auto; + border-radius: 50%; + } + } } .sp-scroll-up { - display: none; - position: fixed; - bottom: 60px; - right: 30px; - width: 36px; - height: 36px; - line-height: 36px; - text-align: center; - font-size: 16px; - color: #fff; - background: rgba(100, 100, 100, 0.4); - border-radius: 100%; - z-index: 1000; - transition: all 0.3s ease; - - &:hover, - &:active, - &:focus { - color: #fff; - background: #000; - } + display: none; + position: fixed; + bottom: 60px; + right: 30px; + width: 36px; + height: 36px; + line-height: 36px; + text-align: center; + font-size: 16px; + color: #fff; + background: rgba(100, 100, 100, 0.4); + border-radius: 100%; + z-index: 1000; + transition: all 0.3s ease; + + &:hover, + &:active, + &:focus { + color: #fff; + background: #000; + } } // Forms .control-group { - margin-bottom: 1rem; + margin-bottom: 1rem; } select.form-control:not([multiple]), select.inputbox:not([multiple]), select:not([multiple]) { - height: calc(2.25rem + 2px); + height: calc(2.25rem + 2px); } input[type="text"], @@ -1792,645 +1794,651 @@ input[type="search"], input[type="tel"], input[type="number"], select { - &:not(.form-control) { - display: block; - width: 100%; - padding: 0.5rem 0.75rem; - font-size: 1rem; - line-height: 1.25; - color: #495057; - background-color: #fff; - background-image: none; - background-clip: padding-box; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 0.25rem; - transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - - &:focus { - color: #495057; - background-color: #fff; - border-color: #80bdff; - outline: 0; - } - } + &:not(.form-control) { + display: block; + width: 100%; + padding: 0.5rem 0.75rem; + font-size: 1rem; + line-height: 1.25; + color: #495057; + background-color: #fff; + background-image: none; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + + &:focus { + color: #495057; + background-color: #fff; + border-color: #80bdff; + outline: 0; + } + } } .chzn-select, .chzn-select-deselect { - width: 100%; + width: 100%; } .chzn-container { - &.chzn-container-single { - .chzn-single { - display: block; - width: 100%; - padding: 0.5rem 0.75rem; - line-height: 1.25; - height: calc(2.25rem + 2px); - color: #495057; - background-color: #fff; - background-image: none; - background-clip: padding-box; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 0.25rem; - transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - box-shadow: none; - - div { - width: 30px; - background: none; - > b { - background: none; - position: relative; - font: normal normal normal 14px/1 FontAwesome; - &:after { - content: "\f0dc"; - font-family: "Font Awesome 5 Free"; - font-weight: 900; - font-size: 0.875rem; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - -webkit-transform: translate(-50%, -50%); - } - } - } - } - - &.chzn-container-active { - &.chzn-with-drop { - .chzn-single { - border-radius: 0.25rem 0.25rem 0 0; - } - } - } - - .chzn-search { - padding: 0.625rem; - input[type="text"] { - display: block; - width: 100%; - padding: 0.5rem 1.429rem 0.5rem 0.75rem; - font-size: 0.875rem; - line-height: 1.25; - height: calc(2rem + 2px); - color: #495057; - background-color: #fff; - background-image: none; - background-clip: padding-box; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 0.25rem; - transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - box-shadow: none; - -webkit-box-shadow: none; - - &:focus { - border-color: #80bdff; - outline: 0; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); - -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); - } - } - - &:after { - content: "\f002"; - font-family: FontAwesome; - font-size: 0.875rem; - color: rgba(0, 0, 0, 0.2); - position: absolute; - top: 50%; - right: 20px; - transform: translateY(-50%); - -webkit-transform: translateY(-50%); - } - } - - .chzn-drop { - border-color: rgba(0, 0, 0, 0.15); - border-radius: 0 0 0.25rem 0.25rem; - box-shadow: none; - -webkit-box-shadow: none; - } - - .chzn-results { - li { - &.highlighted { - background-image: none !important; - } - } - } - } - - &.chzn-container-multi { - .chzn-choices { - display: block; - width: 100%; - padding: 0 0.75rem; - min-height: calc(2.25rem + 2px); - line-height: 1.25; - background-color: #fff; - background-image: none; - background-clip: padding-box; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 0.25rem; - transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - box-shadow: none; - -webkit-box-shadow: none; - - li { - &.search-field { - input[type="text"] { - font-size: 0.875rem; - font-weight: normal; - line-height: 1.25; - height: calc(2rem + 2px); - background-color: #fff; - } - } - - &.search-choice { - margin: 5.5px 5px 0 0; - padding: 5px 20px 5px 5px; - background-image: none; - background-color: #f5f5f5; - border-color: rgba(0, 0, 0, 0.1); - box-shadow: none; - -webkit-box-shadow: none; - - .search-choice-close { - background: none; - top: 5px; - color: rgba(0, 0, 0, 0.2); - &:hover { - color: rgba(0, 0, 0, 0.5); - } - &:after { - content: "\f00d"; - font-family: FontAwesome; - font-size: 0.875rem; - position: absolute; - top: 0; - right: 0; - } - } - } - } - } - - &.chzn-with-drop { - &.chzn-container-active { - .chzn-choices { - border-radius: 0.25rem; - } - } - .chzn-drop { - margin-top: -4px; - border: none; - border-radius: 0; - box-shadow: none; - -webkit-box-shadow: none; - - .chzn-results { - &:not(:empty) { - padding: 0.75rem; - background: #fff; - border: 1px solid rgba(0, 0, 0, 0.15); - border-top: 0; - border-radius: 0 0 0.25rem 0.25rem; - } - - li { - &.no-results { - background: none; - } - } - } - } - } - } + &.chzn-container-single { + .chzn-single { + display: block; + width: 100%; + padding: 0.5rem 0.75rem; + line-height: 1.25; + height: calc(2.25rem + 2px); + color: #495057; + background-color: #fff; + background-image: none; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + box-shadow: none; + + div { + width: 30px; + background: none; + > b { + background: none; + position: relative; + font: normal normal normal 14px/1 FontAwesome; + &:after { + content: "\f0dc"; + font-family: "Font Awesome 5 Free"; + font-weight: 900; + font-size: 0.875rem; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + } + } + } + } + + &.chzn-container-active { + &.chzn-with-drop { + .chzn-single { + border-radius: 0.25rem 0.25rem 0 0; + } + } + } + + .chzn-search { + padding: 0.625rem; + input[type="text"] { + display: block; + width: 100%; + padding: 0.5rem 1.429rem 0.5rem 0.75rem; + font-size: 0.875rem; + line-height: 1.25; + height: calc(2rem + 2px); + color: #495057; + background-color: #fff; + background-image: none; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + box-shadow: none; + -webkit-box-shadow: none; + + &:focus { + border-color: #80bdff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); + -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); + } + } + + &:after { + content: "\f002"; + font-family: FontAwesome; + font-size: 0.875rem; + color: rgba(0, 0, 0, 0.2); + position: absolute; + top: 50%; + right: 20px; + transform: translateY(-50%); + -webkit-transform: translateY(-50%); + } + } + + .chzn-drop { + border-color: rgba(0, 0, 0, 0.15); + border-radius: 0 0 0.25rem 0.25rem; + box-shadow: none; + -webkit-box-shadow: none; + } + + .chzn-results { + li { + &.highlighted { + background-image: none !important; + } + } + } + } + + &.chzn-container-multi { + .chzn-choices { + display: block; + width: 100%; + padding: 0 0.75rem; + min-height: calc(2.25rem + 2px); + line-height: 1.25; + background-color: #fff; + background-image: none; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + box-shadow: none; + -webkit-box-shadow: none; + + li { + &.search-field { + input[type="text"] { + font-size: 0.875rem; + font-weight: normal; + line-height: 1.25; + height: calc(2rem + 2px); + background-color: #fff; + } + } + + &.search-choice { + margin: 5.5px 5px 0 0; + padding: 5px 20px 5px 5px; + background-image: none; + background-color: #f5f5f5; + border-color: rgba(0, 0, 0, 0.1); + box-shadow: none; + -webkit-box-shadow: none; + + .search-choice-close { + background: none; + top: 5px; + color: rgba(0, 0, 0, 0.2); + &:hover { + color: rgba(0, 0, 0, 0.5); + } + &:after { + content: "\f00d"; + font-family: FontAwesome; + font-size: 0.875rem; + position: absolute; + top: 0; + right: 0; + } + } + } + } + } + + &.chzn-with-drop { + &.chzn-container-active { + .chzn-choices { + border-radius: 0.25rem; + } + } + .chzn-drop { + margin-top: -4px; + border: none; + border-radius: 0; + box-shadow: none; + -webkit-box-shadow: none; + + .chzn-results { + &:not(:empty) { + padding: 0.75rem; + background: #fff; + border: 1px solid rgba(0, 0, 0, 0.15); + border-top: 0; + border-radius: 0 0 0.25rem 0.25rem; + } + + li { + &.no-results { + background: none; + } + } + } + } + } + } } // Form control .form-horizontal { - .control-label { - float: left; - width: auto; - padding-top: 5px; - padding-right: 5px; - text-align: left; - } + .control-label { + float: left; + width: auto; + padding-top: 5px; + padding-right: 5px; + text-align: left; + } - .controls { - margin-left: 220px; - } + .controls { + margin-left: 220px; + } } .card-block { - padding: 20px; - ul { - list-style: none; - padding: 0; - margin: 0; - display: block; - li { - display: block; - } - } + padding: 20px; + ul { + list-style: none; + padding: 0; + margin: 0; + display: block; + li { + display: block; + } + } } // Alerts .alert { - &.alert-error { - color: #721c24; - background-color: #f8d7da; - border-color: #f5c6cb; - } + &.alert-error { + color: #721c24; + background-color: #f8d7da; + border-color: #f5c6cb; + } } .invalid { - color: #a51f18; - border-color: #a51f18; + color: #a51f18; + border-color: #a51f18; } // Cookie #sp-cookie-consent { - position: fixed; - font-size: 16px; - font-weight: 500; - bottom: 0; - left: 0; - width: 100%; - z-index: 10001; + position: fixed; + font-size: 16px; + font-weight: 500; + bottom: 0; + left: 0; + width: 100%; + z-index: 10001; - > div { - padding: 20px; - position: relative; - } + > div { + padding: 20px; + position: relative; + } } #attrib-helix_ultimate_blog_options { - #jform_attribs_helix_ultimate_article_format { - position: relative; - display: inline-block; - vertical-align: middle; - white-space: nowrap; - .form-check-inline { - margin: 0; - margin-right: -5px; - padding-left: 0px; - label { - display: inline-block; - padding: 4px 12px; - margin-bottom: 0; - font-size: 13px; - line-height: 18px; - text-align: center; - vertical-align: middle; - cursor: pointer; - background-color: #f3f3f3; - color: #333; - border-top: 1px solid #b3b3b3; - border-right: 1px solid #b3b3b3; - border-bottom: 1px solid #b3b3b3; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - border-radius: 0; - &.btn-success { - background: #46a546; - color: #fff; - } - input[type="radio"] { - display: none !important; - } - } - &:last-child { - label { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - } - &:first-child { - label { - border-left: 1px solid #b3b3b3; - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - } - } - } - } + #jform_attribs_helix_ultimate_article_format { + position: relative; + display: inline-block; + vertical-align: middle; + white-space: nowrap; + .form-check-inline { + margin: 0; + margin-right: -5px; + padding-left: 0px; + label { + display: inline-block; + padding: 4px 12px; + margin-bottom: 0; + font-size: 13px; + line-height: 18px; + text-align: center; + vertical-align: middle; + cursor: pointer; + background-color: #f3f3f3; + color: #333; + border-top: 1px solid #b3b3b3; + border-right: 1px solid #b3b3b3; + border-bottom: 1px solid #b3b3b3; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + border-radius: 0; + &.btn-success { + background: #46a546; + color: #fff; + } + input[type="radio"] { + display: none !important; + } + } + &:last-child { + label { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + } + &:first-child { + label { + border-left: 1px solid #b3b3b3; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + } + } + } } .com-contenthistory { - .btn-group { - display: flex; - justify-content: flex-end; - button { - display: inline-block; - padding: 4px 12px; - margin-bottom: 0; - font-size: 13px; - line-height: 18px; - text-align: center; - vertical-align: middle; - cursor: pointer; - color: #333; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - background-color: #f5f5f5; - background-repeat: repeat-x; - border: 1px solid #bbb; - border-bottom-color: #a2a2a2; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - &:hover { - color: #333; - background-color: #e9e9e9; - } - } - } + .btn-group { + display: flex; + justify-content: flex-end; + button { + display: inline-block; + padding: 4px 12px; + margin-bottom: 0; + font-size: 13px; + line-height: 18px; + text-align: center; + vertical-align: middle; + cursor: pointer; + color: #333; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + background-color: #f5f5f5; + background-repeat: repeat-x; + border: 1px solid #bbb; + border-bottom-color: #a2a2a2; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), + 0 1px 2px rgba(0, 0, 0, 0.05); + &:hover { + color: #333; + background-color: #e9e9e9; + } + } + } } #versionsModal { - top: 10%; - .modal-dialog { - max-width: 80%; - } - iframe { - min-height: 300px; - } + top: 10%; + .modal-dialog { + max-width: 80%; + } + iframe { + min-height: 300px; + } } body.com-content.view-form.layout-edit .nav-tabs .nav-link { - display: block !important; + display: block !important; } // noscript fallback style for lazysizes script .no-js img.lazyload { - display: none; + display: none; } #system-message-container { - position: fixed; - bottom: 0px; - right: 15px; - max-width: 350px; - .alert { - font-size: 13px; - line-height: 1.5; - > .btn-close { - position: absolute; - right: 5px; - top: 5px; - cursor: pointer; - } - } - // for joomla4 - joomla-alert { - font-size: 13px; - } + position: fixed; + bottom: 0px; + right: 15px; + max-width: 350px; + .alert { + font-size: 13px; + line-height: 1.5; + > .btn-close { + position: absolute; + right: 5px; + top: 5px; + cursor: pointer; + } + } + // for joomla4 + joomla-alert { + font-size: 13px; + } } .com-users.view-registration, .com-users.view-profile { - #member-registration, - #member-profile { - .modal-dialog { - display: flex; - align-items: center; - min-height: calc(100% - 1rem); - } - } + #member-registration, + #member-profile { + .modal-dialog { + display: flex; + align-items: center; + min-height: calc(100% - 1rem); + } + } } //privacy .registration { - #member-registration { - #jform_privacyconsent_privacy-lbl { - display: inline-flex; - > a { - position: initial; - display: block; - color: $text_color; - &:hover, - &:focus { - color: $link_hover_color; - } - } - } - } + #member-registration { + #jform_privacyconsent_privacy-lbl { + display: inline-flex; + > a { + position: initial; + display: block; + color: $text_color; + &:hover, + &:focus { + color: $link_hover_color; + } + } + } + } } body.com-users.view-registration { - > #sbox-window { - overflow: hidden; - > #sbox-btn-close { - top: 5px; - right: 5px; - } - } + > #sbox-window { + overflow: hidden; + > #sbox-btn-close { + top: 5px; + right: 5px; + } + } } //article frontend editing body.helix-ultimate.hu.view-form.layout-edit { - .edit.item-page { - > #adminForm { - > fieldset { - > .joomla-tabs { - display: flex; - padding: 0; - margin: 0 !important; - overflow-x: auto; - overflow-y: hidden; - white-space: nowrap; - list-style: outside none none; - background-color: #f5f5f5; - border-color: #ccc #ccc currentcolor; - border-style: solid solid none; - border-width: 1px 1px 0; - border-radius: 0.25rem 0.25rem 0 0; - border-image: none; - box-shadow: 0 1px #fff inset, 0 2px 3px -3px rgb(0 0 0 / 15%), 0 -4px 0 rgb(0 0 0 / 5%) inset, - 0 0 3px rgb(0 0 0 / 4%); - - .nav-item > .nav-link { - color: var(--text-color); - } - .nav-item > .nav-link.active { - background-color: rgba(0, 0, 0, 0.03); - background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05) 100%); - border-right: 0 none; - border-left: 0 none; - border-top-left-radius: 0; - border-top-right-radius: 0; - box-shadow: 2px 0 1px -1px rgb(0 0 0 / 8%) inset, -2px 0 1px -1px rgb(0 0 0 / 8%) inset, - 0 1px 0 rgb(0 0 0 / 2%) inset; - } - } - > .tab-content { - padding: 15px; - background-color: #fefefe; - border: 1px solid #ccc; - border-radius: 0 0 0.25rem 0.25rem; - box-shadow: 0 0 3px rgb(0 0 0 / 4%); - } - #editor { - label#jform_title-lbl { - margin-bottom: 15px; - font-weight: 700; - } - .js-editor-tinymce { - display: flex; - flex-direction: column; - } - } - #publishing, - #metadata, - #attrib-helix_ultimate_blog_options { - > .control-group { - display: flex; - flex-direction: column; - > label { - margin-bottom: 5px; - font-weight: 700; - } - textarea { - width: 100%; - } - .calendar-container .time td { - select { - padding: 4px; - font-size: 13px; - } - } - } - } - } - } - } + .edit.item-page { + > #adminForm { + > fieldset { + > .joomla-tabs { + display: flex; + padding: 0; + margin: 0 !important; + overflow-x: auto; + overflow-y: hidden; + white-space: nowrap; + list-style: outside none none; + background-color: #f5f5f5; + border-color: #ccc #ccc currentcolor; + border-style: solid solid none; + border-width: 1px 1px 0; + border-radius: 0.25rem 0.25rem 0 0; + border-image: none; + box-shadow: 0 1px #fff inset, 0 2px 3px -3px rgb(0 0 0 / 15%), + 0 -4px 0 rgb(0 0 0 / 5%) inset, 0 0 3px rgb(0 0 0 / 4%); + + .nav-item > .nav-link { + color: var(--text-color); + } + .nav-item > .nav-link.active { + background-color: rgba(0, 0, 0, 0.03); + background-image: linear-gradient( + to bottom, + transparent, + rgba(0, 0, 0, 0.05) 100% + ); + border-right: 0 none; + border-left: 0 none; + border-top-left-radius: 0; + border-top-right-radius: 0; + box-shadow: 2px 0 1px -1px rgb(0 0 0 / 8%) inset, + -2px 0 1px -1px rgb(0 0 0 / 8%) inset, + 0 1px 0 rgb(0 0 0 / 2%) inset; + } + } + > .tab-content { + padding: 15px; + background-color: #fefefe; + border: 1px solid #ccc; + border-radius: 0 0 0.25rem 0.25rem; + box-shadow: 0 0 3px rgb(0 0 0 / 4%); + } + #editor { + label#jform_title-lbl { + margin-bottom: 15px; + font-weight: 700; + } + .js-editor-tinymce { + display: flex; + flex-direction: column; + } + } + #publishing, + #metadata, + #attrib-helix_ultimate_blog_options { + > .control-group { + display: flex; + flex-direction: column; + > label { + margin-bottom: 5px; + font-weight: 700; + } + textarea { + width: 100%; + } + .calendar-container .time td { + select { + padding: 4px; + font-size: 13px; + } + } + } + } + } + } + } } body.contentpane.com-media.view-images { - .container-popup { - #imageForm { - > #messages + .well { - .row-fluid { - display: flex; - max-width: 100%; - .span8 { - flex: auto; - > .controls { - margin-left: 10px; - display: flex; - max-width: 500px; - #folderlist_chzn, - #folderlist { - flex: auto; - } - } - #upbutton { - background: var(--bs-primary); - color: #fff; - margin: 0 5px; - } - } - } - } - .well { - > .row-fluid:not(:last-child) { - margin-bottom: 5px; - > .control-group:not(:last-child) { - margin-bottom: 5px; - } - } - } - .btn.button-cancel { - background: var(--bs-danger); - color: #fff; - &:hover, - &:focus { - border-color: var(--bs-danger); - } - } - } - } + .container-popup { + #imageForm { + > #messages + .well { + .row-fluid { + display: flex; + max-width: 100%; + .span8 { + flex: auto; + > .controls { + margin-left: 10px; + display: flex; + max-width: 500px; + #folderlist_chzn, + #folderlist { + flex: auto; + } + } + #upbutton { + background: var(--bs-primary); + color: #fff; + margin: 0 5px; + } + } + } + } + .well { + > .row-fluid:not(:last-child) { + margin-bottom: 5px; + > .control-group:not(:last-child) { + margin-bottom: 5px; + } + } + } + .btn.button-cancel { + background: var(--bs-danger); + color: #fff; + &:hover, + &:focus { + border-color: var(--bs-danger); + } + } + } + } } body.contentpane.com-menus.view-items.layout-modal { - #adminForm { - .js-stools-container-bar { - display: flex; - } - } + #adminForm { + .js-stools-container-bar { + display: flex; + } + } } body.contentpane.com-modules.view-modules.layout-modal { - .container-popup { - #adminForm { - > .js-stools { - .js-stools-container-bar { - display: flex; - align-items: center; - padding: 10px 0px; - > label { - margin-right: 10px; - } - > .btn-wrapper.input-append { - display: flex; - > button[type="submit"] { - background: var(--bs-primary); - color: #fff; - margin-left: 5px; - } - } - > .btn-wrapper { - > button[type="button"] { - background: var(--bs-primary); - color: #fff; - } - } - } - } - } - } + .container-popup { + #adminForm { + > .js-stools { + .js-stools-container-bar { + display: flex; + align-items: center; + padding: 10px 0px; + > label { + margin-right: 10px; + } + > .btn-wrapper.input-append { + display: flex; + > button[type="submit"] { + background: var(--bs-primary); + color: #fff; + margin-left: 5px; + } + } + > .btn-wrapper { + > button[type="button"] { + background: var(--bs-primary); + color: #fff; + } + } + } + } + } + } } body.contentpane.com-content.view-articles.layout-modal, body.contentpane.com-menus.view-items.layout-modal, body.contentpane.com-contact.view-contacts.layout-modal { - .container-popup { - #adminForm { - > .js-stools { - padding-top: 15px; - .js-stools-container-bar { - margin-bottom: 10px; - > label { - margin-right: 10px; - } - > .btn-wrapper.input-append { - display: flex; - > button[type="submit"] { - background: var(--bs-primary); - color: #fff; - margin-left: 5px; - } - } - > .btn-wrapper { - > button[type="button"] { - background: var(--bs-primary); - color: #fff; - } - } - } - } - } - } + .container-popup { + #adminForm { + > .js-stools { + padding-top: 15px; + .js-stools-container-bar { + margin-bottom: 10px; + > label { + margin-right: 10px; + } + > .btn-wrapper.input-append { + display: flex; + > button[type="submit"] { + background: var(--bs-primary); + color: #fff; + margin-left: 5px; + } + } + > .btn-wrapper { + > button[type="button"] { + background: var(--bs-primary); + color: #fff; + } + } + } + } + } + } } body.contentpane.com-content.view-articles.layout-modal, body.contentpane.com-contact.view-contacts.layout-modal { - .container-popup { - #adminForm { - .js-stools-container-bar { - display: flex; - align-items: center; - } - } - } + .container-popup { + #adminForm { + .js-stools-container-bar { + display: flex; + align-items: center; + } + } + } } // misc .modal-dialog.jviewport-width80 { - width: 80vw; - max-width: none; + width: 80vw; + max-width: none; }