tonyair
/
webpack-bootstrap-ui-kit
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Elemental grid improvements

This commit is contained in:
Tony Air 2021-06-29 16:41:17 +02:00
parent b086a1b129
commit bfca2d4a3c
12 changed files with 216 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
"version": "3.2.5",
"version": "4.0.0",
"description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
"author": "Tony Air <tony@twma.pro>",
"license": "BSD-2-Clause",

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

@ -1,216 +0,0 @@
/*
* Basic styles for silverstripe-elemental
*/
.blog-post-info {
position: relative;
}
// add top/bottom paddings for basic elements
.element {
position: relative;
margin-top: $element-spacer-y;
margin-bottom: $element-spacer-y;
padding-top: $element-spacer-y;
padding-bottom: $element-spacer-y;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
// Sidebar-like elements
&.secondary {
padding-top: ($element-reduced-spacer-y);
padding-bottom: ($element-reduced-spacer-y);
}
}
// remove paddings of the slideshow
.dynamic__elements__image__elements__elementimage,
.site__elements__sliderelement {
padding-top: 0;
padding-bottom: 0;
.element-container {
max-width: none;
padding: 0;
}
.carousel-slide {
background: $sliderelement-carousel-slide-bg;
max-height: $sliderelement-carousel-slide-max-y;
align-items: center;
.video {
position: relative;
height: 100%;
@include responsive-ratio($sliderelement-carousel-slide-ratio-x, $sliderelement-carousel-slide-ratio-y, true);
iframe {
position: absolute;
top: 0;
height: 100% !important;
width: 100vw !important;
max-width: none;
height: unquote(($sliderelement-carousel-slide-ratio-y / $sliderelement-carousel-slide-ratio-x) * 100 + 'vw') !important;
}
}
}
}
// remove paddings for elemental list cuz inner elements will have paddings
.dnadesign__elementallist__model__elementlist {
padding: 0;
margin: 0;
.element {
padding-top: $element-reduced-spacer-y;
padding-bottom: $element-reduced-spacer-y;
margin-top: $element-reduced-d-spacer-y;
margin-bottom: $element-reduced-d-spacer-y;
}
}
.site__elements__accordion {
>.element-container>.accordion {
margin-top: $element-reduced-spacer-y;
//padding-top: $element-reduced-spacer-y;
}
}
.elements-sm,
.page-content-sidebar {
// Sidebar elements
.element {
padding-top: ($element-reduced-spacer-y);
padding-bottom: ($element-reduced-spacer-y);
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
}
}
}
.dynamic__elements__image__elements__elementimage {
.image-element__title {
margin-bottom: 0;
}
.image-element__caption {
margin: $element-reduced-spacer-y 0;
}
}
// remove container paddings for the slideshow
.dynamic__elements__image__elements__elementimage,
.site__elements__sliderelement {
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.element__image {
min-width: 100%;
}
}
// hide default page title cuz elemental object will be used to display titles
.element__breadcrumbs {
margin-bottom: calc(-2 * #{inspect($element-spacer-y)});
.container {}
.breadcrumb-link {
text-decoration: none;
&:hover,
&:focus,
&:active,
&.active {
color: $sidebar-nav-link-hover-color;
}
}
.active {
.breadcrumb-link {
color: $sidebar-nav-link-hover-color;
}
}
}
.page-header-element {
display: none;
margin-bottom: calc(-1 * #{inspect($element-spacer-y)});
.page-header {
line-height: 1em;
margin-bottom: 0;
}
}
.page-header-element:not(.d-block)+.element {
margin-top: 0;
}
// remove containers for child elements
.sidebar__col {
position: relative;
margin-top: $element-reduced-spacer-y;
margin-bottom: $element-reduced-spacer-y;
}
.content-holder__sidebar {
.row {
.container,
.container-fluid {
padding: 0;
width: auto;
}
}
}
.element {
.elemental-area {
.element {
.container,
.container-fluid {
padding: 0;
width: auto;
}
}
}
}
.element__widget {}
.widget__Site_Widgets_SubmenuWidget {
.nav-link {
width: 100%;
&:hover,
&:focus,
&:active,
&.active {
font-weight: bold;
color: $sidebar-nav-link-hover-color;
}
}
.active {
.nav-link {
font-weight: bold;
color: $sidebar-nav-link-hover-color;
}
}
}

6
src/scss/_components/_ui.form.basics.scss
View File

@ -1,8 +1,10 @@
.field {
flex-direction: column;
flex-direction: row;
.field__label {
&__label {
padding-right: $form-spacer-x;
display: inline-flex;
align-items: center;
&+.field__content {
padding-left: $form-spacer-x;

3
src/scss/_elements/_accordion.scss Normal file
View File

@ -0,0 +1,3 @@
.site__elements__accordion {
>.element-container>.accordion {}
}

17
src/scss/_elements/_grid.list.scss Normal file
View File

@ -0,0 +1,17 @@
// remove paddings for elemental list cuz inner elements will have paddings
.dnadesign__elementallist__model__elementlist {
padding: 0;
margin: 0;
.element__content {
--bs-gutter-x: 2rem;
--bs-gutter-y: .5rem;
}
/*.element {
padding-top: $element-reduced-spacer-y;
padding-bottom: $element-reduced-spacer-y;
margin-top: $element-reduced-d-spacer-y;
margin-bottom: $element-reduced-d-spacer-y;
}*/
}

45
src/scss/_elements/_grid.scss Normal file
View File

@ -0,0 +1,45 @@
.elemental-area {
display: flex;
flex-direction: column;
--bs-gutter-x: .75rem;
--bs-gutter-y: .5rem;
>.element {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
.element {
position: relative;
margin-top: $element-spacer-y;
margin-bottom: $element-spacer-y;
padding-top: $element-spacer-y;
padding-bottom: $element-spacer-y;
// Sidebar-like elements
&.secondary {
padding-top: ($element-reduced-spacer-y);
padding-bottom: ($element-reduced-spacer-y);
}
}
// sub-elements
.element {
.elemental-area {
.element {
.container,
.container-fluid {
padding: 0;
width: auto;
}
}
}
}

7
src/scss/_elements/_index.scss Normal file
View File

@ -0,0 +1,7 @@
@import '_grid';
@import '_grid.list';
@import '_page';
@import '_slider';
@import '_sidebar';
@import '_accordion';
@import '_other';

6
src/scss/_elements/_other.scss Normal file
View File

@ -0,0 +1,6 @@
/*
* Basic styles for silverstripe-elemental
*/
.blog-post-info {
position: relative;
}

37
src/scss/_elements/_page.scss Normal file
View File

@ -0,0 +1,37 @@
// hide default page title cuz elemental object will be used to display titles
.element__breadcrumbs {
//margin-bottom: calc(-2 * #{inspect($element-spacer-y)});
.container {}
.breadcrumb-link {
text-decoration: none;
&:hover,
&:focus,
&:active,
&.active {
color: $sidebar-nav-link-hover-color;
}
}
.active {
.breadcrumb-link {
color: $sidebar-nav-link-hover-color;
}
}
}
.page-header-element {
display: none;
//margin-bottom: calc(-1 * #{inspect($element-spacer-y)});
.page-header {
line-height: 1em;
margin-bottom: 0;
}
}
.page-header-element:not(.d-block)+.element {
margin-top: 0;
}

57
src/scss/_elements/_sidebar.scss Normal file
View File

@ -0,0 +1,57 @@
// remove containers for child elements
.sidebar__col {
position: relative;
margin-top: $element-reduced-spacer-y;
margin-bottom: $element-reduced-spacer-y;
}
.content-holder__sidebar {
.row {
.container,
.container-fluid {
padding: 0;
width: auto;
}
}
}
.page-content-sidebar {
// Sidebar elements
.element {
padding-top: ($element-reduced-spacer-y);
padding-bottom: ($element-reduced-spacer-y);
&:first-child {
padding-top: 0;
}
&:last-child {
padding-bottom: 0;
}
}
}
.element__widget {}
.widget__Site_Widgets_SubmenuWidget {
.nav-link {
width: 100%;
&:hover,
&:focus,
&:active,
&.active {
font-weight: bold;
color: $sidebar-nav-link-hover-color;
}
}
.active {
.nav-link {
font-weight: bold;
color: $sidebar-nav-link-hover-color;
}
}
}

33
src/scss/_elements/_slider.scss Normal file
View File

@ -0,0 +1,33 @@
.dynamic__elements__image__elements__elementimage,
.site__elements__sliderelement {
.element-container {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.element__image {
min-width: 100%;
}
.carousel-slide {
background: $sliderelement-carousel-slide-bg;
max-height: $sliderelement-carousel-slide-max-y;
align-items: center;
.video {
position: relative;
height: 100%;
@include responsive-ratio($sliderelement-carousel-slide-ratio-x, $sliderelement-carousel-slide-ratio-y, true);
iframe {
position: absolute;
top: 0;
height: 100% !important;
width: 100vw !important;
max-width: none;
height: unquote(($sliderelement-carousel-slide-ratio-y / $sliderelement-carousel-slide-ratio-x) * 100 + 'vw') !important;
}
}
}
}

12
src/scss/_variables.scss
View File

@ -86,14 +86,14 @@ $body-gutter-reduced-d-y: $body-gutter-y/4 !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-spacer-x: var(--bs-gutter-x) !default;
$element-spacer-y: var(--bs-gutter-y) !default;
$element-reduced-spacer-x: var(--body-gutter-reduced-x) !default;
$element-reduced-spacer-y: var(--body-gutter-reduced-y) !default;
$element-reduced-spacer-x: var(--bs-gutter-x)/2 !default;
$element-reduced-spacer-y: var(--bs-gutter-y)/2 !default;
$element-reduced-d-spacer-x: var(--body-gutter-reduced-d-x) !default;
$element-reduced-d-spacer-y: var(--body-gutter-reduced-d-y) !default;
$element-reduced-d-spacer-x: var(--bs-gutter-x)/4 !default;
$element-reduced-d-spacer-y: var(--bs-gutter-y)/4 !default;
/*
$font-size-base: 1rem !default;