tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

IMPR: styling improvements

Browse Source
This commit is contained in:
Tony Air 2021-02-20 13:00:59 +07:00
parent 0dc2834870
commit 8b01fef7bc
18 changed files with 590 additions and 749 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
src/html/Elements/Accordion.html
View File

@ -2,105 +2,105 @@
<div class="typography">
Some content ...
</div>
<div id="AccordionExample" class="list-element__container row accordion" data-listelement-count="4">
<div class="element dnadesign__elemental__models__elementcontent block col-md-12 card">
<div class="element-container">
<div class="content-element__content">
<div id="Heading1" class="card-header">
<button
data-target="#Collapse1"
aria-controls="Collapse1"
class="btn btn-link collapsed"
type="button"
data-toggle="collapse"
aria-expanded="false"
>
<h2 class="element__title">Content Header #1</h2>
</button>
</div>
<div id="Collapse1" aria-labelledby="Heading1" data-parent="#AccordionExample" class="collapse">
<div class="card-body">
<div class="typography">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
<div
id="AccordionExample"
class="list-element__container row accordion"
data-listelement-count="4"
>
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Accordion Item #1
</button>
</h2>
<div
id="collapseOne"
class="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent="#AccordionExample"
>
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth
noting that just about any HTML can go within the
<code>.accordion-body</code>, though the transition does limit
overflow.
</div>
</div>
</div>
<div class="element dnadesign__elemental__models__elementcontent block col-md-12 card">
<div class="element-container">
<div class="content-element__content">
<div class="card-header" id="Heading2">
<button
data-target="#Collapse2"
aria-controls="Collapse2"
class="btn btn-link collapsed"
type="button"
data-toggle="collapse"
aria-expanded="false"
>
<h2 class="element__title">Content Header #2</h2>
</button>
</div>
<div id="Collapse2" class="collapse" aria-labelledby="Heading2" data-parent="#AccordionExample">
<div class="card-body">
<div class="typography">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
Accordion Item #2
</button>
</h2>
<div
id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#AccordionExample"
>
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth
noting that just about any HTML can go within the
<code>.accordion-body</code>, though the transition does limit
overflow.
</div>
</div>
</div>
<div class="element dnadesign__elemental__models__elementcontent block col-md-12 card">
<div class="element-container">
<div class="content-element__content">
<div class="card-header" id="Heading3">
<button
data-target="#Collapse3"
aria-controls="Collapse3"
class="btn btn-link collapsed"
type="button"
data-toggle="collapse"
aria-expanded="false"
>
<h2 class="element__title">Content Header #3</h2>
</button>
</div>
<div id="Collapse3" class="collapse" aria-labelledby="Heading3" data-parent="#AccordionExample">
<div class="card-body">
<div class="typography">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
Accordion Item #3
</button>
</h2>
<div
id="collapseThree"
class="accordion-collapse collapse"
aria-labelledby="headingThree"
data-bs-parent="#AccordionExample"
>
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These
classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with
custom CSS or overriding our default variables. It's also worth
noting that just about any HTML can go within the
<code>.accordion-body</code>, though the transition does limit
overflow.
</div>
</div>
</div>
<div class="element dnadesign__elemental__models__elementcontent block col-md-12 card">
<div class="element-container">
<div class="content-element__content">
<div id="Heading4" class="card-header">
<button
data-target="#Collapse4"
aria-controls="Collapse4"
class="btn btn-link collapsed"
type="button"
data-toggle="collapse"
aria-expanded="false"
>
<h2 class="element__title">Content Header #2</h2>
</button>
</div>
<div id="Collapse4" class="collapse" aria-labelledby="Heading4" data-parent="#AccordionExample">
<div class="card-body">
<div class="typography">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

265
src/html/Elements/Content.html
View File

@ -1,112 +1,171 @@
<div class="content-element__content ">
<div class="content-element__content">
<h2 class="content-element__title">Content Demo</h2>
<div class="typography">
<h3><i class="fas fa-search"></i> Quick start</h3>
<ol>
<li>
<p>Clone quick start repository</p>
<pre>git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git</pre>
</li>
<li>
<p>Install npm packages</p>
<pre>
<pre>
git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git</pre
>
</li>
<li>
<p>Install npm packages</p>
<pre>
cd ./webpack-bootstrap-ui-kit-quick-start.git
npm install
</pre>
</li>
<li>
<p>Edit ./src files</p>
</li>
<li>
<p>Start development server at https://127.0.0.1:8001/:</p>
<pre>yarn start</pre>
<p>Compile:</p>
<pre>yarn build</pre>
</li>
</ol>
<h2><i class="fas fa-search"></i> Header #2 <i class="fas fa-search"></i></h2>
<p><img src="https://placehold.it/200x200" alt="Test Image" class="image right" />Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<ol>
<li>
First
<ul>
<li>First</li>
<li>
Second
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</li>
<li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li>
</ul>
</li>
<li>
<p>{paragraph} Second</p>
<p>{paragraph} Second #2</p>
</li>
<li><p>Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></li>
</ol>
<h2 class="text-center">Table #1: Default</h2>
<table>
<thead>
<tr>
<th>#1</th>
<th>#2</th>
<th>#3</th>
</tr>
</thead>
<tbody>
<tr>
<th>#1-1</th>
<td>#1-2</td>
<td>#1-3</td>
</tr>
<tr>
<td>#2-1</td>
<td>#2-2</td>
<td>#2-3</td>
</tr>
<tr>
<th>#3-1</th>
<td>#3-2</td>
<td>#3-3</td>
</tr>
</tbody>
</table>
<p class="text-justify">Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<h2 class="text-center">Table #2: Border-less</h2>
<table class="table-none">
<thead>
<tr>
<th>#1</th>
<th>#2</th>
<th>#3</th>
</tr>
</thead>
<tbody>
<tr>
<th>#1-1</th>
<td>#1-2</td>
<td>#1-3</td>
</tr>
<tr>
<td>#2-1</td>
<td>#2-2</td>
<td>#2-3</td>
</tr>
<tr>
<th>#3-1</th>
<td>#3-2</td>
<td>#3-3</td>
</tr>
</tbody>
</table>
</pre
>
</li>
<li>
<p>Edit ./src files</p>
</li>
<li>
<p>Start development server at https://127.0.0.1:8001/:</p>
<pre>yarn start</pre>
<p>Compile:</p>
<pre>yarn build</pre>
</li>
</ol>
<h2>
<i class="fas fa-search"></i> Header #2
<i class="fas fa-search"></i>
</h2>
<p>
<img
src="https://placehold.it/200x200"
alt="Test Image"
class="image right"
/>Content Text Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
<ol>
<li>
First
<ul>
<li>First</li>
<li>
Second
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</li>
<li>
<p>
Content Text Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also
the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
</li>
</ul>
</li>
<li>
<p>{paragraph} Second</p>
<p>{paragraph} Second #2</p>
</li>
<li>
<p>
Content Text Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem
Ipsum.
</p>
</li>
</ol>
<h2 class="text-center">Responsive Table #1: Default</h2>
<table>
<thead>
<tr>
<th>Header #1</th>
<th>Header #2</th>
<th>Header #3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Header #1">#1-1</td>
<td data-label="Header #2">#1-2</td>
<td data-label="Header #3">#1-3</td>
</tr>
<tr>
<td data-label="Header #1">#2-1</td>
<td data-label="Header #2">#2-2</td>
<td data-label="Header #3">#2-3</td>
</tr>
<tr>
<td data-label="Header #1">#3-1</td>
<td data-label="Header #2">#3-2</td>
<td data-label="Header #3">#3-3</td>
</tr>
</tbody>
</table>
<p class="text-justify">
Content Text Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h2 class="text-center">Responsive Table #2: Border-less</h2>
<table class="table-none">
<thead>
<tr>
<th>Header #1</th>
<th>Header #2</th>
<th>Header #3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Header #1">#1-1</td>
<td data-label="Header #2">#1-2</td>
<td data-label="Header #3">#1-3</td>
</tr>
<tr>
<td data-label="Header #1">#2-1</td>
<td data-label="Header #2">#2-2</td>
<td data-label="Header #3">#2-3</td>
</tr>
<tr>
<td data-label="Header #1">#3-1</td>
<td data-label="Header #2">#3-2</td>
<td data-label="Header #3">#3-3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

42
src/html/Elements/ElementsList.html
View File

@ -3,40 +3,64 @@
Some content ...
</div>
<div class="list-element__container row" data-listelement-count="4">
<div class="element dnadesign__elemental__models__elementcontent block col-md-3">
<div
class="element dnadesign__elemental__models__elementcontent block col-md-3"
>
<div class="element-container">
<div class="content-element__content">
<div class="typography">
<img src="https://placehold.it/300x300" alt="Some kind image" />
<img
src="https://placehold.it/300x300"
alt="Some kind image"
class="w-100"
/>
</div>
</div>
</div>
</div>
<div class="element dnadesign__elemental__models__elementcontent block col-md-3">
<div
class="element dnadesign__elemental__models__elementcontent block col-md-3"
>
<div class="element-container">
<div class="content-element__content">
<div class="typography">
<img src="https://placehold.it/300x300" alt="Some kind image" />
<img
src="https://placehold.it/300x300"
alt="Some kind image"
class="w-100"
/>
</div>
</div>
</div>
</div>
<div class="element dnadesign__elemental__models__elementcontent block col-md-3">
<div
class="element dnadesign__elemental__models__elementcontent block col-md-3"
>
<div class="element-container">
<div class="content-element__content">
<div class="typography">
<img src="https://placehold.it/300x300" alt="Some kind image" />
<img
src="https://placehold.it/300x300"
alt="Some kind image"
class="w-100"
/>
</div>
</div>
</div>
</div>
<div class="element dnadesign__elemental__models__elementcontent block col-md-3">
<div
class="element dnadesign__elemental__models__elementcontent block col-md-3"
>
<div class="element-container">
<div class="content-element__content">
<div class="typography">
<img src="https://placehold.it/300x300" alt="Some kind image" />
<img
src="https://placehold.it/300x300"
alt="Some kind image"
class="w-100"
/>
</div>
</div>
</div>
</div>
</div>
</div>

20
src/html/Footer.html
View File

@ -19,8 +19,11 @@
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-8 d-flex">
<div class="copyright">Copyright &copy; 2019 - Tony Air (A2nt) Webpack Bootstrap 4 UI Kit</div>
<div class="col-sm-8 d-md-flex">
<div class="copyright">
Copyright &copy; 2019 - Tony Air (A2nt) Webpack Bootstrap 4
UI Kit
</div>
<nav class="footer-nav">
<ul class="list-inline d-flex">
<li>
@ -32,11 +35,16 @@
</ul>
</nav>
</div>
<div class="col-sm-4 text-right">
<div class="credits footer__credits">
<a href="https://github.com/a2nt" target="_blank" rel="nofollow"><span>Developed by</span> Tony Air</a>
<div class="col-sm-4">
<div class="text-end credits footer__credits">
<a
href="https://github.com/a2nt"
target="_blank"
rel="nofollow"
><span>Developed by</span> Tony Air</a
>
</div>
</div>
</div>
</div>
</div>
</div>

7
src/html/_components/LoadingSpinner.html
View File

@ -103,13 +103,6 @@
transform: translate(19px, 0);
}
}
html,
body {
color: #212121;
}
a {
color: #007bff;
}
</style>
<div id="PageLoading">

18
src/index.html
View File

@ -6,20 +6,30 @@
<meta name="ping" content="/Security/ping" />
<meta name="api_url" content="<%= GRAPHQL_URL %>" />
<meta name="api_static_domain" content="<%= STATIC_URL %>" />
<meta name="swversion" content="<%= SWVERSION %>" />
<base href="<%= BASE_HREF %>" />
</head>
<body data-default-lng="0" data-default-lat="0">
<%= require('html-loader!./html/_components/LoadingSpinner.html') %> <%=
require('html-loader!./html/_components/Alerts.html') %> <%=
require('html-loader!./html/First.html') %> <%=
require('html-loader!./html/_components/Flyout.html') %>
<div class="wrapper">
<%= require('html-loader!./html/_components/LoadingSpinner.html') %>
<%= require('html-loader!./html/_components/Alerts.html') %> <%=
require('html-loader!./html/First.html') %> <%=
require('html-loader!./html/_components/Flyout.html') %>
<header id="Header" class="stiky-top">
<%= require('html-loader!./html/Navigation.html') %>
</header>
<main id="MainContent" class="page-content">
<div class="elemental-area">
<div class="element page-header-element">
<div class="element-container container">
<h1 class="page-header">
Webpack Bootstrap 4 UI Demo
</h1>
</div>
</div>
<!-- Slider -->
<section
id="Slider"

1
src/js/_components/_main.js
View File

@ -7,6 +7,7 @@ import './_main.touch';
import './_main.online';
import './_main.css-screen-size';
import './_main.links';
import './_main.lazy-images';
import SpinnerUI from './_main.loading-spinner';
const MainUI = ((W) => {

30
src/js/app.js
View File

@ -1,7 +1,7 @@
'use strict';
// mock service worker
/*if (process.env.NODE_ENV === 'development') {
if (process.env.NODE_ENV === 'development') {
// mocking service worker
const regeneratorRuntime = require('regenerator-runtime');
const { worker } = require('../mocks/browser');
worker.start({
@ -12,20 +12,20 @@
},
},
});
}*/
// caching service worker
if ('serviceWorker' in navigator) {
const baseHref = (document.getElementsByTagName('base')[0] || {}).href;
const version = (document.querySelector('meta[name="swversion"]') || {})
.content;
if (baseHref) {
navigator.serviceWorker
.register(`${baseHref}app_sw.js?v=${version}`)
.then(() => {
console.log('SW: Registered');
});
}
// caching service worker (set injectClient: false at webpack.config.serve.js)
/*if ('serviceWorker' in navigator) {
const baseHref = (document.getElementsByTagName('base')[0] || {}).href;
const version = (document.querySelector('meta[name="swversion"]') || {})
.content;
if (baseHref) {
navigator.serviceWorker
.register(`${baseHref}app_sw.js?v=${version}`)
.then(() => {
console.log('SW: Registered');
});
}
}*/
}
//import $ from 'jquery';

77
src/scss/_components/_ui.elemental.scss
View File

@ -8,47 +8,47 @@
// add top/bottom paddings for basic elements
.element {
position: relative;
padding-top: $grid-gutter-element-height;
padding-bottom: $grid-gutter-element-height;
margin-top: $element-spacer-y;
margin-bottom: $element-spacer-y;
padding-top: $element-spacer-y;
padding-bottom: $element-spacer-y;
&:first-child {
padding-top: 0;
margin-top: 0;
}
&:last-child {
padding-bottom: 0;
}
// remove paddings of the slideshow
&.dynamic__elements__image__elements__elementimage,
&.site__elements__sliderelement {
padding-top: 0;
padding-bottom: 0;
margin-bottom: $grid-gutter-element-height/2;
}
// remove paddings for elemental list cuz inner elements will have paddings
&.dnadesign__elementallist__model__elementlist {
padding-top: 0;
padding-bottom: 0;
.element {
padding-top: $grid-gutter-element-height/2;
padding-bottom: $grid-gutter-element-height/2;
}
.dynamic__elements__image__elements__elementimage,
.site__elements__sliderelement {
padding-top: $grid-gutter-element-height/2;
padding-bottom: $grid-gutter-element-height/2;
}
margin-bottom: 0;
}
// Sidebar-like elements
&.secondary {
padding-top: ($grid-gutter-element-height / 2);
padding-bottom: ($grid-gutter-element-height / 2);
padding-top: ($element-reduced-spacer-y);
padding-bottom: ($element-reduced-spacer-y);
}
}
// hide default page title cuz elemental object will be used to display titles
&.page-header-element {
display: none;
// remove paddings of the slideshow
.dynamic__elements__image__elements__elementimage,
.site__elements__sliderelement {
padding-top: 0;
padding-bottom: 0;
}
// remove paddings for elemental list cuz inner elements will have paddings
.dnadesign__elementallist__model__elementlist {
.element {
padding-top: $element-reduced-spacer-y;
padding-bottom: $element-reduced-spacer-y;
margin-top: $element-reduced-spacer-y;
margin-bottom: $element-reduced-spacer-y;
}
}
.site__elements__accordion {
> .element-container > .accordion {
margin-top: $element-reduced-spacer-y;
//padding-top: $element-reduced-spacer-y;
}
}
@ -56,8 +56,8 @@
.page-content-sidebar {
// Sidebar elements
.element {
padding-top: ($grid-gutter-element-height / 2);
padding-bottom: ($grid-gutter-element-height / 2);
padding-top: ($element-reduced-spacer-y);
padding-bottom: ($element-reduced-spacer-y);
&:first-child {
padding-top: 0;
}
@ -76,6 +76,15 @@
}
}
// hide default page title cuz elemental object will be used to display titles
.page-header-element {
display: none;
}
.page-header-element:not(.d-block) + .element {
margin-top: 0;
}
// remove containers for child elements
.element {
.elemental-area {
.element {

28
src/scss/_components/_ui.main.graphql.scss
View File

@ -1,28 +0,0 @@
/*
* some basic styles
*/
@import '../_variables';
@import '../_animations';
.loading {
animation: fade 0.5s linear infinite;
}
.graphql-page {
&.response-404 {
filter: grayscale(1);
opacity: 0.5;
cursor: not-allowed;
}
}
.is-offline {
.graphql-page {
&.response-523 {
filter: grayscale(1);
opacity: 0.5;
cursor: not-allowed;
}
}
}

332
src/scss/_components/_ui.main.scss
View File

@ -4,151 +4,28 @@
@import '../_variables';
@import '../_animations';
@import './_ui.main.graphql';
@import './_ui.main.base';
@import './_ui.main.network';
@import './_ui.main.alerts';
@import './_ui.main.mobile';
.meta-MetaWindow {
z-index: 1031;
.meta-nav {
text-decoration: none;
}
}
.pulse {
animation: pulse 0.8s linear infinite;
}
// don't let images be wider than the parent layer
div,
a,
span,
button,
i {
background-repeat: no-repeat;
background-size: contain;
}
iframe,
img {
max-width: 100%;
}
table,
p {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.a {
cursor: pointer;
color: $link-color;
text-decoration: $link-decoration;
&:hover,
&:focus {
text-decoration: $link-hover-decoration;
color: $link-hover-color;
}
}
.a,
a,
[data-toggle],
button,
.btn {
&:hover,
&.active,
&[aria-expanded='true'] {
> .fa,
> .far,
> .fas,
> .fab,
&.fa,
&.far,
&.fas,
&.fab {
transform: rotate(-180deg);
}
}
&:hover,
&[aria-expanded='true'] {
opacity: 0.8;
}
&.disabled {
opacity: 0.5;
cursor: default;
&:hover,
&.active,
&[aria-expanded='true'] {
> .fa,
> .far,
> .fas,
> .fab,
&.fa,
&.far,
&.fas,
&.fab {
transform: rotate(0deg);
}
}
}
}
// exclude bootstrap-table
[data-toggle='table'] {
&:hover,
&.active,
&:focus {
opacity: 1;
}
}
[data-toggle='collapse'] {
&[aria-expanded='true'] {
.accordion-icon {
&:before {
content: '\f068';
}
}
}
}
// transactions
.transition,
a,
a *,
.a,
.a *,
button,
input,
optgroup,
select,
textarea,
.btn,
.btn *,
.dropdown,
.row,
.alert,
.alert *,
.message,
[data-toggle],
[data-toggle] * {
transition: all 0.4s ease;
}
// navs
.navbar-toggler {
transition: transform ease 0.4s;
}
.btn-toolbar {
margin-top: $field-gutter-height;
}
/*
* Extra class definition at _ui.form.basics.scss
*/
// navs
.navbar-toggler-icon {
width: auto;
height: auto;
@ -166,108 +43,6 @@ button.nav-link {
letter-spacing: inherit;
}
// display dropdown on hover + focus
@media (min-width: $full-body-min-width) {
.dropdown-hover {
&:hover,
&:focus {
.dropdown-menu {
display: block;
}
}
}
}
// custom toggler for mobile view
.dropdown {
> .dropdown-toggle-sm {
@media (min-width: $full-body-min-width) {
display: none;
}
}
> .dropdown-toggle-fl {
display: none;
@media (min-width: $full-body-min-width) {
display: inherit;
}
}
@media not all and (hover: none) {
> .dropdown-toggle-touch {
display: inherit;
}
> .dropdown-toggle-notouch {
display: none;
}
}
}
.meta-MetaWindow {
z-index: 1031;
.meta-nav {
text-decoration: none;
}
}
.field {
position: relative;
display: flex;
flex-wrap: wrap;
margin: $field-gutter-height 0;
}
// element col paddings
.col-block {
padding-top: $col-block-gutter-height;
padding-bottom: $col-block-gutter-height;
}
// rewrite btn opacity on hover
.btn {
&:hover,
&.active,
&:focus {
opacity: 1;
}
}
// SS-messages
.alert + .alert {
border-top: 0;
}
/*.message {
@extend .alert;
@extend .alert-info;
display: block;
margin: 0.5rem 0;
}
.message.validation,
.message.required,
.message.error {
@extend .alert;
@extend .alert-danger;
}
.message.required,
.message.error {
@extend .alert;
@extend .alert-danger;
}*/
.list-group-item.active {
a,
.a {
color: $list-group-active-color;
}
}
// dropdown icon
.navbar-toggler {
&[aria-expanded='true'] {
transform: rotate(90deg);
@ -317,32 +92,70 @@ button.nav-link {
}
}
.row,
.row-xs {
> [class^='col-'] > .card {
height: 100%;
.dropdown-item {
white-space: normal;
}
.field {
position: relative;
display: flex;
flex-wrap: wrap;
margin: $form-spacer-y 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.row-xs {
margin-right: -($grid-gutter-xs-width / 2);
margin-left: -($grid-gutter-xs-width / 2);
.btn-toolbar {
margin-top: $form-spacer-y;
}
[class^='col-'] {
padding-left: $grid-gutter-xs-width / 2;
padding-right: $grid-gutter-xs-width / 2;
// rewrite btn opacity on hover
.btn {
&:hover,
&.active,
&:focus {
opacity: 1;
}
}
#ForgotPassword {
margin: 1rem 0;
width: 100%;
// SS-messages
.alert + .alert {
border-top: 0;
}
#BetterNavigator {
display: none;
@media (min-width: map-get($grid-breakpoints,'md')) {
display: block;
/*.message {
@extend .alert;
@extend .alert-info;
display: block;
margin: 0.5rem 0;
}
.message.validation,
.message.required,
.message.error {
@extend .alert;
@extend .alert-danger;
}
.message.required,
.message.error {
@extend .alert;
@extend .alert-danger;
}*/
.list-group-item.active {
a,
.a {
color: $list-group-active-color;
}
}
@ -364,7 +177,14 @@ button.nav-link {
will-change: position, top;
}
#ForgotPassword {
margin: 1rem 0;
width: 100%;
}
#BetterNavigator {
display: none;
a,
button,
div,
@ -372,4 +192,8 @@ button.nav-link {
span {
background-size: auto;
}
@media (min-width: map-get($grid-breakpoints,'md')) {
display: block;
}
}

115
src/scss/_layout.scss
View File

@ -2,61 +2,10 @@
* Your custom style
*/
// shrink elements on scroll
body.shrink {
@media (max-width: map-get($grid-breakpoints, 'lg') - 1) {
padding-top: 100px;
#Header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
}
@media (min-width: map-get($grid-breakpoints, 'lg')) and (max-width: map-get($grid-breakpoints, 'xl') - 1) {
padding-top: 146px;
#Header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
}
}
// sticky footer
body > .wrapper {
min-height: 100%;
min-height: 100vh;
}
@media (min-width: $full-body-min-width) {
/*body {
height: 100%;
min-height: 100%;
}*/
.wrapper {
padding-bottom: $footer-size + $footer-bar-size + $grid-gutter-height /
2;
//padding-top: $grid-gutter-height;
}
.footer {
height: $footer-size + $footer-bar-size + $grid-gutter-height / 2;
margin-top: -($footer-size + $footer-bar-size + $grid-gutter-height / 2);
}
}
.sidebar__col {
position: relative;
margin-top: $grid-gutter-element-height;
margin-bottom: $grid-gutter-element-height * 2;
margin-top: $element-reduced-spacer-y;
margin-bottom: $element-reduced-spacer-y;
}
.content-holder__sidebar {
> .container {
@ -75,31 +24,6 @@ body > .wrapper {
}
}
// stick navbar to top using mobile layout
/*#Header {
position: relative;
padding-top: $grid-gutter-height / 2;
padding-bottom: 1rem;
@media (min-width: map-get($grid-breakpoints, "lg")) {
padding-top: 1rem;
padding-bottom: 0;
}
}
#Navigation {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
@media (min-width: map-get($grid-breakpoints, "lg")) {
position: relative;
margin-top: 1rem;
}
}*/
#Header {
background-color: $header-bg;
color: $header-color;
@ -214,8 +138,8 @@ body > .wrapper {
}
/*#MainContent {
padding-top: 2 * $grid-gutter-element-height;
padding-bottom: 2 * $grid-gutter-element-height;
padding-top: 2 * $element-reduced-spacer-y;
padding-bottom: 2 * $element-reduced-spacer-y;
}*/
#PageBreadcumbs {
@ -224,25 +148,24 @@ body > .wrapper {
}
#Footer {
display: flex;
flex-direction: column;
background-color: $footer-bg;
color: $footer-color;
> .wrapper {
padding-top: $grid-gutter-element-height;
padding-top: $element-reduced-spacer-y;
padding-bottom: $element-reduced-spacer-y;
}
a {
a,
.a {
color: $footer-link;
}
ul {
margin-bottom: 0;
}
.field:first-child {
margin-top: 0;
}
.footer {
padding-top: $element-reduced-spacer-y;
padding-bottom: $element-reduced-spacer-y;
background-color: $footer-footer-bg;
.copyright {
@ -253,18 +176,6 @@ body > .wrapper {
padding: 0 0.5rem;
}
}
@media (min-width: $full-body-min-width) {
.wrapper {
padding-bottom: $footer-bar-size;
}
.footer {
height: $footer-bar-size;
margin-top: -$footer-bar-size;
line-height: $footer-bar-size;
}
}
}
.flyout-FlyoutUI {

19
src/scss/_typography.scss
View File

@ -1,18 +1,3 @@
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: $dark;
}
.bg-dark {
h1,
h2,
@ -57,6 +42,10 @@ p {
@import './types/editor';
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}

102
src/scss/_variables.scss
View File

@ -1,6 +1,7 @@
@import '_mixings';
//@import '_colors';
// bootstrap settings
// screen size - 32px (ex. 1400 - 32 = 1368)
$grid-breakpoints: (
xs: 0,
@ -23,8 +24,6 @@ $container-max-widths: (
xxxxl: 1836px
) !default;
$full-body-min-width: map-get($grid-breakpoints, 'lg') !default;
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
@ -33,6 +32,46 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
$font-family-base: 'Lato', $font-family-sans-serif !default;
$spacer: 1rem !default;
$enable-rounded: false !default;
$enable-shadows: true !default;
$enable-gradients: false !default;
$enable-transitions: true !default;
$enable-reduced-motion: true !default;
$enable-caret: false !default;
$enable-grid-classes: true !default;
$enable-button-pointers: true !default;
$enable-rfs: true !default;
$enable-validation-icons: true !default;
$enable-negative-margins: true !default;
$enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
// ui framework settings
$body-gutter-x: $spacer !default;
$body-gutter-y: $spacer !default;
$body-gutter-reduced-x: $spacer/2 !default;
$body-gutter-reduced-y: $spacer/2 !default;
$form-spacer-x: $spacer !default;
$form-spacer-y: $spacer !default;
$element-spacer-x: var(--body-gutter-x) !default;
$element-spacer-y: var(--body-gutter-y) !default;
$element-reduced-spacer-x: var(--body-gutter-reduced-x) !default;
$element-reduced-spacer-y: var(--body-gutter-reduced-y) !default;
/*
$font-size-base: 1rem !default;
// start font-sizing from h2
@ -43,21 +82,13 @@ $h4-font-size: $font-size-base * 1.75 !default;
$h5-font-size: $font-size-base * 1.5 !default;
$h6-font-size: $font-size-base * 1.25 !default;
$grid-gutter-width: 2rem !default;
$grid-gutter-height: 2rem !default;
$grid-gutter-xs-width: $grid-gutter-width / 2 !default;
$grid-gutter-element-height: $grid-gutter-height !default;
$grid-gutter-x: 2rem !default;
$grid-gutter-y: 2rem !default;
$grid-gutter-xs-x: $grid-gutter-x / 2 !default;
$grid-gutter-element-y: $grid-gutter-y !default;
$field-gutter-height: $grid-gutter-height / 2 !default;
$col-block-gutter-height: $grid-gutter-height / 4 !default;
$footer-size: 18.5rem !default;
$footer-bar-size: 2.5rem !default;
/*
* bootstrap includes
* keep it at the end
*/
$field-gutter-y: $grid-gutter-y / 2 !default;
$col-block-gutter-y: $grid-gutter-y / 4 !default;
// bootstrap minify bugfix:
$navbar-dark-toggler-icon-bg: none !default;
@ -68,38 +99,39 @@ $enable-flex: true !default;
$enable-responsive-font-sizes: true !default;
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
// Add your site-wide + content editor typography styling
$nav-link-hover-bg: darken($body-bg, 10%);
$nav-link-hover-color: lighten($body-color, 10%);
$full-body-min-width: map-get($grid-breakpoints, 'lg');
*/
$header-bg: $dark;
$header-color: darken($white, 5%);
$header-link: $white;
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
$main-nav-link-color: $white;
// site specific variables
$full-body-min-width: map-get($grid-breakpoints, 'lg') !default;
$typography-breakpoint: map-get($grid-breakpoints, 'sm') - 1 !default;
$header-bg: var(--bs-dark);
$header-color: var(--bs-light);
$header-link: var(--bs-white);
$main-nav-link-color: var(--bs-white);
$main-nav-link-bg: none;
$main-nav-toggler-size: 2rem;
$main-nav-link-hover-bg: none;
$main-nav-link-hover-color: $primary;
$main-nav-link-hover-color: var(--bs-cyan);
$main-nav-dropdown-bg: $header-bg;
$main-nav-dropdown-color: $header-link;
$main-nav-dropdown-hover-bg: darken($header-bg, 10%);
$main-nav-dropdown-hover-color: $primary;
$main-nav-dropdown-hover-bg: var(--bs-black);
$main-nav-dropdown-hover-color: $main-nav-link-hover-color;
$footer-size: 7rem;
$footer-bar-size: 2rem;
$footer-bg: $header-bg;
$footer-color: $header-color;
$footer-link: $header-link;
$footer-bg: $dark;
$footer-color: darken($white, 5%);
$footer-link: $white;
$footer-footer-bg: darken($dark, 5%);
$footer-footer-bg: $main-nav-dropdown-hover-bg;

79
src/scss/types/editor.scss
View File

@ -13,37 +13,44 @@ img,
.image,
.ss-htmleditorfield-file {
display: block;
margin: 1rem;
margin-top: $element-reduced-spacer-y;
margin-bottom: $element-reduced-spacer-y;
max-width: 100%;
@media (min-width: $typography-breakpoint + 1) {
margin-left: $element-reduced-spacer-x;
margin-right: $element-reduced-spacer-x;
}
&.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
&.left {
float: left;
clear: left;
margin: 0 1rem 1rem 0;
}
&.right {
float: right;
clear: right;
margin: 1rem 0 0 1rem;
&.w-100 {
margin-left: 0;
margin-right: 0;
text-align: center;
}
&.start,
&.left,
&.leftAlone {
float: left;
clear: left;
margin: 0 1rem 1rem 0;
@media (min-width: $typography-breakpoint + 1) {
margin: 0 $element-reduced-spacer-x $element-reduced-spacer-y 0;
}
}
&.end,
&.right,
&.rightAlone {
float: right;
clear: right;
margin: 1rem 0 0 1rem;
@media (min-width: $typography-breakpoint + 1) {
margin: $element-reduced-spacer-y 0 0 $element-reduced-spacer-x;
}
}
iframe {
@ -54,14 +61,15 @@ img,
.captionImage {
img {
margin-bottom: 0.5rem !important;
margin-bottom: $element-reduced-spacer-y !important;
}
.caption {
font-size: 0.8rem;
}
}
.text-left {
.text-left,
.text-start {
text-align: left;
}
@ -69,7 +77,8 @@ img,
text-align: center;
}
.text-right {
.text-right,
.text-end {
text-align: right;
}
@ -83,10 +92,11 @@ table {
border-collapse: collapse;
@extend .table;
@extend .table-striped;
@extend .table-bordered;
&.table-none {
@extend .table-borderless;
border: 0;
tr,
@ -94,21 +104,14 @@ table {
th {
border: 0;
background: none !important;
box-shadow: none !important;
}
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
ul,
ol {
padding-left: $grid-gutter-width;
padding-left: $spacer;
li {
position: relative;
padding-left: 0;
@ -129,8 +132,9 @@ ul {
position: absolute;
left: -0.75em;
font-size: 1.5em;
top: -0.25em;
font-size: 1em;
top: -0.1em;
opacity: 0.5;
}
}
}
@ -176,14 +180,25 @@ img {
border: 0;
}
thead {
display: block;
text-align: center;
> tr {
display: flex;
}
}
tbody {
display: block;
}
td {
display: flex;
&:before {
content: attr(data-label);
font-weight: bold;
width: 12rem;
min-width: 12rem;
padding: 0 0.5rem;
width: 50%;
min-width: 50%;
padding: 0 $spacer/2;
display: block;
}
}

1
webpack.config.js
View File

@ -148,6 +148,7 @@ if (filesystem.existsSync(indexPath)) {
templateParameters: {
NODE_ENV: NODE_ENV,
GRAPHQL_URL: conf['GRAPHQL_URL'],
STATIC_URL: conf['STATIC_URL'],
REACT_SCRIPTS:
NODE_ENV === 'production'
? '<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>'

16
webpack.config.serve.js
View File

@ -157,6 +157,7 @@ const config = merge(common, {
templateParameters: {
NODE_ENV: NODE_ENV,
GRAPHQL_URL: conf['GRAPHQL_URL'],
STATIC_URL: conf['STATIC_URL'],
REACT_SCRIPTS:
NODE_ENV === 'production'
? '<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>'
@ -169,19 +170,10 @@ const config = merge(common, {
host: IP,
port: PORT,
historyApiFallback: false,
// disable it to test service worker
injectClient: false,
//hot: true,
/*clientLogLevel: 'info',
disableHostCheck: true,
contentBase: [
path.resolve(__dirname, 'public'),
path.resolve(__dirname, 'public', 'resources'),
path.resolve(__dirname, 'public', 'resources', conf.APPDIR, conf.DIST),
'node_modules',
],*/
//watchContentBase: true,
// uncomment it to test caching service worker
//injectClient: false,
overlay: {
warnings: true,
errors: true,

1
webpack.yml
View File

@ -15,3 +15,4 @@ Site\Templates\WebpackTemplateProvider:
webp: false
GRAPHQL_URL: 'http://127.0.0.1/graphql'
GRAPHQL_API_KEY: 'ApKrRSjySO4JAmX3E2Z7HvrBD0m8xdDlAiXyh4IbH3w'
STATIC_URL: 'http://127.0.0.1'