#4219 - Protean: Layout with 3 equal columns looks incorrectly

plugins_public/tailwind/css/tailwind.css

@@ -519,16 +519,18 @@
         @apply gap-4 lg:gap-6 flex flex-col;
     }
     .bx-layout-row{
-        @apply w-full flex relative flex-wrap md:flex-nowrap gap-4 lg:gap-6;
+        @apply w-full flex relative flex-wrap md:flex-nowrap gap-y-4 lg:gap-y-6;
     }
     .bx-layout-col{
         @apply max-w-full w-full;
+        flex-shrink: 2 !important;
     }
+
     .bx-layout-cell{
         @apply flex flex-col gap-4 lg:gap-6;
     }
     .bx-layout-gap{
-        @apply gap-4 lg:gap-6;
+        @apply gap-y-4 lg:gap-y-6;
     }
     .bx-def-color-bg-page{
 	    @apply bg-gray-100 dark:bg-gray-900;

template/css/media-phone.css

@@ -115,15 +115,6 @@ html.bx-media-phone {
 
 /* page layouts */
 
-.bx-media-phone .bx-layout-col {
-    float:none !important;
-    width:auto !important;
-}
-
-.bx-media-phone .bx-layout-cell {
-    padding:0 !important;
-}
-
 /* menu.css */
 
 .bx-media-phone ul.bx-menu-toolbar li a span.bx-menu-toolbar-item-title,

template/css/page_layouts.css

@@ -9,98 +9,6 @@
     border-style: dashed;
 }
 
-.bx-layout-col {
-    float:left;
-}
-section .bx-layout-col{
-    float:none;
-}
-
-/* layout 1 column */
-.bx-layout-1-column-column1 {
-    float:none;
-}
-
-/* layout 1 column thin */
-.bx-layout-1-column-thin-column1 {
-    float:none;
-    width:33.3%;
-}
-
-/* layout 1 column half */
-.bx-layout-1-column-half-column1 {
-    float:none;
-    width:50%;
-}
-
-/* layout 3 columns */
-.bx-layout-3-columns-column3,
-.bx-layout-3-columns-column1 {
-    width:33.3%;
-}
-.bx-layout-3-columns-column2 {
-    width:33.4%;
-}
-
-
-/* layout 3 columns (1:3:2) */
-.bx-layout-col1-col3-col2-column1 {
-    width:20.0%;
-}
-.bx-layout-col1-col3-col2-column2 {
-    width:50.0%;
-}
-.bx-layout-col1-col3-col2-column3 {
-    width:30.0%;
-}
-
-
-/* layout 2 columns (1:5) */
-.bx-layout-col1-col5-column1 {
-    width:20.0%;
-}
-.bx-layout-col1-col5-column2 {
-    width:80.0%;
-}
-
-
-/* layout bar content bar */
-.bx-layout-bcb-bar1,
-.bx-layout-bcb-bar2 {
-    width:25.0%;
-}
-.bx-layout-bcb-content {
-    width:50.0%;
-}
-
-
-/* layout 2 columns */
-.bx-layout-2-columns-column1,
-.bx-layout-2-columns-column2 {
-    width:50%;
-}
-
-
-/* layout bar left */
-.bx-layout-bar-left-bar {
-    width:34%;
-}
-
-.bx-layout-bar-left-content {
-    width:66%;
-}
-
-
-/* layout bar right */
-.bx-layout-bar-right-bar {
-    width:34%;
-}
-
-.bx-layout-bar-right-content {
-    width:66%;
-}
-
-
 /* menu visibility */
 .bx-layout-column-thin .bx-def-thin-col-hide{
     display: none;

template/css/page_sticky.css

@@ -1,15 +0,0 @@
-.bx-media-tablet .bx-layout-col.bx-layout-column-thin,
-.bx-media-tablet .bx-layout-col.bx-layout-column-wide,
-.bx-media-tablet .bx-layout-col.bx-layout-column-half,
-.bx-media-desktop .bx-layout-col.bx-layout-column-thin,
-.bx-media-desktop .bx-layout-col.bx-layout-column-wide,
-.bx-media-desktop .bx-layout-col.bx-layout-column-half
- {
-	position:-webkit-sticky; 
-	position:sticky; 
-	top:0
-}
-
-.bx-toolbar-up{
-	transform: none !important;
-}

template/layout_top_area_3_columns.html

@@ -1,19 +1,19 @@
 <!-- layout top area 3 columns [ start ] -->
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-3-columns">
     <bx_include_auto:_row_1_column.html />
-    <div class="bx-layout-row">
-        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/3 flex-auto md:flex-none" aria-label="Sidebar" >
+    <div class="bx-layout-row" >
+        <section class="cpr bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/3 flex-auto md:flex-none md:pr-4 lg:pr-6" aria-label="Sidebar">
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
         </section>
-        <section aria-label="Content" class="max-w-full md:w-2/3 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap">
-            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto md:w-1/2" aria-label="Main">
+        <section aria-label="Content" class="max-w-full md:w-2/3 flex-1 flex flex-wrap lg:flex-nowrap bx-layout-gap" >
+            <main class="bx-layout-col bx-layout-bcb-content bx-layout-column-half flex-auto lg:w-1/2 lg:pr-6" aria-label="Main">
                 <div class="bx-layout-cell" id="bx-layout-cell-3">
                     __cell_3__
                 </div>
             </main>
-            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin md:w-1/2" aria-label="Aside">
+            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin flex-auto lg:w-1/2 " aria-label="Aside">
                 <div class="bx-layout-cell" id="bx-layout-cell-4">
                     __cell_4__
                 </div>

template/layout_top_area_bar_content_bar.html

@@ -2,7 +2,7 @@
 <div id="__page_id__" class="bx-layout-wrapper bx-layout-top-area-bcb">
     <bx_include_auto:_row_1_column.html />
     <div class="bx-layout-row">
-        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4 flex-auto md:flex-none" aria-label="Sidebar" >
+        <section class="bx-layout-col bx-layout-bcb-bar1 bx-layout-column-thin md:w-1/4 flex-auto" aria-label="Sidebar" >
             <div class="bx-layout-cell" id="bx-layout-cell-2">
                 __cell_2__
             </div>
@@ -13,7 +13,7 @@
                     __cell_3__
                 </div>
             </main>
-            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin lg:w-1/3" aria-label="Aside">
+            <aside class="bx-layout-col bx-layout-bcb-bar2 bx-layout-column-thin flex-auto md:w-1/3" aria-label="Aside">
                 <div class="bx-layout-cell" id="bx-layout-cell-4">
                     __cell_4__
                 </div>