Skip to content

Commit

Permalink
npm update, merge with css skin
Browse files Browse the repository at this point in the history
ropalko committed May 1, 2024
1 parent aec5a82 commit 502e5ba
Showing 44 changed files with 13,418 additions and 1,522 deletions.
2 changes: 1 addition & 1 deletion Skeleton.ascx
Original file line number Diff line number Diff line change
@@ -31,7 +31,7 @@
<%@ Register TagPrefix="tosic" TagName="SxcQuickEdit" src="controls/2sxc-quickedit.ascx" %>
<tosic:SxcQuickEdit runat="server" />

<main id="to-shine-page-main">
<main id="theme-page-main">
<div id="ContentPane" runat="server" containertype="G" containername="2shineBS5" containersrc="fullwidthWithPadding.ascx"></div>
</main>

2 changes: 1 addition & 1 deletion controls/LanguageNavigation.ascx
Original file line number Diff line number Diff line change
@@ -31,7 +31,7 @@
</script>

<ul class="to-shine-page-language">
<ul id="theme-page-language" class="d-flex">
<% foreach (var language in LanguagesArray) { %>
<% var lang = language.Split(':'); %>
<% if (ShowLanguageSwitchForLanguage(lang[0]))
3 changes: 2 additions & 1 deletion controls/body-css-classes.ascx
Original file line number Diff line number Diff line change
@@ -19,6 +19,7 @@
base.OnPreRender(e);
HtmlGenericControl body = (HtmlGenericControl)this.Page.FindControl("ctl00$body");
body.Attributes["class"] = GetCssClassesForBody();
body.Attributes["data-bs-theme"] = "default-theme";
}
private string GetCssClassesForBody()
@@ -47,7 +48,7 @@
var nav = Navigation;
if(string.IsNullOrEmpty(nav)) nav = "Right";
return " to-shine-variation-" + layout.ToLower() + " to-shine-mainnav-variation-" + nav.ToLower() + " ";
return " theme-variation-" + layout.ToLower() + " theme-mainnav-variation-" + nav.ToLower() + " ";
}
5 changes: 4 additions & 1 deletion controls/register.ascx
Original file line number Diff line number Diff line change
@@ -13,4 +13,7 @@
more infos on 2sxc quick-edit: https://2sxc.org/en/blog/post/quick-edit-2-add-move-delete-modules-in-preview-touch-capable-for-dnn
--%>
<%@ Register TagPrefix="tosic" TagName="SxcQuickEdit" src="2sxc-quickedit.ascx" %>
<tosic:SxcQuickEdit runat="server" />
<tosic:SxcQuickEdit runat="server" />

<%@ Import Namespace="DotNetNuke.Security.Permissions" %>
<%@ Import Namespace="TabInfo=DotNetNuke.Entities.Tabs.TabInfo" %>
133 changes: 70 additions & 63 deletions controls/theme-body.ascx
Original file line number Diff line number Diff line change
@@ -9,12 +9,14 @@
<%@ Control language="C#" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<!--#include file="register.ascx"-->

<a class="visually-hidden-focusable" rel="nofollow" href="#to-shine-page-main"><%= LocalizeString("SkipLink.MainContent") %></a>
<nav id="to-shine-page-navigation" class="navbar navbar-expand-lg bg-white">
<a class="visually-hidden-focusable" rel="nofollow" href="#theme-page-main"><%= LocalizeString("SkipLink.MainContent") %></a>

<nav id="theme-page-navigation" class="navbar navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="<%= DotNetNuke.Common.Globals.NavigateURL(PortalController.GetCurrentPortalSettings().HomeTabId) %>" title="2shine DNN BS5 2sxc (change this in the theme-body.ascx)">
<img alt="Logo" class="logo img-fluid" src="<%=SkinPath%>images/logo.svg">
</a>

<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
@@ -26,52 +28,46 @@
</a>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>

<div class="offcanvas-body">
<div class="d-flex flex-column justify-content-end align-items-end flex-grow-1">
<div class="d-none d-lg-block">
<dnn:MENU MenuStyle="nav/main" NodeSelector="<%# NavNodeSelector %>" runat="server" />
</div>
<div class="navbar-nav justify-content-end flex-grow-1">
<div class="d-flex flex-column justify-content-lg-end align-items-lg-end">
<div class="d-none d-lg-block">
<dnn:MENU MenuStyle="nav/main" NodeSelector="<%# NavNodeSelector %>" runat="server" />
</div>

<div class="d-block d-lg-none w-100">
<dnn:MENU MenuStyle="nav/main-mobile" NodeSelector="*,0,6" runat="server" />
</div>
<div class="d-block d-lg-none w-100">
<dnn:MENU MenuStyle="nav/main-mobile" NodeSelector="*,0,6" runat="server" />
</div>

<div class="d-flex align-items-center order-lg-first">
<%
if(LocaleController.Instance.GetLocales(0).Count() > 1) {
%>
<ToSic:languagenavigation runat="server" Languages="de-DE:DE,en-US:EN,fr-FR:FR,it-IT:IT" />
<%
}
%>
<%
if (Request.IsAuthenticated) {
%>
<a href="?ctl=logoff" Title="Logoff" class="to-shine-login" target="_self">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 12.2 14.5" style="enable-background:new 0 0 12.2 14.5;" xml:space="preserve">
<g>
<path d="M12.2,8.8v4.4c0,0.7-0.6,1.3-1.3,1.3H1.3c-0.7,0-1.3-0.6-1.3-1.3V8.8c0-0.7,0.6-1.3,1.3-1.3H2V4.7c0-2.3,1.8-4.2,4.1-4.2
s4.2,1.9,4.2,4.2v0.4c0,0.4-0.3,0.7-0.7,0.7H8.8c-0.4,0-0.7-0.3-0.7-0.7V4.7c0-1.1-0.9-2-2-2c-1.1,0-1.9,0.9-1.9,2v2.8h6.8
C11.7,7.5,12.2,8.1,12.2,8.8z"/>
</g>
</svg>
</a>
<%
} else {
%>
<a href="?ctl=login" Title="Login" class="to-shine-login" target="_self">
<svg version="1.1" id="Lock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 12.2 14" style="enable-background:new 0 0 12.2 14;" xml:space="preserve">
<div class="d-flex align-items-center order-lg-first">
<% if(LocaleController.Instance.GetLocales(0).Count() > 1) { %>
<ToSic:languagenavigation runat="server" Languages="de-DE:DE,en-US:EN,fr-FR:FR,it-IT:IT" />
<% } %>

<% if (Request.IsAuthenticated) { %>
<a href="?ctl=logoff" Title="Logoff" class="theme-login" target="_self">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 12.2 14.5" style="enable-background:new 0 0 12.2 14.5;" xml:space="preserve">
<g>
<path d="M12.2,7.4v5.2c0,0.7-0.6,1.3-1.3,1.3H1.3C0.6,14,0,13.4,0,12.7V7.4c0-0.7,0.6-1.3,1.3-1.3H2v-2C2,1.9,3.8,0,6.1,0
s4.2,1.9,4.2,4.2v2h0.7C11.7,6.1,12.2,6.7,12.2,7.4z M8.1,4.2c0-1.1-0.9-2-2-2s-2,0.9-2,2v2h3.9V4.2z"/>
<path d="M12.2,8.8v4.4c0,0.7-0.6,1.3-1.3,1.3H1.3c-0.7,0-1.3-0.6-1.3-1.3V8.8c0-0.7,0.6-1.3,1.3-1.3H2V4.7c0-2.3,1.8-4.2,4.1-4.2
s4.2,1.9,4.2,4.2v0.4c0,0.4-0.3,0.7-0.7,0.7H8.8c-0.4,0-0.7-0.3-0.7-0.7V4.7c0-1.1-0.9-2-2-2c-1.1,0-1.9,0.9-1.9,2v2.8h6.8
C11.7,7.5,12.2,8.1,12.2,8.8z"/>
</g>
</svg>
</a>
<%
}
%>
</svg>
</a>
<% } else { %>
<a href="?ctl=login" Title="Login" class="theme-login" target="_self">
<svg version="1.1" id="Lock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 12.2 14" style="enable-background:new 0 0 12.2 14;" xml:space="preserve">
<g>
<path d="M12.2,7.4v5.2c0,0.7-0.6,1.3-1.3,1.3H1.3C0.6,14,0,13.4,0,12.7V7.4c0-0.7,0.6-1.3,1.3-1.3H2v-2C2,1.9,3.8,0,6.1,0
s4.2,1.9,4.2,4.2v2h0.7C11.7,6.1,12.2,6.7,12.2,7.4z M8.1,4.2c0-1.1-0.9-2-2-2s-2,0.9-2,2v2h3.9V4.2z"/>
</g>
</svg>
</a>
<% } %>
</div>
</div>
</div>

