Merge pull request #1172 from MrBearPresident/820-Number-of-rows-when-placed-in-a-section-view

820 number of rows when placed in a section view

Author: Clooos

src/cards/button/styles.css

@@ -20,7 +20,7 @@ ha-card {
     width: 100%;
     height: 50px;
     background-color: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
-    border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px));
+    border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
     box-shadow: var(--bubble-button-box-shadow, var(--bubble-box-shadow, none));
     overflow: scroll;
     touch-action: pan-y;
@@ -41,7 +41,7 @@ ha-card {
 .bubble-button-background {
     background-color: var(--bubble-button-background-color);
     opacity: .5;
-    border-radius: calc(var(--bubble-button-border-radius, var(--bubble-border-radius, 32px)) / 1.1);
+    border-radius: calc(var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2))) / 1.1 );
 }
 .bubble-range-fill {
     position: absolute;
@@ -65,7 +65,7 @@ ha-card {
 }
 .bubble-range-slider {
     cursor: ew-resize;
-    border-radius: calc(var(--bubble-button-border-radius, var(--bubble-border-radius, 32px)) / 1.1);
+    border-radius: calc(var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2))) / 1.1);
     overflow: hidden;
     mask-image: radial-gradient(white, black);
     -webkit-mask-image: -webkit-radial-gradient(white, black);
@@ -151,8 +151,8 @@ ha-card {
 }
 
 .large .bubble-button-card-container {
-  height: 56px;
-  border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px));
+  height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
+  border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
 }
 
 .large .bubble-icon-container {
@@ -162,12 +162,16 @@ ha-card {
   margin-left: 8px;
 }
 
+.large .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
+    grid-row: 1 / calc(var(--row-size,1) + 1);
+}
+
 .rows-2 .bubble-sub-button-container {
   flex-direction: column;
   gap: 4px !important;
   display: grid !important;
   grid-template-columns: repeat(1, min-content);
-  grid-template-rows: repeat(2, 1fr);
+  grid-template-rows: repeat(calc(2*var(--row-size,1)), 1fr);
   grid-auto-flow: column;
   width: auto;
   padding-right: 4px;
@@ -176,3 +180,7 @@ ha-card {
 .rows-2 .bubble-sub-button {
   height: 20px !important;
 }
+
+.large.rows-2 .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
+    grid-row: 1 / calc(2*var(--row-size,1) + 1);
+}

src/cards/climate/styles.css

@@ -16,7 +16,7 @@ ha-card {
     width: 100%;
     height: 50px;
     background-color: var(--bubble-climate-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
-    border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px));
+    border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
     box-shadow: var(--bubble-climate-box-shadow, var(--bubble-box-shadow, none));
     overflow: visible;
     touch-action: pan-y;
@@ -52,7 +52,7 @@ ha-card {
     align-items: center;
     width: auto;
     height: 100%;
-    border-radius: var(--bubble-sub-button-border-radius, var(--bubble-border-radius, 32px));
+    border-radius: var(--bubble-sub-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
     background-color: var(--bubble-climate-button-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background))));
 }
 
@@ -97,7 +97,7 @@ ha-card {
     width: 100%;
     height: 100%;
     position: absolute;
-    border-radius: var(--bubble-sub-button-border-radius, var(--bubble-border-radius, 32px));
+    border-radius: var(--bubble-sub-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
     overflow: hidden;
     pointer-events: none;
 }
@@ -118,7 +118,7 @@ ha-card {
     width: 100%;
     height: 100%;
     position: absolute;
-    border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px));
+    border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
     opacity: 0.7;
     transition: background-color 2s ease;
 }
@@ -220,8 +220,8 @@ ha-card {
 }
 
 .large .bubble-climate-container {
-  height: 56px;
-  border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px));
+  height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
+  border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
 }
 
 .large .bubble-icon-container {
@@ -231,16 +231,24 @@ ha-card {
   margin-left: 8px;
 }
 
+.large .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
+    grid-row: 1 / calc(var(--row-size,1) + 1);
+}
+
 .rows-2 .bubble-sub-button-container {
   flex-direction: column;
   gap: 4px !important;
   display: grid !important;
   grid-template-columns: repeat(1, min-content);
-  grid-template-rows: repeat(2, 1fr);
+  grid-template-rows: repeat(calc(2*var(--row-size,1)), 1fr);
   grid-auto-flow: column;
   width: auto;
 }
 
 .rows-2 .bubble-sub-button {
   height: 20px !important;
 }
