Migration scss IONIC4

Ionic Framework ionic-v3
1

I’migrating my project from ionic 3 to ionic 4 and all my scss is not read.

Version ionic v3

PNG
mainappsLogin3.PNG.jpg1918×948 258 KB

Version ionic v4
mainappsLogin4
mainappsLogin4.PNG1447×943 46.2 KB

login.page.scss


:host {
	ion-content{
		background-image: url('../../assets/img/background-login.jpg');
		background-size: cover;
	}
	.remember{
		font-size: 11pt;
		background-color: transparent!important;
	}
	.label{
		margin-left: 3px
	}
    video {
        position: fixed;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        transform: translateX(-50%) translateY(-50%);
    }
	
	.scroll-content {
		// align-content: center;
		display: flex;
		 flex-direction: column;
		 justify-content: center;
		text-align: center;
		overflow-y: hidden;
		position: fixed;
	}

	ion-card.card {
		box-shadow: none;
		background:#D9D9D9;
		border-radius: 5px;
	}

	a, p,
	ion-card-header.card-header {
		color: #E36524!important;
	}

	.list > .item-block:first-child {
		border: medium none;
	}
	.item-md {
		 padding-left: 0; 
	  }
	
	.logo{
		background-color: transparent!important;
		padding-top: 10px;
	}

	.footer{
		font-size: 9.5pt;
	}

	.item {
		margin-bottom: 10px;
		background: rgba(255, 255, 255, 0.5);
		border: medium none;

		.text-input {
			color: #E36524;
		}

		input::-moz-placeholder  {
			color:#E36524!important;
		}

		input:-moz-placeholder {
			color:#E36524!important;
		}

		*::-webkit-input-placeholder  {
			color:#E36524!important;
		}

		*:-ms-input-placeholder  {
			color: #E36524!important;
		}

		*:-moz-placeholder  {
			color: #E36524!important;
		}
	}

	.icon {
		padding-right: 10px;
	}


	
}

login.page.html

<!--
  Generated template for the LoginPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<!--<ion-header>

  <ion-navbar>
    <ion-title>login</ion-title>
  </ion-navbar>

</ion-header> -->


<ion-content padding style="float:right;background-image: url('')">

  <ion-card style="width: 40%; max-width: 430px; min-width:350px; min-height:270px; align-self: center; ">
    <ion-card-header>
      <ion-img class="logo" width="80" height="80" src="">
      </ion-img>
    </ion-card-header>
    <ion-card-content>
      <ion-list>
        <ion-item>
          <ion-input [(ngModel)]="Shopkeeper" type="text" placeholder="Esercente"></ion-input>
        </ion-item>
        <ion-item>
          <ion-input [(ngModel)]="Username" type="text" placeholder="Username"></ion-input>
        </ion-item>
        <ion-item>
          <ion-input [(ngModel)]="Password" type="password" placeholder="Password"></ion-input>
        </ion-item>
        <ion-grid>
          <ion-row>
            <ion-col>
              <ion-row>
                <ion-item class="remember">
                  <ion-label>
                    <span>Ricorda</span>
                  </ion-label>
                  <ion-checkbox color="default" [(ngModel)]="Remember" style="align-self:auto; "></ion-checkbox>

                </ion-item>

              </ion-row>
            </ion-col>
            <ion-col>
              <button ion-button block outline color="default" (click)="login()">Log in</button>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-list>
      <h6 class="footer"> <br> <br>
        <br> </h6>
    </ion-card-content>
  </ion-card>





</ion-content>```
2

Hello,
for pimples
<ion-button> </ ion-button> and not <button ion-button> </ button>
in your scss put – in front of background, color ect…

3

Many properties are now addressable only as CSS variables. You will need to look at the documentation to see what must be set using them

Also pt is not a valid CSS font size unit.

4

@ChrisGriiffith Can you explain why pt is not a valid CSS font size unit?

From what I know, pt means point and is a valid CSS unit:

https://www.w3.org/Style/Examples/007/units.en.html

Although it’s not advisable to use it (unless for printing and the like):

The so-called absolute units ( cm , mm , in , pt and pc ) mean the same in CSS as everywhere else, but only if your output device has a high enough resolution. On a laser printer, 1cm should be exactly 1 centimeter. But on low-resolution devices, such as computer screens, CSS doesn’t require that. And indeed, the result tends to be different from one device to another and from one CSS implementation to another. It’s better to reserve these units for high-resolution devices and in particular for printed output. On computer screens and handheld devices, you’ll probably not get what you expect.

About the OP, the problem is probably related to the shadow dom, and he needs to use CSS variables for that (assuming there are CSS variables for what he intends to do).

5

I was taught that unit type was a no-no. It is not mention in the Mozilla docs, which i reference prior to posting. Given the variety of screen densities and accessibility needs, I tend to try to keep my font sizes fluid.