Demo - Bootstrap 5.3 Scss - theme
This demo-theme has multilevel and offcanvas in small mode
This commit is contained in:
g7sim
parent
65316edb07
commit
a242f1122a
|
|
@ -0,0 +1,55 @@
|
|||
|
||||
|
||||
@import 'include/thirdparty/Bootstrap5.3/scss/_bootstrap.scss';
|
||||
|
||||
/*! @import '_variables.scss'; */
|
||||
|
||||
$text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
|
||||
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
@mixin btn-shadow($color){
|
||||
@include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
|
||||
}
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
@import '../assets/css/style.scss';
|
||||
|
||||
|
||||
|
||||
/*! 0.001 rem; == off ! --> custom height if no header wanted */
|
||||
header.section-header{ height:5rem;
|
||||
margin-top:-57px;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
nav.nav-custom{
|
||||
background-image: linear-gradient(#f9fafb, #f8f9fa 60%, #e9eaeb);
|
||||
}
|
||||
|
||||
|
||||
.dropdown-item.active, .dropdown-item:active {
|
||||
color: var(--bs-dropdown-link-active-color);
|
||||
background-color: var(--bs-dropdown-link-active-bg);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--bs-dropdown-link-color: var(--bs-body-color);
|
||||
--bs-dropdown-link-hover-color: var(--bs-body-color);
|
||||
--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
|
||||
--bs-dropdown-link-active-color: #fff;
|
||||
--bs-dropdown-link-active-bg: lightgray; /*! #0d6efd; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*! ----- search-button -----*/
|
||||
div.input-group span.input-group-btn{
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
|
||||
/*! --- common footer-styles in _common/footer.scss ----- */
|
||||
$footer-bg: $gray-300; /*! Standard */
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
|
||||
@import 'include/thirdparty/Bootstrap5.3/scss/_bootstrap.scss';
|
||||
|
||||
/*! @import '_variables.scss'; */
|
||||
|
||||
$text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
|
||||
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
@mixin btn-shadow($color){
|
||||
@include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
|
||||
}
|
||||
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
@import '../assets/css/style.scss';
|
||||
|
||||
|
||||
/*! 0.001 rem; == off ! --> custom height if no header wanted */
|
||||
header.section-header{ height:5rem;
|
||||
margin-top:-57px;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
/*!
|
||||
nav.nav-custom{ background-image: linear-gradient(#f9fafb, #f8f9fa 60%, #e9eaeb); }
|
||||
*/
|
||||
|
||||
.dropdown-item.active, .dropdown-item:active {
|
||||
color: var(--bs-dropdown-link-active-color);
|
||||
background-color: var(--bs-dropdown-link-active-bg);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--bs-dropdown-link-color: var(--bs-body-color);
|
||||
--bs-dropdown-link-hover-color: var(--bs-body-color);
|
||||
--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
|
||||
--bs-dropdown-link-active-color: #fff;
|
||||
--bs-dropdown-link-active-bg: lightgray; /*! #0d6efd; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
|
||||
@import 'include/thirdparty/Bootstrap5.3/scss/_bootstrap.scss';
|
||||
|
||||
/*! @import '_variables.scss'; */
|
||||
|
||||
$text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
|
||||
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
@mixin btn-shadow($color){
|
||||
@include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
|
||||
}
|
||||
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
@import '../assets/css/style.scss';
|
||||
|
||||
|
||||
/*! 0.001 rem; == off ! --> custom height if no header wanted : a compromise! */
|
||||
header.section-header{ height:4rem;
|
||||
margin-top:-57px;
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
nav.nav-custom {
|
||||
background-color: #2c5b9c;
|
||||
ul:not(.submenu) a{color:dimgray;}
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
|
||||
color: dimgray;
|
||||
}
|
||||
|
||||
@media only screen and ( min-width: 951px ) {
|
||||
nav.nav-custom {
|
||||
ul:not(.submenu) a{color:white;}
|
||||
ul.dropdown-menu a, ul.submenu a {color:dimgray;}
|
||||
}
|
||||
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
|
||||
color: white; }
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: 950px ) {
|
||||
ul.navbar-nav{min-width:250px;}
|
||||
}
|
||||
|
||||
|
||||
.dropdown-item.active, .dropdown-item:active {
|
||||
color: var(--bs-dropdown-link-active-color);
|
||||
background-color: var(--bs-dropdown-link-active-bg);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--bs-dropdown-link-color: var(--bs-body-color);
|
||||
--bs-dropdown-link-hover-color: var(--bs-body-color);
|
||||
--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
|
||||
--bs-dropdown-link-active-color: #fff;
|
||||
--bs-dropdown-link-active-bg: lightgray; /*! #0d6efd; */
|
||||
}
|
||||
|
||||
|
||||
div.input-group span.input-group-btn:hover {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
@import 'include/thirdparty/Bootstrap5.3/scss/_bootstrap.scss';
|
||||
|
||||
/*! @import '_variables.scss'; */
|
||||
|
||||
$text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
|
||||
|
||||
$navbar-height: ($nav-link-height + $navbar-padding-y * 2);
|
||||
|
||||
@mixin btn-shadow($color){
|
||||
@include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
|
||||
}
|
||||
|
||||
@import '../_common/common_style.scss';
|
||||
|
||||
@import '../assets/css/style.scss';
|
||||
|
||||
|
||||
|
||||
|
||||
/*! 0.001 rem; == off ! --> custom height if no header wanted */
|
||||
header.section-header{ height:4rem;
|
||||
margin-top:-57px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
|
||||
nav.nav-custom {
|
||||
background-color: #008000;
|
||||
ul:not(.submenu) a{color:dimgray;}
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
|
||||
color: dimgray;
|
||||
}
|
||||
|
||||
@media only screen and ( min-width: 951px ) {
|
||||
nav.nav-custom {
|
||||
ul:not(.submenu) a{color:white;}
|
||||
ul.dropdown-menu a, ul.submenu a {color:dimgray;}
|
||||
}
|
||||
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
|
||||
color: white; }
|
||||
}
|
||||
|
||||
@media only screen and ( max-width: 950px ) {
|
||||
ul.navbar-nav{min-width:250px;}
|
||||
}
|
||||
|
||||
.dropdown-item.active, .dropdown-item:active {
|
||||
color: var(--bs-dropdown-link-active-color);
|
||||
background-color: var(--bs-dropdown-link-active-bg);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--bs-dropdown-link-color: var(--bs-body-color);
|
||||
--bs-dropdown-link-hover-color: var(--bs-body-color);
|
||||
--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
|
||||
--bs-dropdown-link-active-color: #fff;
|
||||
--bs-dropdown-link-active-bg: lightgray; /*! #0d6efd; */
|
||||
}
|
||||
|
||||
div.input-group span.input-group-btn:hover {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
Addon_Name = 'Boot5.3-offcan-mult'
|
||||
;Addon_Unique_ID =
|
||||
Addon_Version = 0.8
|
||||
min_gpeasy_version = 5.2
|
||||
|
||||
About = 'A Bootstrap 5.3 demo - theme with offcanvas mode and multilevel.';
|
||||
|
||||
[FrontEndFramework]
|
||||
name = Bootstrap
|
||||
version = 5
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
// Theme Bootswatch 4 Scss
|
||||
// Common styles used in all layouts
|
||||
//
|
||||
// Instead of Autoprefixer we use vendor-prefix mixins,
|
||||
// see /include/thirdparty/Bootstrap4/scss/bootstrap/vp-mixins
|
||||
//
|
||||
// Migrate to Bootstrap 4: check out https://getbootstrap.com/docs/4.4/migration/
|
||||
|
||||
|
||||
// Imports
|
||||
@if variable-exists(web-font-path) {
|
||||
@import url($web-font-path);
|
||||
}
|
||||
@import 'contactform.scss';
|
||||
@import 'compensate_fixed_navbar.scss'; // default, import only with 'fixed-top' class on navbar in template.php line 44
|
||||
@import 'footer.scss';
|
||||
|
||||
|
||||
// Page Flex Layout for Sticky Footer ==========================================
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
// vendor-prefix mixin
|
||||
@include vp-flexbox();
|
||||
@include vp-flex-direction(column);
|
||||
}
|
||||
|
||||
// Height fix for Admin Top Bar and hidden admin UI
|
||||
html:not(.override_admin_style) body.gpAdmin {
|
||||
height: calc(100% - 29px);
|
||||
}
|
||||
|
||||
// Navbar =======================================================================
|
||||
$navbar-font-size: 1rem !default; // non-standard variable, needs a default value. actual value see layout's variables.scss
|
||||
.navbar {
|
||||
font-size: $navbar-font-size;
|
||||
}
|
||||
|
||||
// Content Area
|
||||
.main-content {
|
||||
// vendor-prefix mixin
|
||||
@include vp-flex(1 0 auto);
|
||||
}
|
||||
|
||||
// Add padding-top to the first content section to prevent content sticking to the navbar
|
||||
#gpx_content > .GPAREA:first-child {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
// Main Footer
|
||||
footer.main-footer {
|
||||
// vendor-prefix mixin
|
||||
@include vp-flex-shrink(0);
|
||||
// more in footer.scss
|
||||
}
|
||||
|
||||
// Fix for bad container paddings in navbars (as of Bootstrap 4.1.1)
|
||||
@include media-breakpoint-up(sm) {
|
||||
.navbar > .container,
|
||||
.navbar > .container-fluid {
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Align menu right, fix dropdown alignment
|
||||
.navbar-right {
|
||||
> .GPAREA:first-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
.dropdown-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// convert Typesetter grid to become Bootstrap 4 (flex) grid =====================
|
||||
.gpRow { @extend .row; }
|
||||
.gpCol-1 { @extend .col-md-1; }
|
||||
.gpCol-2 { @extend .col-md-2; }
|
||||
.gpCol-3 { @extend .col-md-3; }
|
||||
.gpCol-4 { @extend .col-md-4; }
|
||||
.gpCol-5 { @extend .col-md-5; }
|
||||
.gpCol-6 { @extend .col-md-6; }
|
||||
.gpCol-7 { @extend .col-md-7; }
|
||||
.gpCol-8 { @extend .col-md-8; }
|
||||
.gpCol-9 { @extend .col-md-9; }
|
||||
.gpCol-10 { @extend .col-md-10; }
|
||||
.gpCol-11 { @extend .col-md-11; }
|
||||
.gpCol-12 { @extend .col-12; }
|
||||
[class *= "gpCol-"] { margin-bottom: unset; }
|
||||
|
||||
// fixes for flex grid
|
||||
.filetype-wrapper_section.row {
|
||||
> .gpclear {
|
||||
display: none;
|
||||
}
|
||||
&:after{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Extra Content 'Dropdown Divider'
|
||||
.gpArea_Extra_Bootstrap_Dropdown_Divider {
|
||||
@extend .dropdown-divider;
|
||||
}
|
||||
|
||||
|
||||
// Admin Links
|
||||
.footer-bottom {
|
||||
> span {
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
.sitemap_link > a:before,
|
||||
.login_link > a:before {
|
||||
display: inline-block;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
.sitemap_link > a:before {
|
||||
content: "\f0ca\a0";
|
||||
}
|
||||
|
||||
.login_link > a:before {
|
||||
content: "\f2bd\a0";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
// Theme Bootswatch 4 Scss
|
||||
// Compensations for fixed navbar
|
||||
// only required when the main navbar has the css class 'fixed-top'
|
||||
|
||||
// padding-top for the body element
|
||||
body {
|
||||
padding-top: $navbar-height;
|
||||
}
|
||||
|
||||
// Prevent targeted anchors hiding behind fixed navbar
|
||||
// default compensation
|
||||
.GPAREA a[name]:not([href]),
|
||||
.GPAREA a[id]:not([href]) {
|
||||
margin-top: calc( ( #{$navbar-height} + 2rem ) * -1 );
|
||||
padding-top: calc( #{$navbar-height} + 2rem );
|
||||
z-index: -5;
|
||||
}
|
||||
|
||||
// compensation when logged-in
|
||||
// with support for HideAdminUI plugin https://github.com/juek/HideAdminUI
|
||||
html:not(.override_admin_style) body.gpAdmin .GPAREA a[name]:not([href]),
|
||||
html:not(.override_admin_style) body.gpAdmin .GPAREA a[id]:not([href]) {
|
||||
margin-top: calc( ( #{$navbar-height} + 2rem + 29px ) * -1 );
|
||||
padding-top: calc( #{$navbar-height} + 2rem + 29px );
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
// Typesetter's built-in contact form
|
||||
|
||||
form.contactform {
|
||||
width: 100%;
|
||||
|
||||
label:not([for="contact_message"]) {
|
||||
width: auto;
|
||||
float: none;
|
||||
clear: both;
|
||||
margin: 0 0 0.6em 0;
|
||||
> span.title {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
input, textarea {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
input.submit.btn {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
}
|
||||
|
||||
> label[for="contact_message"] {
|
||||
width: auto;
|
||||
float: none;
|
||||
clear: both;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> textarea#contact_message {
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
||||
> .alert {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
// footer variables
|
||||
// these are no Bootstrap standard variables
|
||||
// therefore we need to define default values
|
||||
|
||||
$footer-font-size: 0.875rem !default;
|
||||
$footer-bg: $gray-300 !default;
|
||||
$footer-border-top: none !default;
|
||||
$footer-color: $body-color !default;
|
||||
$footer-headings-color: $headings-color !default;
|
||||
$footer-link-color: $link-color !default;
|
||||
$footer-link-hover-color: $link-hover-color !default;
|
||||
|
||||
$footer-nav-bg: transparent !default;
|
||||
$footer-nav-item-border: none !default;
|
||||
$footer-nav-link-color: $footer-link-color !default;
|
||||
$footer-nav-link-bg: transparent !default;
|
||||
$footer-nav-link-hover-color: $footer-link-hover-color !default;
|
||||
$footer-nav-link-hover-bg: transparent !default;
|
||||
$footer-nav-link-active-color: $footer-link-hover-color !default;
|
||||
$footer-nav-link-active-bg: transparent !default;
|
||||
|
||||
|
||||
footer.main-footer {
|
||||
font-size: $footer-font-size;
|
||||
background: $footer-bg;
|
||||
border-top: $footer-border-top;
|
||||
color: $footer-color;
|
||||
h1, .h1,
|
||||
h2, .h2,
|
||||
h3, .h3,
|
||||
h4, .h4,
|
||||
h5, .h5,
|
||||
h6, .h6 {
|
||||
color: $footer-headings-color;
|
||||
}
|
||||
a {
|
||||
color: $footer-link-color;
|
||||
&:hover {
|
||||
color: $footer-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-nav,
|
||||
.footer-nav ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
margin: 0.6rem 0;
|
||||
background: $footer-nav-bg;
|
||||
border-bottom: $footer-nav-item-border;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-top: $footer-nav-item-border;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
a, a:hover, a:visited, a:active, a:focus {
|
||||
text-decoration: none;
|
||||
color: $footer-nav-link-color;
|
||||
background: $footer-nav-link-bg;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0.4rem 0;
|
||||
|
||||
&.active {
|
||||
color: $footer-nav-link-active-color;
|
||||
background: $footer-nav-link-active-bg;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
color: $footer-nav-link-hover-color;
|
||||
background: $footer-nav-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// 2nd level links
|
||||
> li > ul > li > a {
|
||||
text-indent: 1em;
|
||||
}
|
||||
|
||||
// 3rd level links
|
||||
> li > ul > li > ul > li > a {
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
# bs5-offcanvas-menu
|
||||
Bootstrap 5 Off Canvas Menu
|
||||
<br>
|
||||
Live Preview https://engrasel.github.io/bs5-offcanvas-menu/
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2023 Anil Kumar (https://codepen.io/anil-vinnakoti5/pen/rNZomxX)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,188 @@
|
|||
/*! this scss contains general styles for all theme-colors ! */
|
||||
|
||||
* { margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.nav-link{
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
main > .container {
|
||||
padding: 1px 15px 0;
|
||||
}
|
||||
|
||||
/*! lightgray - here adjust general navigation background color ! */
|
||||
.nav-custom{ background-color: #fcfcfc;
|
||||
border-top:1px lightgray solid;
|
||||
border-bottom:1px lightgray solid; }
|
||||
|
||||
|
||||
.bg-custom{ background-color: white; }
|
||||
|
||||
|
||||
/*! .footer-admin-links span.login_link::before{ content : " \2617 " !important;} */
|
||||
.footer-admin-links {
|
||||
span.login_link {
|
||||
&::before {
|
||||
content: " \2617 " !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.sitemap_link a, span.login_link a{text-decoration:none;}
|
||||
|
||||
|
||||
|
||||
@media all and (max-width: 991px) {
|
||||
ul.navbar-nav{ padding:15px;
|
||||
border:1px lightgray solid;
|
||||
border-radius:4px;}
|
||||
|
||||
div.gpMenu.gpArea_FullMenu.GPAREA > .navbar-nav{
|
||||
border: 1px lightgray solid;
|
||||
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main-footer{bottom:0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-bottom:-30px;
|
||||
}
|
||||
|
||||
|
||||
/*! --- https://codepen.io/anil-vinnakoti5/pen/rNZomxX --- */
|
||||
|
||||
|
||||
@media all and (min-width: 992px) {
|
||||
.dropdown-menu li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu .submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: -7px;
|
||||
}
|
||||
|
||||
.dropdown-menu .submenu-left {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu > li:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.dropdown-menu > li:hover > .submenu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.dropdown-menu .dropdown-menu {
|
||||
margin-left: 0.7rem;
|
||||
margin-right: 0.7rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*! ------------ user css ------------------------------------------------------ */
|
||||
|
||||
@media (min-width : 992px) {
|
||||
.offcanvas {
|
||||
visibility : visible;
|
||||
position : relative;
|
||||
background : none;
|
||||
border : none;
|
||||
justify-content : end;
|
||||
color : blue;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 992px) {
|
||||
.offcanvas {
|
||||
width : 18rem !important;
|
||||
}
|
||||
.offcanvas-start-lg {
|
||||
top : 0;
|
||||
left : 0;
|
||||
border-right : 1px solid rgba(0, 0, 0, .2);
|
||||
transform : translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
#main-nav {transition: transform 1s ease-out;}
|
||||
|
||||
/*! ----------- searchform ------------------------- */
|
||||
|
||||
#search, form.fmail {min-width:15em;
|
||||
max-height:2.2em !important;}
|
||||
|
||||
form.fmail {border-radius:3px;}
|
||||
|
||||
.fmail .input-group{border-radius:1.1em;
|
||||
background-color: #e3ecfb;}
|
||||
|
||||
div#search{ margin-right:3em; }
|
||||
|
||||
div#search, div.input-group, span.input-group-btn, form.fmail{
|
||||
background-color: inherit;
|
||||
border-radius:1.1em;
|
||||
}
|
||||
|
||||
.bi-search{-webkit-text-stroke: 1px;}
|
||||
/*! --- search - button --- #dee2e6; */
|
||||
.btn-custom{background:transparent;}
|
||||
|
||||
div.input-group span.input-group-btn{
|
||||
background-color: inherit;
|
||||
border-radius:17px !important;
|
||||
width:2.3em !important;
|
||||
max-height:2.3em;
|
||||
padding-bottom:0.3em;
|
||||
visibility:visible;
|
||||
z-index:1;
|
||||
}
|
||||
|
||||
div.input-group:not(:hover) {
|
||||
min-width:6em;
|
||||
visibility:hidden;
|
||||
span.input-group-btn{visibility:visible;}
|
||||
}
|
||||
|
||||
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
input.form-control:focus{ border-color: gray;
|
||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 3px rgba(255, 100, 255, 0.5);
|
||||
}
|
||||
|
||||
form.fmail::hover, div.input-group::hover, form.fmail::focus, div.input-group::focus{
|
||||
min-width:12em !important;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
form.fmail > .input-group:hover {
|
||||
background-color: transparent !important;
|
||||
input.form-control {border-color:lightgray; margin-right:3px;}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,63 @@
|
|||
|
||||
function externalLinks() { for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) { var b = c[a];
|
||||
b.getAttribute("href") && b.hostname !== location.hostname && (b.rel = "nofollow noopener") } } ; externalLinks();
|
||||
|
||||
|
||||
// menu -classes
|
||||
//$( "div.gpMenu ul.dropdown-menu li a").addClass("dropdown-item");
|
||||
//$( "div.gpMenu ul.navbar-nav li.nav-item a").addClass("nav-link");
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$("ul.navbar-nav > li > ul.dropdown-menu > li > ul.dropdown-menu").addClass("submenu");
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dropdownMenus = document.querySelectorAll("ul.navbar-nav > li > ul.dropdown-menu > li > ul.dropdown-menu");
|
||||
for (var i = 0; i < dropdownMenus.length; i++) {
|
||||
dropdownMenus[i].classList.add("submenu");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Replace div.gpMenu ul.dropdown-menu li a with dropdown-item class
|
||||
var dropdownItems = document.querySelectorAll("div.gpMenu ul.dropdown-menu li a");
|
||||
for (var i = 0; i < dropdownItems.length; i++) {
|
||||
dropdownItems[i].classList.add("dropdown-item");
|
||||
}
|
||||
|
||||
// Replace div.gpMenu ul.navbar-nav li.nav-item a with nav-link class
|
||||
var navLinks = document.querySelectorAll("div.gpMenu ul.navbar-nav li.nav-item a");
|
||||
for (var i = 0; i < navLinks.length; i++) {
|
||||
navLinks[i].classList.add("nav-link");
|
||||
}
|
||||
|
||||
|
||||
// JavaScript/jQuery code to handle dropdowns
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var dropdownToggle = document.querySelector(".navbar .dropdown-toggle");
|
||||
if (dropdownToggle) {
|
||||
dropdownToggle.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
var dropdownMenu = dropdownToggle.nextElementSibling;
|
||||
if (dropdownMenu.style.display === "block") {
|
||||
dropdownMenu.style.display = "none";
|
||||
} else {
|
||||
dropdownMenu.style.display = "block";
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// (c) 2020-2022 Written by Simon Köhler in Panama
|
||||
// github.com/koehlersimon
|
||||
// simon-koehler.com
|
||||
document.addEventListener('click',function(e){
|
||||
// Hamburger menu
|
||||
if(e.target.classList.contains('hamburger-toggle')){
|
||||
e.target.children[0].classList.toggle('active');
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
|
||||
$( "div.gpMenu ul.dropdown-menu li a").addClass("dropdown-item");
|
||||
|
||||
$( "div.gpMenu ul.navbar-nav ul.dropdown-menu ul.dropdown-menu" ).addClass("submenu");
|
||||
$( "div.gpMenu ul.navbar-nav ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu").addClass("submenu");
|
||||
|
||||
$( "div.gpMenu ul.navbar-nav li.nav-item a" ).addClass("nav-link px-3 px-lg-2");
|
||||
$( "div.gpMenu ul:not(.dropdown-menu) li.nav-item.dropdown a:not(.dropdown-item)" ).attr("id","dropdown").attr("data-bs-toggle","dropdown");
|
||||
|
||||
$( "div.gpMenu ul.dropdown-menu").attr("aria-labelledby", "navbarDropdown");
|
||||
$( "div.gpMenu ul.dropdown-menu li").removeClass("nav-item");
|
||||
$( "div.gpMenu ul.dropdown-menu li a").removeClass("nav-link");
|
||||
|
||||
|
||||
/*
|
||||
$(document).ready(function() {
|
||||
if ($(window).width() >= 992) {
|
||||
$('div.offcanvas-body.sidebar ul:last').addClass('dropdown-menu-right').attr('data-bs-popper' , 'none');
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* --from -- https://github.com/engrasel/bs5-offcanvas-menu/ MIT License--- */
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
document.querySelectorAll('.dropdown-menu').forEach(function(element) {
|
||||
element.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
/* --- Copyright (c) 2023 Anil Kumar (https://codepen.io/anil-vinnakoti5/pen/rNZomxX) MIT License --- */
|
||||
|
||||
window.addEventListener("resize", function() {
|
||||
"use strict";
|
||||
window.location.reload();
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
// make it as accordion for smaller screens
|
||||
if (window.innerWidth < 992) {
|
||||
// close all inner dropdowns when parent is closed
|
||||
document.querySelectorAll('.navbar .dropdown').forEach(function(everydropdown) {
|
||||
everydropdown.addEventListener('hidden.bs.dropdown', function() {
|
||||
// after dropdown is hidden, then find all submenus
|
||||
this.querySelectorAll('.submenu').forEach(function(everysubmenu) {
|
||||
// hide every submenu as well
|
||||
everysubmenu.style.display = 'none';
|
||||
});
|
||||
})
|
||||
});
|
||||
document.querySelectorAll('.dropdown-menu a').forEach(function(element) {
|
||||
element.addEventListener('click', function(e) {
|
||||
let nextEl = this.nextElementSibling;
|
||||
if (nextEl && nextEl.classList.contains('submenu')) {
|
||||
// prevent opening link if link needs to open dropdown
|
||||
e.preventDefault();
|
||||
if (nextEl.style.display == 'block') {
|
||||
nextEl.style.display = 'none';
|
||||
} else {
|
||||
nextEl.style.display = 'block';
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
// end if innerWidth
|
||||
});
|
||||
// DOMContentLoaded end
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<?php
|
||||
|
||||
$GP_GETALLGADGETS = true;
|
||||
|
||||
/*
|
||||
$link = common::Link('','%s');
|
||||
gpOutput::Area('header','<h1>'.$link.'</h1>');
|
||||
gpOutput::Area('link_label','<h3>%s</h3>');
|
||||
*/
|
||||
|
||||
/* for user specific entries */
|
||||
|
||||
global $page;
|
||||
$themeDir = dirname($page->theme_path);
|
||||
|
||||
/**
|
||||
* Include current layout settings (examples)
|
||||
*/
|
||||
//$page->head .= '<link rel="stylesheet" type="text/css" href="'.$themeDir.'/assets/css/style.css'.'" />';
|
||||
//include($page->theme_dir . '/' . $page->theme_color . '/settings.php');
|
||||
//$page->head_js[] = $themeDir.'/assets/js/bootnavbar.js';
|
||||
|
||||
$page->head_js[] = $themeDir.'/assets/js/script.js';
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<?php
|
||||
/**
|
||||
* Theme Bootswatch 5 Scss 5.2.3
|
||||
* Typesetter CMS theme template
|
||||
* based on https://bootswatch.com
|
||||
*
|
||||
*/
|
||||
global $page, $config;
|
||||
$path = $page->theme_dir . '/drop_down_menu.php';
|
||||
//include_once($path);
|
||||
common::LoadComponents( 'bootstrap5.3-js','bootstrap-icons' );
|
||||
$lang = isset($page->lang) ? $page->lang : $config['language'];
|
||||
|
||||
/**
|
||||
* If you are using Multi-Language Manager 1.2.3+
|
||||
* and want to use localized $langmessage values in the template,
|
||||
* uncomment the following line
|
||||
*/
|
||||
// common::GetLangFile('main.inc', $lang);
|
||||
|
||||
?><!DOCTYPE html>
|
||||
<html lang="<?php echo $lang; ?>" class="bootstrap-5">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
|
||||
<?php
|
||||
global $page, $config;
|
||||
gpOutput::GetHead();
|
||||
common::LoadComponents( 'bootstrap-icons' );
|
||||
$lang = isset($page->lang) ? $page->lang : $config['language'];
|
||||
?>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<!--[if lte IE 9]>
|
||||
<div class="alert alert-warning">
|
||||
<h3>Bootstrap 4</h3>
|
||||
<p>We’re sorry but Internet Explorer 9 support was dropped as of Bootstrap version 4.</p>
|
||||
</div>
|
||||
<![endif]-->
|
||||
<header class="section-header row text-center">
|
||||
<div class="container col hd1">
|
||||
<?php echo common::Link('', $config['title'], '', 'class="navbar-brand"'); ?>
|
||||
</div>
|
||||
<div class="container col hd2">
|
||||
<?php gpOutput::Get('Extra', 'headx_b53_1'); ?>
|
||||
</div>
|
||||
</header> <!-- section-header.// -->
|
||||
|
||||
|
||||
<nav class="navbar navbar-expand-lg text-body nav-custom shadow-sm sticky-top main-navigation">
|
||||
<div class="container-fluid">
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasGp" aria-expanded="false"
|
||||
aria-label="Toggle navigation" aria-controls = 'offcanvasEx'>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class = 'offcanvas offcanvas-start-lg bg-custom' tabindex = '-1' id = 'offcanvasGp' aria-labelledby = 'offcanvasLabel'>
|
||||
|
||||
<div class = 'offcanvas-header d-flex d-lg-none'>
|
||||
<h5 class = 'offcanvas-title text-white' id = 'offcanvasLabel'>Navbar</h5>
|
||||
<a href='#' class = 'text-reset p-0' data-bs-dismiss = 'offcanvas' aria-label = 'close'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
|
||||
<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
|
||||
</svg>
|
||||
</a> <!--  🗙 ✕ ✖ -->
|
||||
</div>
|
||||
|
||||
<div class="offcanvas-body sidebar pb-3 pb-lg-0" id="main_nav">
|
||||
<?php
|
||||
$GP_ARRANGE = false;
|
||||
$GP_MENU_ELEMENTS = '';
|
||||
// main nav classes
|
||||
$GP_MENU_CLASSES = array(
|
||||
'menu_top' => 'navbar-nav ms-lg-auto mb-2 mb-lg-0 col-sm-9',
|
||||
'a' => 'xy',
|
||||
'selected' => 'active',
|
||||
'selected_li' => '',
|
||||
'childselected' => 'active',
|
||||
'childselected_li' => 'active', // use '' if you do not want 1st-level nav items to indicate that a child item is active
|
||||
'li_' => 'nav-item b1 nav-item-',
|
||||
'li_title' => '',
|
||||
'haschildren' => 'nav-link dropdown-toggle b2', //a
|
||||
'haschildren_li' => 'dropdown b3',
|
||||
'child_ul' => 'dropdown-menu shadow-sm b4',
|
||||
);
|
||||
|
||||
gpOutput::Get('FullMenu'); //top two levels
|
||||
?>
|
||||
|
||||
</div>
|
||||
</div> <!-- navbar-collapse.// -->
|
||||
|
||||
|
||||
|
||||
<div id="search" class="col-md-3 justify-content-end float-right">
|
||||
<?php //search form
|
||||
global $langmessage;
|
||||
$_GET += array('q'=>'');
|
||||
?>
|
||||
|
||||
<form action="<?php echo common::GetUrl( 'special_gpsearch') ?>" method="get" class="fmail">
|
||||
<div class="input-group">
|
||||
<input name="q" type="text" class="form-control" value="<?php echo htmlspecialchars($_GET['q']) ?>"
|
||||
placeholder="<?php echo $langmessage['Search'] ?>">
|
||||
|
||||
<span class="input-group-btn"><button type="submit" class="btn btn-custom" type="button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
||||
class="bi bi-search" viewBox="0 0 16 16">
|
||||
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
|
||||
</svg></button>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div> <!-- search -->
|
||||
|
||||
|
||||
|
||||
</div> <!-- container-fluid.// -->
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
<!-- </div> container // -->
|
||||
|
||||
<main class="pt-1">
|
||||
<section class="container">
|
||||
<?php $page->GetContent(); ?>
|
||||
</section>
|
||||
</main><!-- /.main-content -->
|
||||
|
||||
<footer class="main-footer position-absolute bottom-0 mt-auto">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-lg-4 footer-column footer-column-1">
|
||||
<?php gpOutput::Get('Extra', 'bt5.3_offcan_FootCol_1a'); ?>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-lg-4 footer-column footer-column-2">
|
||||
<?php gpOutput::Get('Extra', 'bt5.3_offcan_FootCol_2a'); ?>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-lg-4 footer-column footer-admin-links">
|
||||
<p> © <?php echo date("Y"); ?> <?php echo $_SERVER["SERVER_NAME"]; ?> </p>
|
||||
 
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
|
||||
<style>svg{fill:#585858}</style><path d="M208 80c0-26.5 21.5-48 48-48h64c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48h-8v40H464c30.9 0 56 25.1 56 56v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H464c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-4.4-3.6-8-8-8H312v40h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H256c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V280H112c-4.4 0-8 3.6-8 8v32h8c26.5 0 48 21.5 48 48v64c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V368c0-26.5 21.5-48 48-48h8V288c0-30.9 25.1-56 56-56H264V192h-8c-26.5 0-48-21.5-48-48V80z"/></svg>
|
||||
|
||||
<?php gpOutput::GetAdminLink(); ?>
|
||||
</div>
|
||||
</div><!-- /.row -->
|
||||
|
||||
</div><!-- /.container -->
|
||||
</footer><!-- /.main-footer -->
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue