IMPR: styling improvements
This commit is contained in:
Tony Air
parent
0dc2834870
commit
8b01fef7bc
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -19,8 +19,11 @@
|
|||
<div class="footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 d-flex">
|
||||
<div class="copyright">Copyright © 2019 - Tony Air (A2nt) Webpack Bootstrap 4 UI Kit</div>
|
||||
<div class="col-sm-8 d-md-flex">
|
||||
<div class="copyright">
|
||||
Copyright © 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>
|
||||
|
|
|
|||
|
|
@ -103,13 +103,6 @@
|
|||
transform: translate(19px, 0);
|
||||
}
|
||||
}
|
||||
html,
|
||||
body {
|
||||
color: #212121;
|
||||
}
|
||||
a {
|
||||
color: #007bff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="PageLoading">
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>'
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
Loading…
Reference in New Issue