From 8b01fef7bcb55d748644ca2ccd95c8703ea3c02d Mon Sep 17 00:00:00 2001 From: Tony Air Date: Sat, 20 Feb 2021 13:00:59 +0700 Subject: [PATCH] IMPR: styling improvements --- src/html/Elements/Accordion.html | 186 ++++++------ src/html/Elements/Content.html | 265 +++++++++------- src/html/Elements/ElementsList.html | 42 ++- src/html/Footer.html | 20 +- src/html/_components/LoadingSpinner.html | 7 - src/index.html | 18 +- src/js/_components/_main.js | 1 + src/js/app.js | 30 +- src/scss/_components/_ui.elemental.scss | 77 ++--- src/scss/_components/_ui.main.graphql.scss | 28 -- src/scss/_components/_ui.main.scss | 332 +++++---------------- src/scss/_layout.scss | 115 +------ src/scss/_typography.scss | 19 +- src/scss/_variables.scss | 102 ++++--- src/scss/types/editor.scss | 79 +++-- webpack.config.js | 1 + webpack.config.serve.js | 16 +- webpack.yml | 1 + 18 files changed, 590 insertions(+), 749 deletions(-) delete mode 100644 src/scss/_components/_ui.main.graphql.scss diff --git a/src/html/Elements/Accordion.html b/src/html/Elements/Accordion.html index 88c074f..85ca64c 100644 --- a/src/html/Elements/Accordion.html +++ b/src/html/Elements/Accordion.html @@ -2,105 +2,105 @@
Some content ...
-
-
-
-
-
- -
-
-
-
-

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.

-
-
-
+
+
+

+ +

+
+
+ This is the first item's accordion body. 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 + .accordion-body, though the transition does limit + overflow.
-
-
-
-
- -
-
-
-
-

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).

-
-
-
+
+

+ +

+
+
+ This is the second item's accordion body. 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 + .accordion-body, though the transition does limit + overflow.
-
-
-
-
- -
-
-
-
-

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).

-
-
-
+
+

+ +

+
+
+ This is the third item's accordion body. 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 + .accordion-body, though the transition does limit + overflow.
-
-
-
-
- -
-
-
-
-

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).

-
-
-
-
-
-
-
\ No newline at end of file +
diff --git a/src/html/Elements/Content.html b/src/html/Elements/Content.html index cf698f6..3d58782 100644 --- a/src/html/Elements/Content.html +++ b/src/html/Elements/Content.html @@ -1,112 +1,171 @@ -
+

Content Demo

Quick start

  1. Clone quick start repository

    - 
    git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git
    -
    2. -
  2. -

    Install npm packages

    - 
    +				
    +git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git
    
+
    3. +
  3. +

    Install npm packages

    + 
     				cd ./webpack-bootstrap-ui-kit-quick-start.git
 				npm install
-
    -
    4. -
  4. -

    Edit ./src files

    -
    5. -
  5. -

    Start development server at https://127.0.0.1:8001/:

    - 
    yarn start
    -

    Compile:

    - 
    yarn build
    -
    6. -
-

Header #2

-

Test ImageContent 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.

-
    -
  1. - First -
      -
    • First
      • -
    • - Second -
        -
      1. First
        2. -
      2. Second
        3. -
      3. Third
        4. -
      -
        -
      • First
        • -
      • Second
        • -
      • Third
        • -
      -
      • -

    • 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.

      • -
    -
    2. -
  2. -

    {paragraph} Second

    -

    {paragraph} Second #2

    -
    3. -

  3. 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.

    4. -
-

Table #1: Default

- - - - - - - - - - - - - - - - - - - - - - - - - -
#1#2#3
#1-1#1-2#1-3
#2-1#2-2#2-3
#3-1#3-2#3-3
-

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.

-

Table #2: Border-less