+
+.large.rows-2 .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
+    grid-row: 1 / calc(2*var(--row-size,1) + 1);
+}

src/cards/cover/styles.css

@@ -101,7 +101,7 @@ ha-card {
     display: flex;
     background: var(--bubble-cover-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
     height: 42px;
-    border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 32px));
+    border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
     box-shadow: var(--bubble-cover-box-shadow, var(--bubble-button-box-shadow, var(--bubble-box-shadow, none)));
     align-items: center;
     justify-content: center;
@@ -110,10 +110,10 @@ ha-card {
 }
 
 .large .bubble-cover-card-container {
-  height: 56px;
+  height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
   display: flex;
   background: var(--bubble-cover-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
-  border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 32px));
+  border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
   box-shadow: var(--bubble-cover-box-shadow, var(--bubble-button-box-shadow, var(--bubble-box-shadow, none)));
   border: var(--bubble-cover-border, var(--bubble-border, none));
 }
@@ -124,7 +124,7 @@ ha-card {
 }
 
 .large .bubble-header-container {
-    height: 56px;
+    height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
 }
 
 .large .bubble-header {
@@ -162,16 +162,24 @@ ha-card {
   margin-right: 14px;
 }
 
+.large .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
+    grid-row: 1 / calc(var(--row-size,1) + 1);
+}
+
 .rows-2 .bubble-sub-button-container {
   flex-direction: column;
   gap: 4px !important;
   display: grid !important;
   grid-template-columns: repeat(1, min-content);
-  grid-template-rows: repeat(2, 1fr);
+  grid-template-rows: repeat(calc(2*var(--row-size,1)), 1fr);
   grid-auto-flow: column;
   width: auto;
 }
 
 .rows-2 .bubble-sub-button {
   height: 20px !important;
 }
+
+.large.rows-2 .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
+    grid-row: 1 / calc(2*var(--row-size,1) + 1);
+}

src/cards/media-player/styles.css

@@ -18,7 +18,7 @@ ha-card {
     height: 50px;
     background-color: var(--bubble-media-player-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
     touch-action: pan-y;
-    border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px));
+    border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
     box-shadow: var(--bubble-media-player-box-shadow, var(--bubble-box-shadow, none));
     border: var(--bubble-media-player-border, var(--bubble-border, none));
 }
@@ -31,7 +31,7 @@ ha-card {
     height: 100%;
     width: 100%;
     transition: background-color 1.5s;
-    border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px));
+    border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
     background-color: rgba(0,0,0,0);
 }
 
@@ -51,7 +51,7 @@ ha-card {
     background: none;
     border: none;
     cursor: pointer;
-    border-radius: var(--bubble-media-player-buttons-border-radius, var(--bubble-border-radius, 32px));
+    border-radius: var(--bubble-media-player-buttons-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
     padding: 6px;
     height: 24px;
     width: 24px;
@@ -69,7 +69,7 @@ ha-card {
     height: 38px;
     left: 50px;
     overflow: hidden;
-    border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px));
+    border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
     z-index: 1;
     background-color: var(--bubble-media-player-slider-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background)))));
     opacity: 1;
@@ -276,8 +276,8 @@ ha-card {
 }
 
 .large .bubble-media-player-container {
-  height: 56px;
-  border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px));
+  height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
+  border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
 }
 
 .large .bubble-icon-container {
@@ -298,7 +298,7 @@ ha-card {
 
 .large .bubble-volume-slider {
   height: 42px;
-  border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px));
+  border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
   left: 60px;
   width: calc(100% - 168px);
 }
@@ -312,16 +312,24 @@ ha-card {
   align-items: center;
 }
 
+.large .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
+    grid-row: 1 / calc(var(--row-size,1) + 1);
+}
+
 .rows-2 .bubble-sub-button-container {
   flex-direction: column;
   gap: 4px !important;
   display: grid !important;
   grid-template-columns: repeat(1, 1fr);
-  grid-template-rows: repeat(2, minmax(auto, max-content));
+  grid-template-rows: repeat(calc(2*var(--row-size,1)), minmax(auto, max-content));
   grid-auto-flow: column;
   width: auto;
 }
 
 .rows-2 .bubble-sub-button {
   height: 20px !important;
 }