@@ -80,25 +76,26 @@
</div>
</nav>

<div id="to-shine-page-header-pane" class="container-xxl px-0 <%= (HeaderPane.Attributes["class"] ?? "").Contains("DNNEmptyPane") ? "to-shine-header-pane-empty" : "" %>">
<div id="theme-page-header-pane" class="container-xxl px-0 <%= (HeaderPane.Attributes["class"] ?? "").Contains("DNNEmptyPane") ? "theme-header-pane-empty" : "" %>">
<div id="HeaderPane" runat="server" containertype="G" containername="2shineBS5" containersrc="fullwidthWithoutPadding.ascx"></div>
</div>
<main id="to-shine-page-main">

<main id="theme-page-main">
<%
if(ShowBreadcrumb){
%>
<div class="to-shine-page-breadcrumb" aria-label="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<div class="container py-2">
<a class="to-shine-page-breadcrumb-link to-shine-page-breadcrumb-home" aria-current="page" href="<%= DotNetNuke.Common.Globals.NavigateURL(PortalSettings.HomeTabId) %>"><%= LocalizeString("Home.Text") %></a>
<span>&nbsp;&rsaquo;&nbsp;</span><span class="to-shine-page-breadcrumb-trigger display-inline display-md-none"><a aria-current="page">...</a></span>
<dnn:BREADCRUMB runat="server" aria-current="page" Separator="<span>&nbsp;&rsaquo;&nbsp;</span>" CssClass="to-shine-page-breadcrumb-link" RootLevel="0" />
<div class="theme-page-breadcrumb" aria-label="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<div class="container py-1">
<a class="theme-page-breadcrumb-link theme-page-breadcrumb-home" aria-current="page" href="<%= DotNetNuke.Common.Globals.NavigateURL(PortalSettings.HomeTabId) %>"><%= LocalizeString("Home.Text") %></a>
<span>&nbsp;&rsaquo;&nbsp;</span><span class="theme-page-breadcrumb-trigger display-inline display-md-none"><a aria-current="page">...</a></span>
<dnn:BREADCRUMB runat="server" aria-current="page" Separator="<span>&nbsp;&rsaquo;&nbsp;</span>" CssClass="theme-page-breadcrumb-link" RootLevel="0" />
</div>
</div>
<%
}
%>
<%
if(ShowSidebarNavigation) {
if(ShowSidebarNavigation && HasChildrenInMenu(this.PortalSettings.ActiveTab)) {
%>
<div class="container">
<div class="row">
@@ -108,11 +105,11 @@
%>
<div id="ContentPane" runat="server" containertype="G" containername="2shineBS5" containersrc="default.ascx"></div>
<%
if(ShowSidebarNavigation) {
if(ShowSidebarNavigation && HasChildrenInMenu(this.PortalSettings.ActiveTab)) {
%>
</div>
<div class="col-xs-12 col-lg-3 order-lg-1 ly-col-leftpane">
<div id="to-shine-nav-sub" class="d-none d-sm-block">
<div id="theme-nav-sub" class="d-none d-sm-block">
<dnn:MENU MenuStyle="nav/sub" NodeSelector="+0,0,2" runat="server" />
</div>
</div>
@@ -121,7 +118,7 @@
<%
}
%>
<a id="to-shine-to-top" href="#" title="Nach oben" rel="nofollow">
<a id="theme-to-top" href="#" title="Nach oben" rel="nofollow" class="d-flex align-items-center justify-content-center rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="19.032" height="20.034" viewBox="0 0 19.032 20.034">
<g id="Group_2" data-name="Group 2" transform="translate(-1055.984 -551.276)">
<path id="Path_2" data-name="Path 2" d="M8.1,16.2,0,8.1,8.1,0" transform="translate(1073.602 552.69) rotate(90)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2"/>
@@ -130,9 +127,10 @@
</svg>
</a>
</main>
<footer id="to-shine-page-footer">

<footer id="theme-page-footer" class="footer">
<div class="container py-4 d-flex justify-content-md-between flex-column flex-md-row text-white">
<ul class="to-shine-footer-address" itemscope itemtype="http://schema.org/LocalBusiness">
<ul class="theme-footer-address d-flex" itemscope itemtype="http://schema.org/LocalBusiness">
<li>
<strong itemprop="name">2shine DNN BS5 2sxc </strong>
</li>
@@ -149,24 +147,29 @@
<span data-madr1="shine" data-madr2="example" data-madr3="com" data-linktext=""></span>
</li>
</ul>
<div class="to-shine-footer-imprint">
<dnn:login id="DnnLogin" cssclass="to-shine-page-login d-none d-lg-inline-flex" rel="nofollow" runat="server" />
<div class="theme-footer-imprint">
<dnn:login id="DnnLogin" cssclass="theme-page-login d-none d-lg-inline-flex" rel="nofollow" runat="server" />
<%--
Terms and Privacy Links are set in "Site Settings" > "Site Behavior"
--%>
<a href="<%= DotNetNuke.Common.Globals.NavigateURL(PortalController.GetCurrentPortalSettings().PrivacyTabId) %>" title="<%= LocalizeString("Imprint.Text") %>"><%= LocalizeString("Imprint.Text") %></a> |
<a href="<%= DotNetNuke.Common.Globals.NavigateURL(PortalController.GetCurrentPortalSettings().TermsTabId) %>" title="<%= LocalizeString("Privacy.Text") %>"><%= LocalizeString("Privacy.Text") %></a>
</div>
<a href="<%= DotNetNuke.Common.Globals.NavigateURL(PortalController.GetCurrentPortalSettings().TermsTabId) %> title="<%= LocalizeString("Imprint.Text") %>"><%= LocalizeString("Imprint.Text") %></a> |
<a href="<%= DotNetNuke.Common.Globals.NavigateURL(PortalController.GetCurrentPortalSettings().PrivacyTabId) %>" title="<%= LocalizeString("Privacy.Text") %>"><%= LocalizeString("Privacy.Text") %></a> </div>
</div>
</footer>

<!-- include files -->


<dnn:DnnCssInclude runat="server" FilePath="dist/dnn-default.min.css" Priority="99" PathNameAlias="SkinPath" HtmlAttributesAsString="rel:'stylesheet preload', as:'style'" />
<dnn:DnnCssInclude runat="server" FilePath="dist/theme.min.css" Priority="100" PathNameAlias="SkinPath" HtmlAttributesAsString="rel:'stylesheet preload', as:'style'" />
<dnn:DnnCssInclude runat="server" FilePath="theme/theme.css" Priority="98" PathNameAlias="SkinPath" HtmlAttributesAsString="rel:'stylesheet preload', as:'style'" />

<dnn:DnnCssInclude runat="server" FilePath="dist/styles.min.css" Priority="100" PathNameAlias="SkinPath" HtmlAttributesAsString="rel:'stylesheet preload', as:'style'" />
<dnn:DnnJsInclude runat="server" FilePath="dist/lib/bootstrap.bundle.min.js" ForceProvider="DnnFormBottomProvider" Priority="100" PathNameAlias="SkinPath" HtmlAttributesAsString="defer, async" />
<dnn:DnnJsInclude runat="server" FilePath="dist/theme.min.js" ForceProvider="DnnFormBottomProvider" Priority="130" PathNameAlias="SkinPath" HtmlAttributesAsString="defer, async" />
<dnn:DnnJsInclude runat="server" FilePath="dist/scripts.min.js" ForceProvider="DnnFormBottomProvider" Priority="130" PathNameAlias="SkinPath" HtmlAttributesAsString="defer, async" />

<dnn:DnnCssExclude runat="server" Name="dnndefault" />


<script runat="server">
protected bool IsHome = false;
@@ -202,4 +205,8 @@
}
}
private string _resPath;
private static bool HasChildrenInMenu(TabInfo tab) {
return tab.HasChildren && TabController.GetTabsByParent(tab.TabID, tab.PortalID).Any(t => t.IsVisible && !t.IsDeleted && TabPermissionController.CanViewPage(t));
}
</script>
118 changes: 118 additions & 0 deletions dist/scripts.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions dist/scripts.min.js.map
10,800 changes: 10,800 additions & 0 deletions dist/styles.min.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/styles.min.css.map

Large diffs are not rendered by default.

3 changes: 0 additions & 3 deletions dist/theme.min.css

This file was deleted.

1 change: 0 additions & 1 deletion dist/theme.min.css.map

This file was deleted.

2 changes: 0 additions & 2 deletions dist/theme.min.js

This file was deleted.

1 change: 0 additions & 1 deletion dist/theme.min.js.map

This file was deleted.

22 changes: 11 additions & 11 deletions landingpage.ascx
Original file line number Diff line number Diff line change
@@ -31,13 +31,13 @@
<%@ Register TagPrefix="tosic" TagName="SxcQuickEdit" src="controls/2sxc-quickedit.ascx" %>
<tosic:SxcQuickEdit runat="server" />

<a class="visually-hidden-focusable" rel="nofollow" href="#to-shine-page-main"><%= LocalizeString("SkipLink.MainContent") %></a>
<header id="to-shine-page-header">
<a class="visually-hidden-focusable" rel="nofollow" href="#theme-page-main"><%= LocalizeString("SkipLink.MainContent") %></a>
<header id="theme-page-header">
<div class="container d-flex justify-content-between align-items-center py-3">
<a class="logo" href="<%= DotNetNuke.Common.Globals.NavigateURL(PortalController.GetCurrentPortalSettings().HomeTabId) %>" title="2shine DNN BS5 2sxc (change this in the theme-body.ascx)">
<img alt="Logo" class="img-fluid" src="<%=SkinPath%>images/logo.svg">
</a>
<div class="to-shine-mobile-hamburger" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStart" aria-controls="offcanvasStart" title="Menu">
<div class="theme-mobile-hamburger" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStart" aria-controls="offcanvasStart" title="Menu">
<div>
<span></span>
<span></span>
@@ -63,7 +63,7 @@
<%
if(DotNetNuke.Security.PortalSecurity.IsInRoles(PortalSettings.AdministratorRoleName)) {
%>
<a href="?ctl=logoff" Title="Logoff" class="to-shine-login" target="_self">
<a href="?ctl=logoff" Title="Logoff" class="theme-login" target="_self">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 12.2 14.5" style="enable-background:new 0 0 12.2 14.5;" xml:space="preserve">
<g>
@@ -76,7 +76,7 @@
<%
} else {
%>
<a href="?ctl=login" Title="Login" class="to-shine-login" target="_self">
<a href="?ctl=login" Title="Login" class="theme-login" target="_self">
<svg version="1.1" id="Lock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 12.2 14" style="enable-background:new 0 0 12.2 14;" xml:space="preserve">
<g>
@@ -93,10 +93,10 @@
</div>
</header>

<main id="to-shine-page-main">
<main id="theme-page-main">
<div id="ContentPane" runat="server" containertype="G" containername="2shineBS5" containersrc="fullwidthWithoutPadding.ascx"></div>

<a id="to-shine-to-top" href="#" title="Nach oben" rel="nofollow">
<a id="theme-to-top" href="#" title="Nach oben" rel="nofollow">
<svg xmlns="http://www.w3.org/2000/svg" width="19.032" height="20.034" viewBox="0 0 19.032 20.034">
<g id="Group_2" data-name="Group 2" transform="translate(-1055.984 -551.276)">
<path id="Path_2" data-name="Path 2" d="M8.1,16.2,0,8.1,8.1,0" transform="translate(1073.602 552.69) rotate(90)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2"/>
@@ -105,9 +105,9 @@
</svg>
</a>
</main>
<footer id="to-shine-page-footer">
<footer id="theme-page-footer">
<div class="container py-4 d-flex justify-content-md-between flex-column flex-md-row text-white">
<ul class="to-shine-footer-address" itemscope itemtype="http://schema.org/LocalBusiness">
<ul class="theme-footer-address" itemscope itemtype="http://schema.org/LocalBusiness">
<li>
<strong itemprop="name">2shine DNN BS5 2sxc </strong>
</li>
@@ -124,8 +124,8 @@
<span data-madr1="shine" data-madr2="example" data-madr3="com" data-linktext=""></span>
</li>
</ul>
<div class="to-shine-footer-imprint">
<dnn:login id="DnnLogin" cssclass="to-shine-page-login d-none d-lg-inline-flex" rel="nofollow" runat="server" />
<div class="theme-footer-imprint">
<dnn:login id="DnnLogin" cssclass="theme-page-login d-none d-lg-inline-flex" rel="nofollow" runat="server" />
<%--
Terms and Privacy Links are set in "Site Settings" > "Site Behavior"
--%>
2 changes: 1 addition & 1 deletion nav/blank/template.cshtml
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@

@helper RenderNodes(IList<MenuNode> nodes) {
if (nodes.Count > 0) {
<ul class="@(nodes[0].Depth == 0 ? "to-shine-nav" : "")">
<ul class="@(nodes[0].Depth == 0 ? "theme-nav" : "")">
@foreach (var node in nodes) {
var cssClasses = new List<string>();
cssClasses.Add("nav-" + node.TabId);
2,537 changes: 1,680 additions & 857 deletions package-lock.json

Large diffs are not rendered by default.

24 changes: 12 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "2sic-standard-skin-template",
"version": "05.02.05",
"version": "05.00.01",
"description": "The default skin template for 2sic websites",
"main": "(none)",
"scripts": {
@@ -11,18 +11,18 @@
"license": "MIT",
"repository": "https://github.com/2sic/dnn-theme-2shine-bs5",
"devDependencies": {
"autoprefixer": "^10.4.8",
"css-loader": "^6.7.1",
"mini-css-extract-plugin": "^2.6.1",
"postcss-loader": "^7.0.1",
"sass": "^1.54.5",
"sass-loader": "^13.0.2",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
"autoprefixer": "^10.4.19",
"css-loader": "^7.1.1",
"mini-css-extract-plugin": "^2.9.0",
"postcss-loader": "^8.1.1",
"sass": "^1.75.0",
"sass-loader": "^14.2.1",
"ts-loader": "^9.5.1",
"typescript": "^5.4.5",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4"
},
"dependencies": {
"bootstrap": "^5.2.0"
"bootstrap": "^5.3.3"
}
}
25 changes: 25 additions & 0 deletions src/scss/_custom-maps.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// Add custom colors depending on your style
// $custom-colors: (
// "name": value
// );

// // Merge the maps
// $theme-colors: map-merge(
// $theme-colors,
// $custom-colors
// );

// Optimized and extended spacing for the use of paddings and margins like: px-5 or mb-2
// $spacer: 1rem !default;
// $spacers: () !default;
// $spacers: map-merge((
// 0: 0,
// 1: ($spacer / 2), // 10px
// 2: ($spacer * 1), // 20px
// 3: ($spacer * 1.5), // 30px
// 4: ($spacer * 2), // 40px
// 5: ($spacer * 3), // 60px
// 6: ($spacer * 4), // 80px
// 7: ($spacer * 5), // 100px
// 8: ($spacer * 6) // 120px
// ), $spacers);
10 changes: 10 additions & 0 deletions src/scss/_custom-pages.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/*
If you need page specific customizations - like home uses a different space, put that here
// for all pages where root page has root-123 as body class and also pages under that
.root-123 {}
// for a specific page where the body class is tab-123
.tab-123 {}
*/
1 change: 1 addition & 0 deletions src/scss/_custom-variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// TO OVERWRITE BOOTSTRAP VARIABLES YOU CAN USE THE FOLLOWING VARIABLES FILE
6 changes: 0 additions & 6 deletions src/scss/_page-customizations.scss

This file was deleted.

58 changes: 46 additions & 12 deletions src/scss/components/_base-layout.scss
Original file line number Diff line number Diff line change
@@ -1,31 +1,65 @@
@media all {
html {
min-height: 100vh;

body {
overflow-y: scroll;
overflow-x: hidden;
min-height: 100vh;

&.role-admin .to-shine-header-pane-empty {
min-height: 50px
}

form {
form#Form {
min-height: 100vh;
display: flex;
flex-direction: column;
main#to-shine-page-main {

main#theme-page-main {
flex: 1 0 auto;
}
.container {
@include media-breakpoint-up(xxl) {
padding-left: 45px;
padding-right: 45px;

.text-primary {
color: var(--bs-primary) !important;
}

.text-secondary {
color: var(--bs-secondary) !important;
}

a:not(.btn) {
color: var(--bs-link-color);

&:hover {
color: var(--bs-link-hover-color);
}
}
#dnn_ContentPane:last-child .co-container-outer.mb-md-5 {
margin-bottom: 0 !important;

footer {
background-color: var(--theme-bg);

a {
color: var(--bs-link-color);

&:hover {
color: var(--bs-link-hover-color);
}
}

ul {
padding: 0;
list-style: none;

li {
margin-right: 6px;
}
}
}

.container {
@include media-breakpoint-up(xxl) {
padding-left: 48px;
padding-right: 48px;
}
}

div[id^="module-"] {
scroll-margin-top: 150px;
}
54 changes: 21 additions & 33 deletions src/scss/components/_dnn-overrides.scss
Original file line number Diff line number Diff line change
@@ -27,51 +27,41 @@
ol {
margin: 0;
}

ul {
list-style-type: disc;

ul {
list-style-type: circle;
}
}

a.to-shine-page-login,
a.to-shine-page-login:link,
a.to-shine-page-login:visited {
color: $secondary;
font-size: 10px;
}
a.to-shine-page-login:hover {
color: $white;
html body form#Form {
a.theme-page-login,
a.theme-page-login:link,
a.theme-page-login:visited {
color: var(--bs-primary);
font-size: 10px;
}
a.theme-page-login:hover {
color: var(--bs-white);
}
}

#ControlBar_ControlPanel #ServiceImg {
display: none;
}

// ----------------------------------------------------------------------------------------------------
// 9. Final adjustments / tweaking / DNN workarounds

// 9.1 Fix links which look like buttons so the text doesn't get underlined
a.btn-primary.btn-primary {
&:link,
&:visited,
&:hover {
color: #fff;
}
}
a.btn.btn {
&:link,
&:visited,
&:hover {
text-decoration: none;
}
}

// 9.2 Override width of DNNEmptyPane for 2sxc Quick-Edit control (DNN9)
// 9.1 Override width of DNNEmptyPane for 2sxc Quick-Edit control (DNN9)
body:not(.dnnEditState) .DNNEmptyPane {
width: 100%;
}
// Login
body {

// 9.2 Login
html body form#Form {
.dnnLabel {
display: block;
float: none;
@@ -92,8 +82,8 @@
.dnnPrimaryAction,
.dnnFormItem input[type="submit"],
a.dnnPrimaryAction {
border-color: $primary;
background: $primary;
border-color: var(--bs-primary);
background: var(--bs-primary);
box-shadow: none;
color: #fff;
text-shadow: none;
@@ -104,8 +94,8 @@
.dnnPrimaryAction:hover,
.dnnFormItem input[type="submit"]:hover,
a.dnnPrimaryAction:hover {
border-color: $primary;
background: $primary;
border-color: var(--bs-primary);
background: var(--bs-primary);
color: #fff;
}
.dnnFormItem button,
@@ -149,8 +139,6 @@
padding: 0 32px;
}
}


}
}
}
82 changes: 43 additions & 39 deletions src/scss/components/_nav-breadcrumb.scss
Original file line number Diff line number Diff line change
@@ -1,57 +1,61 @@
/* ---------- Breadcrumbs ---------- */
.page-is-home .to-shine-page-breadcrumb {
display: none;
.page-is-home .theme-page-breadcrumb {
display: none;
}
.to-shine-page-breadcrumb {
.theme-page-breadcrumb {
position: sticky;
top: 82px;
z-index: 10;
background:$white;
background: var(--bs-white);

@include media-breakpoint-down(lg) {
top: 58px;
}
.to-shine-page-breadcrumb-link {
color: $gray-600;
white-space: pre-wrap;
font-size: 14px;
padding: 0 5px;
&:hover {
color: $primary;
}
&.to-shine-page-breadcrumb-home {
display:inline;
@include media-breakpoint-up(md) {
display:inline;
}
}
}
.last {
.to-shine-page-breadcrumb-link {
color: $primary;
display: inline-block;
}
}
&.to-shine-page-breadcrumb-shortened {
.to-shine-page-breadcrumb-link {
&.to-shine-page-breadcrumb-home {
display:none;
@include media-breakpoint-up(md) {
display:inline;
}
}
}

.theme-page-breadcrumb-link {
color: var(--bs-secondary) !important;
white-space: pre-wrap;
font-size: 14px;
padding: 0 5px;

&:hover {
color: var(--bs-primary) !important;
}
.to-shine-page-breadcrumb-trigger {
cursor: pointer;
display:inline;

&.theme-page-breadcrumb-home {
display: inline;

@include media-breakpoint-up(md) {
display:none;
display: inline;
}
}
}
}

.last {
.theme-page-breadcrumb-link {
color: var(--bs-primary) !important;
display: inline-block;
}
}

&.theme-page-breadcrumb-shortened {
.theme-page-breadcrumb-link {
&.theme-page-breadcrumb-home {
display: none;

@include media-breakpoint-up(md) {
display: inline;
}
}
}
}

.theme-page-breadcrumb-trigger {
cursor: pointer;
display: inline;

@include media-breakpoint-up(md) {
display: none;
}
}
}
89 changes: 39 additions & 50 deletions src/scss/components/_nav-language.scss
Original file line number Diff line number Diff line change
@@ -1,62 +1,51 @@
@media all {
.to-shine-mainnav-variation-left {
.to-shine-page-language {
li {
&:first-child {
padding-left: 0;
}
}
.theme-mainnav-variation-left {
#theme-page-language {
li {
&:first-child {
padding-left: 0;
}
}
}
}

.to-shine-page-language {
margin: 0;
padding: 0;
display: flex;
#theme-page-language {
list-style: none;
@include media-breakpoint-down(lg) {
padding: 1rem;
padding-right: 0;
}

@include media-breakpoint-down(lg) {
padding: 1rem;
padding-right: 0;
}
li {
padding: 5px;
font-size: 11px;
font-weight: 700;

li {
padding: 5px;
margin: 0;
list-style-type: none;
font-size:11px;
font-weight: 700;

&:first-child {
@include media-breakpoint-down(lg) {
padding-left: 0;
}
}

a, a:focus {
color: $body-color;

@include media-breakpoint-down(lg) {
color: rgba($white, 0.8);
}

&:hover {
color: $primary;
}
}

&.active a {
color: $primary;

@include media-breakpoint-down(lg) {
color: #fff;
}
}
&:first-child {
@include media-breakpoint-down(lg) {
padding-left: 0;
}
}
}

}

a {
color: var(--bs-body-color);

@include media-breakpoint-down(lg) {
color: rgba(var(--bs-white), 0.8);
}

&:hover {
color: var(--bs-primary);
}
}

&.active a {
color: var(--bs-primary);

@include media-breakpoint-down(lg) {
color: #fff;
}
}
}
}
}
14 changes: 3 additions & 11 deletions src/scss/components/_nav-mobile-to-top.scss
Original file line number Diff line number Diff line change
@@ -1,26 +1,18 @@
@media all {
a#to-shine-to-top {
a#theme-to-top {
position: fixed;
bottom: 20px;
right: 25px;
background-color: $primary;
background-color: var(--bs-primary);
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0,0,0,.3);
opacity: 0;
z-index: 100;
transition: opacity 0.5s;
pointer-events: none;

svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

&.to-shine-top-visible {
&.theme-top-visible {
opacity: 1;
pointer-events: auto;
}
238 changes: 67 additions & 171 deletions src/scss/components/_nav.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.to-shine-mainnav-variation-left {
#to-shine-page-navigation {
.theme-mainnav-variation-left {
#theme-page-navigation {
.offcanvas-body {
.align-items-end {
align-items: flex-start !important;
@@ -23,66 +23,45 @@
}
}

#to-shine-page-navigation {
position: sticky;
top: 0;
#theme-page-navigation {
z-index: 801;

.offcanvas-body {
.align-items-end {
@include media-breakpoint-down(lg) {
align-items: flex-start !important;
}
}
&.navbar-expand-lg {
background-color: var(--theme-bg);
}

.navbar-brand {
.logo {
display: block;
width: 200px;
height: auto;
transition: width 0.4s ease-in-out;

@include media-breakpoint-up(xl) {
width: 280px;
}
.logo {
display: block;
height: 37px;
width: auto;
transition: height 0.4s ease-in-out;

@include media-breakpoint-up(xl) {
height: 54px;
}
// svg {
// //If you use an SVG as Logo, you will have to give it a fixed height
// //in this selector, orelse you may experience issues in IE */
// height: 37px;
}

// @include media-breakpoint-up(lg) {
// height: 53px;
// }
// }
.theme-login {
width: 10px;
margin-left: 15px;
margin-top: -4px;
}

.navbar-toggler {
color: $primary;
border-color: $primary;
border: none;
}

.navbar-toggler-icon {
background-image: escape-svg($navbar-light-toggler-icon-bg);
stroke: $primary;
}

.navbar-nav {
@include media-breakpoint-down(lg) {
width: 100%;
}

> .nav-item {

@include media-breakpoint-down(lg) {
border-bottom: 1px solid #e5e5e5;
}
}

.nav-link {
color: $body-color;
font-weight: bold;
color: var(--bs-nav-link-color);

@include media-breakpoint-up(lg) {
padding-left: 0.5rem;
@@ -91,84 +70,26 @@
}

&:hover {
color: #fff;
color: white;

@include media-breakpoint-up(lg) {
color: $primary;
color: var(--bs-nav-link-hover-color);
}
}

&.active {
color: #fff;
color: var(--bs-white);

@include media-breakpoint-up(lg) {
color: $primary;
color: var(--bs-nav-link-hover-color);
}
}

@include media-breakpoint-down(lg) {
color: rgba($white, 0.8);
color: color-mix(in srgb,var(--bs-white), transparent 70%);

&.active {
color: #fff
}

}
&.dropdown-toggle:after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.2em solid!important;
border-right: 0.2em solid transparent!important;
border-bottom: 0;
border-left: 0.2em solid transparent!important;
}
}

> .last{
.nav-link {
padding-right: 0;
}
}
}

.navbar-nav.nav-top {
@include media-breakpoint-down(lg) {
width: 100%;
}

> .nav-item {
@include media-breakpoint-down(lg) {
border-bottom: 1px solid #e5e5e5;
}
}

.nav-link {
color: $gray-600;
font-weight: bold;
@include media-breakpoint-up(lg) {
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 14px;
}
@include media-breakpoint-up(xl) {
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 16px;
}

&:hover {
color: $primary;
}
&.active {
color: $primary;
}

@include media-breakpoint-down(lg) {
color: rgba($white, 0.8);

&.active {
color: #fff
color: var(--bs-white);
}

}
@@ -193,7 +114,7 @@

@include media-breakpoint-down(lg) {
.offcanvas-body {
background-color: $primary;
background-color: var(--bs-primary);
padding: 0;

.navbar-nav {
@@ -206,68 +127,61 @@
}

.dropdown-menu {
background-color: rgba($black, 0.4);
background-color: color-mix(in srgb,var(--bs-black), transparent 40%);
border-radius: 0;
border-left: none;
padding: 0;
margin-top: 0;

.nav-item {
border-bottom: 1px solid rgba($primary, 1);
border-bottom: 1px solid var(--bs-primary);

.dropdown-item {
color: rgba($white, 0.8);
color: color-mix(in srgb,var(--bs-white), transparent 80%);
font-size: 20px;
padding: .5rem 1rem;

&:hover, &.active {
background-color: rgba($black, 0.4);
background-color: color-mix(in srgb,var(--bs-black), transparent 40%);
color: #fff;
}
}
}
}
}
}

.to-shine-login {
width: 10px;
margin-left: 15px;
margin-top: -4px;
}

.nav-item-sub-opener {
position: absolute;
top: 0px;
right: 0;
height: 46px;
width: 40px;
text-align: center;
cursor: pointer;
color: #fff;
background: rgba(0,0,0,.3);
display: flex;
align-items: center;
justify-content: center;


&:after {
content: "+";
border: none;
font-size: 20px;
font-family: sans-serif;
color: hsla(0,0%,100%,.8);
}

&.show {
.nav-item-sub-opener {
position: absolute;
top: 0px;
right: 0;
height: 46px;
width: 40px;
text-align: center;
cursor: pointer;
color: #fff;
background: rgba(0,0,0,.3);
display: flex;
align-items: center;
justify-content: center;

&:after {
content: "-";
content: "+";
border: none;
font-size: 20px;
font-family: sans-serif;
color: hsla(0,0%,100%,.8);
}
}
}

&.show {
&:after {
content: "-";
}
}
}
}
}

#to-shine-nav-sub {
#theme-nav-sub {
.nav-item-sub-opener {
position: absolute;
top: 0px;
@@ -289,16 +203,17 @@

&:after {
content: "+";
color: $primary;
color: var(--bs-primary);
}
}

.ul-collapse {
background-color: rgba($primary, 0.1);
background-color: color-mix(in srgb,var(--bs-primary), transparent 10%);
list-style: none;
padding-left: 0;

.nav-link {
color: #fff;
padding-left: 15px;
}
}
@@ -310,7 +225,6 @@
.navbar-nav .nav-item:not(.disabled):hover .dropdown-menu { display: block; opacity: 1; visibility: visible; }
.navbar-nav .nav-item.last .dropdown-menu { right:0px; }


.dropdown-menu {
max-width: 250px;
width:100%;
@@ -319,36 +233,18 @@
transform: translateY(10px);
transition: all .4s ease-in-out;
border-radius: 8px;

background-color: white;

.dropdown-item {
white-space: normal;
border-radius: 8px;
transition:background-color .3s ease-in-out, color .3s ease-in-out;
padding: 8px 12px;

&:hover {
background-color: lighten($primary, 60%);
color: $body-color!important;
&:hover, &.active {
background-color: color-mix(in srgb,var(--bs-primary), transparent 50%);
color: var(--bs-body-color) !important;
}
}

}
}

@keyframes slideIn {
0% {
transform: translateY(1rem);
opacity: 0;
}

100% {
transform: translateY(0rem);
opacity: 1;
}

0% {
transform: translateY(1rem);
opacity: 0;
}
}
25 changes: 5 additions & 20 deletions src/scss/components/_typography.scss
Original file line number Diff line number Diff line change
@@ -1,44 +1,29 @@
// Import fonts from google
// 2016-12-05 2rm changed include to default.ascx (caused issues with ClientDependency)
// @import url(https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700);

@media all {
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $font-family-sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {

h1, h2, h3, h4, h5, h6 {
br {
@include media-breakpoint-down(md) {
content: "";
}

&:after {
@include media-breakpoint-down(md) {
content: " ";
}
}
}
}

body {
strong {
font-weight: 700;
}

ul {
list-style-type: disc;
li {

}
}
}

}
28 changes: 0 additions & 28 deletions src/scss/layout-variations/_variation-centered.scss

This file was deleted.

51 changes: 0 additions & 51 deletions src/scss/layout-variations/_variation-floatwideheader.scss

This file was deleted.

19 changes: 0 additions & 19 deletions src/scss/layout-variations/_variation-fullscreen.scss

This file was deleted.

24 changes: 0 additions & 24 deletions src/scss/layout-variations/_variation-landingpage.scss

This file was deleted.

29 changes: 29 additions & 0 deletions src/scss/layouts/_layout-centered.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
@media all {
/*layout centered*/
body.theme-variation-centered {
header {
background: transparent;

.container {
background: var(--bs-white);
}
}

main#theme-page-main,
#theme-page-header-pane,
footer#theme-page-footer,
nav#theme-page-navigation {
background: var(--bs-white);
width: 100%;
margin: 0 auto;

@include media-breakpoint-up(xxl) {
max-width: 1320px;
}
}

footer#theme-page-footer {
background-color: var(--theme-bg);
}
}
}
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
@media all {
body.to-shine-variation-default {
#to-shine-page-header-pane {
body.theme-variation-default {
#theme-page-header-pane {
margin-top:0px;
@include media-breakpoint-up(xxl) {
margin-top:50px;
}
}
main#to-shine-page-main,
footer#to-shine-page-footer {
main#theme-page-main,
footer#theme-page-footer {
background-color: var(--bs-white);
width:100%;
margin: 0 auto;
background-color:$white;

@include media-breakpoint-up(xxl) {
max-width: 1320px;
}
}
footer#to-shine-page-footer {
background: rgb(0,131,201);
background: linear-gradient(90deg, rgba(0,131,201,1) 0%, rgba(88,190,187,1) 100%);

footer#theme-page-footer {
background-color: var(--theme-bg);

@include media-breakpoint-up(xxl) {
margin-bottom:60px;
}
53 changes: 53 additions & 0 deletions src/scss/layouts/_layout-floatwideheader.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
@media all {
/*layout floatwideheader*/
body.theme-variation-floatwideheader {
&.page-2650 {
main#theme-page-main {
@include media-breakpoint-up(xl) {
margin-top: -10vh!important;
}
}
}
main#theme-page-main {
@include media-breakpoint-up(xl) {
margin-top: -5vh !important;
}
}

main#theme-page-main,
footer#theme-page-footer {
background: var(--bs-white);
width: 100%;
margin: 0 auto;
position:relative;

@include media-breakpoint-up(xxl) {
max-width: 1320px;
}
}

nav#theme-page-navigation,
#theme-page-header-pane {
max-width: 1600px;
width: 100%;
margin: 0 auto;
background: var(--bs-white);

&.theme-header-pane-empty {
@include media-breakpoint-up(lg) {
min-height: 300px;
background: var(--bs-secondary);
background: linear-gradient(0deg, color-mix(in srgb,var(--bs-secondary), transparent 100%) 0%, color-mix(in srgb,var(--bs-secondary),#fff 10%) 100%);
}
}
}

footer#theme-page-footer {
background-color: var(--theme-bg);

@include media-breakpoint-up(xxl) {
margin-bottom: 60px;
}
}
}
}
16 changes: 16 additions & 0 deletions src/scss/layouts/_layout-fullscreen.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*layout fullscreen*/
@media all {
html {
body.theme-variation-fullscreen {
background-color: var(--bs-white);

form {
#theme-page-header-pane {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
}
}
}
}
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
@media all {
/* Logo left */ /* Logo right */
body.to-shine-mainnav-variation-left {
nav#to-shine-page-navigation {
body.theme-mainnav-variation-left {
nav#theme-page-navigation {
.container {
@include media-breakpoint-up(lg) {
flex-direction: row-reverse;
}
}
}
}

/* header centered */
body.to-shine-mainnav-variation-center {
nav#to-shine-page-navigation {
body.theme-mainnav-variation-center {
nav#theme-page-navigation {
> .container {
@include media-breakpoint-up(lg) {
flex-direction: column !important;
19 changes: 19 additions & 0 deletions src/scss/layouts/_layout-landingpage.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
@media all {
/*layout full*/
body.theme-variation-landingpage {
background: var(--bs-white);

nav#theme-page-navigation {
background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%);
position: fixed;
top:0;
left:0;
width:100%;
}

.theme-background-container {
overflow: hidden;
}
}
}

89 changes: 89 additions & 0 deletions src/scss/styles.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
// Check out Sass Customization: https://getbootstrap.com/docs/5.3/customize/sass/

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../../node_modules/bootstrap/scss/_functions.scss";

// 2. Include any default variable overrides here
@import "custom-variables.scss";

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../../node_modules/bootstrap/scss/_variables.scss";
@import "../../node_modules/bootstrap/scss/_variables-dark.scss";

// 4. Include any default map overrides here
@import "custom-maps.scss";

// 5. Include remainder of required parts
@import "../../node_modules/bootstrap/scss/_maps.scss";
@import "../../node_modules/bootstrap/scss/_mixins.scss";
@import "../../node_modules/bootstrap/scss/_utilities.scss";

// 6. Optionally include any other parts as needed
@import "../../node_modules/bootstrap/scss/_root.scss";
@import "../../node_modules/bootstrap/scss/_reboot.scss";
@import "../../node_modules/bootstrap/scss/_type.scss";
@import "../../node_modules/bootstrap/scss/_images.scss";
@import "../../node_modules/bootstrap/scss/_containers.scss";
@import "../../node_modules/bootstrap/scss/_grid.scss";
@import "../../node_modules/bootstrap/scss/_helpers.scss";
@import "../../node_modules/bootstrap/scss/_tables.scss";
@import "../../node_modules/bootstrap/scss/_forms.scss";
@import "../../node_modules/bootstrap/scss/_buttons.scss";
@import "../../node_modules/bootstrap/scss/_dropdown.scss";
@import "../../node_modules/bootstrap/scss/_nav.scss";
@import "../../node_modules/bootstrap/scss/_navbar.scss";
@import "../../node_modules/bootstrap/scss/_breadcrumb.scss";
@import "../../node_modules/bootstrap/scss/_pagination.scss";
@import "../../node_modules/bootstrap/scss/_badge.scss";
@import "../../node_modules/bootstrap/scss/_alert.scss";
@import "../../node_modules/bootstrap/scss/_close.scss";
@import "../../node_modules/bootstrap/scss/_offcanvas.scss";
@import "../../node_modules/bootstrap/scss/_transitions.scss";
// @import "../../node_modules/bootstrap/scss/_button-group.scss";
// @import "../../node_modules/bootstrap/scss/_placeholders.scss";
// @import "../../node_modules/bootstrap/scss/_popover.scss";
// @import "../../node_modules/bootstrap/scss/_card.scss";
// @import "../../node_modules/bootstrap/scss/_accordion.scss";
// @import "../../node_modules/bootstrap/scss/_progress.scss";
// @import "../../node_modules/bootstrap/scss/_list-group.scss";
// @import "../../node_modules/bootstrap/scss/_toasts.scss";
// @import "../../node_modules/bootstrap/scss/_modal.scss";
// @import "../../node_modules/bootstrap/scss/_tooltip.scss";
// @import "../../node_modules/bootstrap/scss/_carousel.scss";
// @import "../../node_modules/bootstrap/scss/_spinners.scss";


// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../../node_modules/bootstrap/scss/utilities/api.scss";


// 8. Add additional custom code here
// Fonts / typography
@import "components/typography";

// Layout styles, body, html, fluid, etc.
@import "components/base-layout";

// DNN Overrides
@import "components/dnn-overrides";

// Navigations / Menus
@import "components/nav";
@import "components/nav-mobile-to-top";
@import "components/nav-language";
@import "components/nav-breadcrumb";

// ----------------------------------------------------------------------------------------------------
// Layouts
@import "layouts/layout-default";
@import "layouts/layout-centered";
@import "layouts/layout-floatwideheader";
@import "layouts/layout-fullscreen";
@import "layouts/layout-landingpage";
@import "layouts/layout-header";

// Page Customizations
// This contains special overrides for specific pages
@import "custom-pages";


85 changes: 0 additions & 85 deletions src/scss/theme.scss

This file was deleted.

90 changes: 90 additions & 0 deletions src/ts/scripts.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
/* Open all PDF links in a new window */
document.querySelectorAll('a').forEach((linkElem: Element, index) => {
if(linkElem.hasAttribute('href') && linkElem.getAttribute('href').endsWith('.pdf')) {
linkElem.setAttribute('target', '_blank');
}
});

/* mailencrypting */
setTimeout(function () {
let mailElement = document.querySelectorAll('[data-madr1]:not(.madr-done)');

mailElement.forEach((mail: HTMLElement, index) => {
const maddr = mail.getAttribute('data-madr1') + '@' + mail.getAttribute('data-madr2') + '.' + mail.getAttribute('data-madr3');
const linktext = mail.getAttribute('data-linktext') ? mail.getAttribute('data-linktext') : maddr;

const a = document.createElement('a')
a.setAttribute('href', `mailto:${maddr}`)
a.innerHTML = linktext;

if (mail.parentElement) mail.parentElement.appendChild(a);
mail.classList.add('madr-done');
mail.style.display = 'none';
});
}, 500);

/* Go to top button */
if(document.querySelector('#theme-to-top')) {
document.querySelector('#theme-to-top').addEventListener('click', (e) => {
e.preventDefault();

window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
})
}

/* scrolling behavior (to top button / breadcrumb) */
const navheader = document.querySelector('#theme-page-navigation') as HTMLElement;
const navheight = navheader.offsetHeight;
window.addEventListener('scroll', function (event) {
const bc = document.querySelector('.theme-page-breadcrumb');
if(bc != null) {
(bc as HTMLElement).style.top = `${navheader.offsetHeight - 1}px` ;

if (window.scrollY > navheight) {
bc.classList.add('bg-light' , 'shadow');
} else {
bc.classList.remove('bg-light' , 'shadow');
}
}

const toTop = document.querySelector("#theme-to-top");
if(toTop != null) {
/* show / hide scroll to top button */
if (window.scrollY > 200) {
toTop.classList.add('theme-top-visible');
} else {
toTop.classList.remove('theme-top-visible');
}
}

}, false);

/* Breadcrumb */
const bc = document.querySelector('.theme-page-breadcrumb');
if(bc){
const bcALast = document.querySelector('.theme-page-breadcrumb span a:last-child');
if(bcALast) bcALast.classList.add('last');

const bcSpanLast = document.querySelector('.theme-page-breadcrumb span:last-child')
if(bcSpanLast) bcSpanLast.classList.add('last');

const bcSpanLinkChild = document.querySelector('.theme-page-breadcrumb span .theme-page-breadcrumb-link:nth-last-child(3)');
if(bcSpanLinkChild) bcSpanLinkChild.classList.add('second-last');

bc.classList.toggle('theme-page-breadcrumb-shortened',
(document.querySelector('.theme-page-breadcrumb-link') != null || document.querySelectorAll('.theme-page-breadcrumb-link').length > 2)
)

const bcTrigger = document.querySelector('.theme-page-breadcrumb-trigger');
if(bcTrigger) {
bcTrigger.addEventListener('click', () => {
bc.classList.toggle('theme-page-breadcrumb-shortened')
})
}
}


141 changes: 141 additions & 0 deletions theme/theme.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
:root,
[data-bs-theme="default-theme"] {
/* Theme Classes */
--theme-bg: black;

/* BS Main Colors */
--bs-primary: #0060AC;
--bs-secondary: #001D38;
--bs-body-bg: #E5E5E5;
--bs-body-color: #222222;

/* Override Link-Colors */
--bs-nav-link-color: var(--bs-primary);
--bs-link-color: var(--bs-primary);
--bs-link-hover-color: var(--bs-body-color);

/* Font Setting */
--bs-font-sans-serif: "DM Sans", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;

/* Border Radius
--bs-border-radius: 0.375rem;
--bs-border-radius-sm: 0.25rem;
--bs-border-radius-lg: 0.5rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-xxl: 2rem;
*/

/*Shadows
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
*/

/* Bootstrap Default is 24px, if you want to change the gutter use this variable */
/* .row {
--bs-gutter-x: 30px;
} */

/* Main body Color for inner Content */
#theme-page-main {
--bs-body-bg: #fff;
}

/* Main Button-Colors */
.btn-primary {
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);

--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 15%, #000);
--bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 15%, #000);

--bs-btn-active-color: var(--bs-white);
--bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 15%, #000);
--bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 15%, #000);

--bs-btn-disabled-color: var(--bs-white);
--bs-btn-disabled-bg: var(--bs-primary);
--bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
--bs-btn-color: var(--bs-primary);
--bs-btn-bg: var(--bs-white);
--bs-btn-border-color: var(--bs-primary);

--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: var(--bs-primary);
--bs-btn-hover-border-color: var(--bs-primary);

--bs-btn-active-color: var(--bs-white);
--bs-btn-active-bg: var(--bs-primary);
--bs-btn-active-border-color: var(--bs-primary);

--bs-btn-disabled-color: var(--bs-primary);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--bs-secondary);
--bs-btn-border-color: var(--bs-secondary);

--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 15%, #000);
--bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 15%, #000);

--bs-btn-active-color: var(--bs-white);
--bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 15%, #000);
--bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 15%, #000);

--bs-btn-disabled-color: var(--bs-white);
--bs-btn-disabled-bg: var(--bs-secondary);
--bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-outline-secondary {
--bs-btn-color: var(--bs-secondary);
--bs-btn-border-color: var(--bs-secondary);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--bs-secondary);
--bs-btn-hover-border-color: var(--bs-secondary);
--bs-btn-focus-shadow-rgb: 13, 110, 253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: var(--bs-secondary);
--bs-btn-active-border-color: var(--bs-secondary);
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: var(--bs-secondary);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: var(--bs-secondary);
--bs-gradient: none;
}

.footer {
--theme-bg: var(--bs-primary);
--bs-link-color: var(--bs-white);
--bs-link-hover-color: var(--bs-body-color);
}

.navbar {
--theme-bg: var(--bs-white);
}

.navbar-nav {
--bs-nav-link-color: var(--bs-body-color);
--bs-nav-link-hover-color: var(--bs-primary);
--bs-navbar-active-color: var(--bs-primary);
}

.table {
--bs-table-bg: var(--bs-white);
}
}

2 changes: 1 addition & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@
"noImplicitAny": true,
"module": "commonjs",
"lib": ["es6", "dom"],
"target": "es3",
"target": "es5",
"allowJs": true
}
}
8 changes: 4 additions & 4 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -3,10 +3,10 @@ const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
mode: "production",
entry: ['./src/scss/theme.scss', './src/ts/theme.ts'],
mode: "development",
entry: ['./src/scss/styles.scss', './src/ts/scripts.ts'],
output: {
filename: 'theme.min.js',
filename: 'scripts.min.js',
path: path.resolve(__dirname, 'dist'),
assetModuleFilename: 'images/[hash][ext][query]'
},
@@ -27,7 +27,7 @@ module.exports = {
},
plugins: [
new MiniCssExtractPlugin({
filename: 'theme.min.css',
filename: 'styles.min.css',
}),
new webpack.ProgressPlugin(),
],

0 comments on commit 502e5ba

Please sign in to comment.