chore(many): remove redundant :host selector from styles

core/src/components/datetime-button/datetime-button.scss

@@ -11,7 +11,7 @@
   justify-content: center;
 }
 
-:host button {
+button {
   @include border-radius(8px);
   @include padding(6px, 12px, 6px, 12px);
   @include margin(0px, 2px, 0px, 2px);

core/src/components/datetime/datetime.ios.scss

@@ -16,25 +16,25 @@
 
 // Header
 // -----------------------------------
-:host .datetime-header {
+.datetime-header {
   @include padding($datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding);
 
   border-bottom: $datetime-ios-border-color;
-  
+
   font-size: 14px;
 }
 
-:host .datetime-header .datetime-title {
+.datetime-header .datetime-title {
   color: var(--title-color);
 }
 
-:host .datetime-header .datetime-selected-date {
+.datetime-header .datetime-selected-date {
   @include margin(10px, null, null, null);
 }
 
 // Calendar / Header / Action Buttons
 // -----------------------------------
-:host .calendar-action-buttons ion-item {
+.calendar-action-buttons ion-item {
   --padding-start: #{$datetime-ios-padding};
   --background-hover: transparent;
   --background-activated: transparent;
@@ -43,22 +43,22 @@
   font-weight: 600;
 }
 
-:host .calendar-action-buttons ion-item ion-icon,
-:host .calendar-action-buttons ion-buttons ion-button {
+.calendar-action-buttons ion-item ion-icon,
+.calendar-action-buttons ion-buttons ion-button {
   color: current-color(base);
 }
 
-:host .calendar-action-buttons ion-buttons {
+.calendar-action-buttons ion-buttons {
   @include padding($datetime-ios-padding * 0.5, 0, 0, 0);
 }
 
-:host .calendar-action-buttons ion-buttons ion-button {
+.calendar-action-buttons ion-buttons ion-button {
   @include margin(0, 0, 0, 0);
 }
 
 // Calendar / Header / Days of Week
 // -----------------------------------
-:host .calendar-days-of-week {
+.calendar-days-of-week {
   @include padding(0, $datetime-ios-padding * 0.5, 0, $datetime-ios-padding * 0.5);
 
   color: $text-color-step-700;
@@ -74,37 +74,41 @@
 
 // Calendar / Body
 // -----------------------------------
-:host .calendar-body .calendar-month .calendar-month-grid {
-
+.calendar-body .calendar-month .calendar-month-grid {
   /**
    * We need to apply the padding to
    * each month grid item otherwise
    * older versions of WebKit will consider
    * this padding a snapping point if applied
    * on .calendar-month
    */
-  @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5);
+  @include padding(
+    $datetime-ios-padding * 0.5,
+    $datetime-ios-padding * 0.5,
+    $datetime-ios-padding * 0.5,
+    $datetime-ios-padding * 0.5
+  );
 
   height: calc(100% - #{$datetime-ios-padding});
 }
 
-:host .calendar-day {
+.calendar-day {
   font-size: 20px;
 }
 
-:host .calendar-day:after {
+.calendar-day:after {
   opacity: 0.2;
 }
 
-:host .calendar-day:focus:after {
+.calendar-day:focus:after {
   background: current-color(base);
 }
 
 /**
  * Day that today but not selected
  * should have ion-color for text color.
  */
-:host .calendar-day.calendar-day-today {
+.calendar-day.calendar-day-today {
   color: current-color(base);
 }
 
@@ -113,58 +117,63 @@
  * is selected should have ion-color for
  * text color and be bolder.
  */
-:host .calendar-day.calendar-day-active {
+.calendar-day.calendar-day-active {
   color: current-color(base);
 
   font-weight: 600;
 }
 
-:host .calendar-day.calendar-day-active:after {
+.calendar-day.calendar-day-active:after {
   background: current-color(base);
 }
 
 /**
  * Day that is selected and is today
  * should have white color.
  */
-:host .calendar-day.calendar-day-today.calendar-day-active {
+.calendar-day.calendar-day-today.calendar-day-active {
   color: current-color(contrast);
 }
 
-:host .calendar-day.calendar-day-today.calendar-day-active:after {
+.calendar-day.calendar-day-today.calendar-day-active:after {
   background: current-color(base);
 
   opacity: 1;
 }
 
 // Time / Header
 // -----------------------------------
-:host .datetime-time {
+.datetime-time {
   @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding);
 
   font-size: 16px;
 }
 
-:host .datetime-time .time-header {
+.datetime-time .time-header {
   font-weight: 600;
 }
 
 // Footer
 // -----------------------------------
-:host .datetime-buttons {
-  @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5);
+.datetime-buttons {
+  @include padding(
+    $datetime-ios-padding * 0.5,
+    $datetime-ios-padding * 0.5,
+    $datetime-ios-padding * 0.5,
+    $datetime-ios-padding * 0.5
+  );
 
   border-top: $datetime-ios-border-color;
 }
 
-:host .datetime-buttons ::slotted(ion-buttons),
-:host .datetime-buttons ion-buttons {
+.datetime-buttons ::slotted(ion-buttons),
+.datetime-buttons ion-buttons {
   display: flex;
 
   align-items: center;
   justify-content: space-between;
 }
 
-:host .datetime-action-buttons {
+.datetime-action-buttons {
   width: 100%;
 }

core/src/components/datetime/datetime.md.scss

@@ -9,39 +9,39 @@
 
 // Header
 // -----------------------------------
-:host .datetime-header {
+.datetime-header {
   @include padding($datetime-md-header-padding, $datetime-md-header-padding, $datetime-md-header-padding, $datetime-md-header-padding);
 
   background: current-color(base);
   color: var(--title-color);
 }
 
-:host .datetime-header .datetime-title {
+.datetime-header .datetime-title {
   font-size: $datetime-md-title-font-size;
 
   text-transform: uppercase;
 }
 
-:host .datetime-header .datetime-selected-date {
+.datetime-header .datetime-selected-date {
   @include margin(30px, null, null, null);
 
   font-size: $datetime-md-selected-date-font-size;
 }
 
 // Calendar / Header / Action Buttons
 // -----------------------------------
-:host .datetime-calendar .calendar-action-buttons ion-item {
+.datetime-calendar .calendar-action-buttons ion-item {
   --padding-start: #{$datetime-md-header-padding};
 }
 
-:host .calendar-action-buttons ion-item,
-:host .calendar-action-buttons ion-button {
+.calendar-action-buttons ion-item,
+.calendar-action-buttons ion-button {
   color: #{$text-color-step-350};
 }
 
 // Calendar / Header / Days of Week
 // -----------------------------------
-:host .calendar-days-of-week {
+.calendar-days-of-week {
   @include padding(0px, 10px, 0px, 10px);
 
   color: $text-color-step-500;
@@ -53,7 +53,7 @@
 
 // Calendar / Body
 // -----------------------------------
-:host .calendar-body .calendar-month .calendar-month-grid {
+.calendar-body .calendar-month .calendar-month-grid {
   /**
    * 3px top padding adds enough spacing at
    * the top of the container for the selected
@@ -73,13 +73,13 @@
 }
 
 // Individual day button in month
-:host .calendar-day {
+.calendar-day {
   @include padding(13px, 0, 13px, 0px);
 
   font-size: $datetime-md-calendar-item-font-size;
 }
 
-:host .calendar-day:focus:after {
+.calendar-day:focus:after {
   background: current-color(base, 0.2);
 
   box-shadow: 0px 0px 0px 4px current-color(base, 0.2);
@@ -89,11 +89,11 @@
  * Day that today but not selected
  * should have ion-color for text color.
  */
-:host .calendar-day.calendar-day-today {
+.calendar-day.calendar-day-today {
   color: current-color(base);
 }
 
-:host .calendar-day.calendar-day-today:after {
+.calendar-day.calendar-day-today:after {
   border: 1px solid current-color(base);
 }
 
@@ -102,23 +102,23 @@
  * is selected should have ion-color for
  * text color and be bolder.
  */
-:host .calendar-day.calendar-day-active {
+.calendar-day.calendar-day-active {
   color: current-color(contrast);
 }
 
-:host .calendar-day.calendar-day-active:after {
+.calendar-day.calendar-day-active:after {
   border: 1px solid current-color(base);
 
   background: current-color(base);
 }
 
 // Time / Header
 // -----------------------------------
-:host .datetime-time {
+.datetime-time {
   @include padding($datetime-md-padding * 0.5, $datetime-md-padding, $datetime-md-padding * 0.5, $datetime-md-padding);
 }
 
-:host .time-header {
+.time-header {
   color: #{$text-color-step-350};
 }
 
@@ -137,7 +137,7 @@
 
 // Footer
 // -----------------------------------
-:host .datetime-buttons {
+.datetime-buttons {
   @include padding(10px, 10px, 10px, 10px);
 
   display: flex;
@@ -147,6 +147,6 @@
   justify-content: flex-end;
 }
 
-:host .datetime-view-buttons ion-button {
+.datetime-view-buttons ion-button {
   color: $text-color-step-200;
 }