Elemental grid improvements

package.json

@@ -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",

src/scss/_components/_ui.elemental.scss

@@ -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;
-        }
-    }
-}

src/scss/_components/_ui.form.basics.scss

@@ -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;

src/scss/_elements/_accordion.scss

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

src/scss/_elements/_grid.list.scss

@@ -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;
+    }*/
+}

src/scss/_elements/_grid.scss

@@ -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;
+            }
+        }
+    }
+}

src/scss/_elements/_index.scss

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

src/scss/_elements/_other.scss

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

src/scss/_elements/_page.scss

@@ -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;
+}

src/scss/_elements/_sidebar.scss

@@ -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;
+        }
+    }
+}

src/scss/_elements/_slider.scss

@@ -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;
+            }
+        }
+    }
+}

src/scss/_variables.scss

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