Ionic 4 - globals.scss and general style guidance

lbrockma · August 23, 2019, 4:36am

Hi-

I’m currently migrating a project from Ionic 3 to Ionic 4. I have run into some considerable hiccups along the way, mostly related to the styling of my app. I used to rely pretty heavily on the app\app.scss file in Ionic 3 to maintain consistency in styling throughout the app.

In Ionic 4, one of the migration guides I read pointed me to believe I needed to use the newer ./globals.scss file. However, whenever I place styles in here, they do not appear to propagated to my components when I inspect those components through Firefox.

Has anyone had any luck with converting their global style / formatting from an Ionic v3 to Ionic v4 project?

Is there a good guide to the new variable breakdowns? I found a random post on the repo that was requesting help documenting the new variables, I was just curious if any of this documentation had been made publicly available.

And for extra credit, if someone is feeling really generous, can you help better explain the use of the host:{} and root:{} css4 wrappers? I have been struggling to understand this new Shadow DOM, other than that it cannot be pierced by CSS selectors and attributes, but has to be manipulated through variables (which is where all of the selectors like --ion-base-color: transparent would be used).

How does ViewEncapsulation (see here) affect the Shadow DOM? I guess I am reading this thread wrong, but it appeared that I should able to set the encapsulation to none, and essentially my pre-Ionic v4 styling that was targeting CSS attributes and using CSS selectors would continue to work?

Thanks!

-Leif

crmontiel · August 27, 2019, 6:20pm

It’s weird because I’ve mutated and several applications from v3 to v4 and v5 in beta, and the global works perfectly.

You can share the css and html code to be able to check and help you more clearly.

lbrockma · August 28, 2019, 3:04am

Here’s one of the “many” pages I am struggling with.

This in particular is a custom calendar component I wrote for an Ionic 3 app; it’s pretty simple.

Component TS File
calendar-view.component.ts

import { Component, OnInit, ViewEncapsulation, Output, EventEmitter, Input, SimpleChanges } from '@angular/core';
import { CalendarMonth, CalendarDay, Locations } from '../../library/library';
import { Database } from '../../database.service';
import { } from '@angular/compiler';

@Component({
  selector: 'calendar-view',
  templateUrl: './calendar-view.component.html',
  styleUrls: ['./calendar-view.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class CalendarViewComponent implements OnInit { ... )

HTML File
calendar-view.component.html

<div class="calendar-header">
  <ion-row class="calendar-month" text-center>
    <ion-col size="2" (click)="goToLastMonth()" style="margin:auto; display:block;">
      <ion-icon name="arrow-back"></ion-icon>
    </ion-col>
    <ion-col size="8" slot>
      <h3><strong>{{thisMonth.original.monthString}}</strong></h3> {{thisMonth.original.year}}
    </ion-col>
    <ion-col size="2" (click)="goToNextMonth()" style="margin:auto; display:block;">
      <ion-icon name="arrow-forward"></ion-icon>
    </ion-col>
  </ion-row>
</div>
<div class="calendar-body">
  <ion-grid style="--ion-grid-columns: 7">
    <ion-row class="calendar-weekday" text-center>
      <ion-col>Su</ion-col>
      <ion-col>Mo</ion-col>
      <ion-col>Tu</ion-col>
      <ion-col>We</ion-col>
      <ion-col>Th</ion-col>
      <ion-col>Fr</ion-col>
      <ion-col>Sa</ion-col>
    </ion-row>
    <ion-row class="calendar-date" text-center>
      <ion-col size="1" *ngFor="let lastDay of lastMonth.days">
        <div class="{{lastDay.cssClass}}">{{lastDay.date}}</div>
      </ion-col>
      <ion-col size="1" *ngFor="let day of thisMonth.days" (click)="onChanged(day)">
        <div class="{{day.cssClass}}" id="{{day.cssId}}">{{day.date}} </div>
        <div class="event-bullet" *ngIf="checkEvent(day)"></div>
      </ion-col>
      <ion-col size="1" *ngFor="let nextDay of nextMonth.days" class="next-month" (click)="goToNextMonth()"
        class="{{nextDay.cssClass}}">{{nextDay.date}}</ion-col>
    </ion-row>
  </ion-grid>
</div>

CSS File / Component Styles
calendar-view.component.scss

[col-1] {
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 8.33333%;
      -ms-flex: 0 0 8.33333%;
      flex: 0 0 14.285714285714286%;
      width: 14.285714285714286%;
      max-width: 14.285714285714286%;
    }
    .col {
      text-align: center;
      padding: 5px;
    }
    .last-month,
    .next-month {
      --color: #999999;
      font-size: 90%;
    }
    .currentDate,
    .otherDate {
      padding: 5px;
    }
    /*.currentDate{
        font-weight: bold;
        background-color: #CE0E2D;
        color: #ffffff;
        border-radius: 30px;
      }*/
    .calendar-header {
      display: block;
      width: auto;
      margin: auto;
      --background-color: #ffffff;
      --color: #212121;
    }
    .calendar-month {
      margin: auto;
      width: 90%;
      --border-bottom: solid 3px #ce0e2d;
    }
    .event-bullet {
      display: block;
      margin: 2px auto;
      height: 5px;
      width: 5px;
      --background-color: #ce0e2d;
      --border-radius: 30px;
    }
    .selected-date {
      --color: white;
      --background-color: #ce0e2d;
      --border-radius: 50px;

      .event-bullet {
        margin: 2px auto;
        height: 5px;
        width: 5px;
        --background-color: #ffffff;
        --border-radius: 30px;
      }
    }
    .unselected-date {
      border: none;
    }
    .calendar-body {
      .grid {
        padding: 0;
      }
      .col:last-child {
        border-right: none;
      }
      .calendar-weekday,
      .calendar-date {
        text-align: center;
        margin: 0;
      }
      .calendar-weekday {
        font-weight: bold;
        --color: #999999;
      }
      /*.calendar-date {
         // border-top: solid 1px #1a732d;
         // border-bottom: solid 1px #212121;
        }*/
    }

Some of the issues I see, are the lack of any properties being passed to my html elements placed inside an ion-row or ion-col. Also, notice I have a special <div class="event-bullet"/> If a date has an event, there should be a nice, tiny ellipsis that renders below the date. I can’t seem to get those to propagate on screen either.

Thanks for taking a look. I’m curious if I am missing something easy? I attached the Ionic v3 look / feel compared to the upgrade, Ionic v4 app as screenshots to this post so you can see what should be, and what isn’t quite happening.

Ionic 3

Ionic 4