+
+.large.rows-2 .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
+    grid-row: 1 / calc(2*var(--row-size,1) + 1);
+}

src/cards/pop-up/styles.css

@@ -167,7 +167,7 @@
 }
 
 .large .bubble-button-card-container {
-  height: 56px;
+  height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
   border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 36px));
 }
 .large .bubble-pop-up-container {
@@ -180,24 +180,32 @@
   margin-left: 8px;
 }
 .large .bubble-close-button {
-    height: 56px;
-    width: 56px;
+    height: var(--row-height,56px);
+    width: var(--row-height,56px);
     border: none;
     border-radius: var(--bubble-pop-up-border-radius, var(--bubble-border-radius, 42px));
     z-index: 1;
     --mdc-icon-size: 28px !important;
 }
 
+.large .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
+    grid-row: 1 / calc(var(--row-size,1) + 1);
+}
+
 .rows-2 .bubble-sub-button-container {
   flex-direction: column;
   gap: 4px !important;
   display: grid !important;
   grid-template-columns: repeat(1, min-content);
-  grid-template-rows: repeat(2, 1fr);
+  grid-template-rows: repeat(calc(2*var(--row-size,1)), 1fr);
   grid-auto-flow: column;
   width: auto;
   padding-right: 4px;
 }
 .rows-2 .bubble-sub-button {
   height: 20px !important;
 }
+
+.large.rows-2 .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
+    grid-row: 1 / calc(2*var(--row-size,1) + 1);
+}

src/cards/select/styles.css

@@ -15,7 +15,7 @@ mwc-list-item[selected] {
     background-color: var(--bubble-select-list-item-accent-color, var(--bubble-list-item-accent-color, var(--bubble-accent-color, var(--accent-color)))); /* Added the missing 'select' in the first var without removing the previous one for compatibilty */ 
 }
 ha-select {
-    --mdc-shape-medium: var(--bubble-select-list-border-radius, var(--bubble-border-radius, 32px));
+    --mdc-shape-medium: var(--bubble-select-list-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
     --mdc-theme-surface: var(--bubble-select-list-background-color, var(--bubble-select-main-background-color, var(--bubble-main-background-color, var(--card-background-color, var(--secondary-background-color)))));
     --mdc-shape-large: 32px;
     --mdc-shape-small: 64px;
@@ -80,7 +80,7 @@ ha-select {
     width: 100%;
     height: 50px;
     background-color: var(--bubble-select-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
-    border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px));
+    border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
     box-shadow: var(--bubble-select-box-shadow, var(--bubble-box-shadow, none));
     touch-action: pan-y;
     box-sizing: border-box;
@@ -103,7 +103,7 @@ ha-select {
     background-color: var(--bubble-select-background-color);
     opacity: .5;
     overflow: hidden !important;
-    border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px));
+    border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
 }
 .is-unavailable .bubble-select-card {
     cursor: not-allowed;
@@ -196,8 +196,8 @@ ha-select {
 }
 
 .large .bubble-select-card-container {
-  height: 56px;
-  border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px));
+  height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
+  border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
 }
 
 .large .bubble-icon-container {
@@ -207,16 +207,24 @@ ha-select {
   margin-left: 6px;
 }
 
+.large .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
+    grid-row: 1 / calc(var(--row-size,1) + 1);
+}
+
 .rows-2 .bubble-sub-button-container {
   flex-direction: column;
   gap: 4px !important;
   display: grid !important;
   grid-template-columns: repeat(1, min-content);
-  grid-template-rows: repeat(2, 1fr);
+  grid-template-rows: repeat(calc(2*var(--row-size,1)), 1fr);
   grid-auto-flow: column;
   width: auto;
 }
 
 .rows-2 .bubble-sub-button {
   height: 20px !important;
 }
+
+.large.rows-2 .bubble-sub-button-container:has(> :last-child:nth-child(2)) :nth-child(2) {
+    grid-row: 1 / calc(2*var(--row-size,1) + 1);
+}

src/cards/separator/styles.css

@@ -43,7 +43,7 @@
     gap: 4px !important;
     display: grid !important;
     grid-template-columns: repeat(1, min-content);
-    grid-template-rows: repeat(2, 1fr);
+    grid-template-rows: repeat(calc(2*var(--row-size,1)), 1fr);
     grid-auto-flow: column;
     width: auto;
 }