- - - - - - - - - - - - - - - - - - - - - - - - - -
#1#2#3
#1-1#1-2#1-3
#2-1#2-2#2-3
#3-1#3-2#3-3
+ + +
  • +

    Edit ./src files

    +
    • +
  • +

    Start development server at https://127.0.0.1:8001/:

    + 
    yarn start
    +

    Compile:

    + 
    yarn build
    +
    • + +

    + Header #2 + +

    +

    + Test ImageContent 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. +

    +
      +
    1. + First +
        +
      • First
        • +
      • + Second +
          +
        1. First
          2. +
        2. Second
          3. +
        3. Third
          4. +
        +
          +
        • First
          • +
        • Second
          • +
        • Third
          • +
        +
        • +
      • +

        + 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. +

        +
        • +
      +
      2. +
    2. +

      {paragraph} Second

      +

      {paragraph} Second #2

      +
      3. +
    3. +

      + 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. +

      +
      4. +
    +

    Responsive Table #1: Default

    + + + + + + + + + + + + + + + + + + + + + + + + + +
    Header #1Header #2Header #3
    #1-1#1-2#1-3
    #2-1#2-2#2-3
    #3-1#3-2#3-3
    +

    + 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. +

    +

    Responsive Table #2: Border-less

    + + + + + + + + + + + + + + + + + + + + + + + + + +
    Header #1Header #2Header #3
    #1-1#1-2#1-3
    #2-1#2-2#2-3
    #3-1#3-2#3-3
    +
    -
    \ No newline at end of file diff --git a/src/html/Elements/ElementsList.html b/src/html/Elements/ElementsList.html index 2e6d9bf..1a7cb91 100644 --- a/src/html/Elements/ElementsList.html +++ b/src/html/Elements/ElementsList.html @@ -3,40 +3,64 @@ Some content ...
    -
    +
    - Some kind image + Some kind image
    -
    +
    - Some kind image + Some kind image
    -
    +
    - Some kind image + Some kind image
    -
    +
    - Some kind image + Some kind image
    -
    \ No newline at end of file +
    diff --git a/src/html/Footer.html b/src/html/Footer.html index 67559dd..e5468bd 100644 --- a/src/html/Footer.html +++ b/src/html/Footer.html @@ -19,8 +19,11 @@
    -
    -
    Copyright © 2019 - Tony Air (A2nt) Webpack Bootstrap 4 UI Kit
    +
    +
    + Copyright © 2019 - Tony Air (A2nt) Webpack Bootstrap 4 + UI Kit +
    -
    -
    - Developed by Tony Air +
    +
    + Developed by Tony Air
    -
    \ No newline at end of file +
    diff --git a/src/html/_components/LoadingSpinner.html b/src/html/_components/LoadingSpinner.html index b74a093..ff758cf 100644 --- a/src/html/_components/LoadingSpinner.html +++ b/src/html/_components/LoadingSpinner.html @@ -103,13 +103,6 @@ transform: translate(19px, 0); } } - html, - body { - color: #212121; - } - a { - color: #007bff; - }
    diff --git a/src/index.html b/src/index.html index a19f54e..20e3a28 100644 --- a/src/index.html +++ b/src/index.html @@ -6,20 +6,30 @@ + - <%= 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') %>
    + <%= 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') %> +
    +
    +
    +

    + Webpack Bootstrap 4 UI Demo +

    +
    +
    +
    { diff --git a/src/js/app.js b/src/js/app.js index a2e59f9..0924f57 100755 --- a/src/js/app.js +++ b/src/js/app.js @@ -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'; diff --git a/src/scss/_components/_ui.elemental.scss b/src/scss/_components/_ui.elemental.scss index 9f1b337..a621c44 100755 --- a/src/scss/_components/_ui.elemental.scss +++ b/src/scss/_components/_ui.elemental.scss @@ -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 { diff --git a/src/scss/_components/_ui.main.graphql.scss b/src/scss/_components/_ui.main.graphql.scss deleted file mode 100644 index 49b3732..0000000 --- a/src/scss/_components/_ui.main.graphql.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/scss/_components/_ui.main.scss b/src/scss/_components/_ui.main.scss index 9b03ec0..47fbbc6 100755 --- a/src/scss/_components/_ui.main.scss +++ b/src/scss/_components/_ui.main.scss @@ -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; + } } diff --git a/src/scss/_layout.scss b/src/scss/_layout.scss index 1cc7422..5c52ac4 100755 --- a/src/scss/_layout.scss +++ b/src/scss/_layout.scss @@ -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 { diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss index 31ff742..b4e2fc3 100755 --- a/src/scss/_typography.scss +++ b/src/scss/_typography.scss @@ -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; } diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 555b5e6..4b811fd 100755 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -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; diff --git a/src/scss/types/editor.scss b/src/scss/types/editor.scss index fa47fcc..874cac4 100755 --- a/src/scss/types/editor.scss +++ b/src/scss/types/editor.scss @@ -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; } } diff --git a/webpack.config.js b/webpack.config.js index 4f8f8e4..70eeba4 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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' ? '' diff --git a/webpack.config.serve.js b/webpack.config.serve.js index 738098d..00b3743 100644 --- a/webpack.config.serve.js +++ b/webpack.config.serve.js @@ -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' ? '' @@ -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, diff --git a/webpack.yml b/webpack.yml index 4b67d56..5bc0c74 100644 --- a/webpack.yml +++ b/webpack.yml @@ -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'