refactor(popover): remove the background color styling from ion-conte…

…nt and item - change the default text color and background color to match the theme variables. This makes popover look better on dark theme and removes the nesting of styles that breaks list headers. fixes #8376
ionic-team · Nov 9, 2016 · e0d48ee · e0d48ee
1 parent 32e3253
commit e0d48ee
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 36 deletions.
diff --git a/src/components/popover/popover.ios.scss b/src/components/popover/popover.ios.scss
@@ -9,10 +9,9 @@ $popover-ios-min-height:                0 !default;
 $popover-ios-max-height:                90% !default;
 
 $popover-ios-border-radius:             10px !default;
-$popover-ios-text-color:                #000 !default;
+$popover-ios-text-color:                $text-ios-color !default;
 
-$popover-ios-background:                #fff !default;
-$popover-ios-item-background:           $popover-ios-background !default;
+$popover-ios-background:                $background-ios-color !default;
 $popover-ios-arrow-background:          $popover-ios-background !default;
 
 
@@ -25,14 +24,6 @@ $popover-ios-arrow-background:          $popover-ios-background !default;
   border-radius: $popover-ios-border-radius;
   color: $popover-ios-text-color;
   background: $popover-ios-background;
-
-  ion-content {
-    background: $popover-ios-background;
-  }
-}
-
-.popover-ios .popover-content .item {
-  background-color: $popover-ios-item-background;
 }
 
 

diff --git a/src/components/popover/popover.md.scss b/src/components/popover/popover.md.scss
@@ -9,13 +9,11 @@ $popover-md-min-height:                0 !default;
 $popover-md-max-height:                90% !default;
 
 $popover-md-border-radius:             2px !default;
-$popover-md-text-color:                #000 !default;
-$popover-md-background:                #fafafa !default;
+$popover-md-text-color:                $text-md-color !default;
+$popover-md-background:                $background-md-color !default;
 $popover-md-box-shadow-color:          rgba(0, 0, 0, .3) !default;
 $popover-md-box-shadow:                0 3px 12px 2px $popover-md-box-shadow-color !default;
 
-$popover-md-item-background:           $popover-md-background !default;
-
 
 .popover-md .popover-content {
   width: $popover-md-width;
@@ -31,14 +29,6 @@ $popover-md-item-background:           $popover-md-background !default;
   transform-origin: top left;
 }
 
-.popover-md .popover-content ion-content {
-  background: $popover-md-background;
-}
-
-.popover-md .popover-content .item {
-  background-color: $popover-md-item-background;
-}
-
 .popover-md .popover-viewport {
   opacity: 0;
   transition-delay: 100ms;

diff --git a/src/components/popover/popover.wp.scss b/src/components/popover/popover.wp.scss
@@ -10,10 +10,8 @@ $popover-wp-max-height:                90% !default;
 
 $popover-wp-border:                    2px solid #ccc !default;
 $popover-wp-border-radius:             0 !default;
-
-$popover-wp-text-color:                #000 !default;
-$popover-wp-background:                #f2f2f2 !default;
-$popover-wp-item-background:           $popover-wp-background !default;
+$popover-wp-text-color:                $text-wp-color !default;
+$popover-wp-background:                $background-wp-color !default;
 
 
 .popover-wp .popover-content {
@@ -30,14 +28,6 @@ $popover-wp-item-background:           $popover-wp-background !default;
   transform-origin: top left;
 }
 
-.popover-wp ion-content {
-  background: $popover-wp-background;
-}
-
-.popover-wp .popover-content .item {
-  background-color: $popover-wp-item-background;
-}
-
 .popover-wp .popover-viewport {
   opacity: 0;
   transition-delay: 100ms;

diff --git a/src/components/popover/test/basic/app-module.ts b/src/components/popover/test/basic/app-module.ts
@@ -139,11 +139,15 @@ export class PopoverRadioPage {
 
 @Component({
   template: `
-    <ion-list>
+    <ion-list style="margin-bottom: 0">
       <ion-list-header color="secondary">Ionic</ion-list-header>
       <button ion-item (click)="close()">Learn Ionic</button>
       <button ion-item (click)="close()">Documentation</button>
     </ion-list>
+    <div padding style="padding-top: 0">
+      <p>Paragraph text</p>
+      Some more text and <span color="danger">danger span</span>.
+    </div>
   `
 })
 export class PopoverListPage {