Skip to content

Instantly share code, notes, and snippets.

View chrisgriffith's full-sized avatar

Chris Griffith chrisgriffith

View GitHub Profile
@chrisgriffith
chrisgriffith / home.html
Created April 9, 2019 20:12
Ionic Design: CTA Button Uppercase
<ion-button class="ion-text-uppercase">Register Result</ion-button>
@chrisgriffith
chrisgriffith / home.scss
Created April 9, 2019 20:14
Ionic Design: Avatar CSS Final
.avatar {
border-radius: 10px;
max-width: 45px;
display: block;
float: left;
margin-right: 1rem;
}
@chrisgriffith
chrisgriffith / home.html
Created April 9, 2019 20:15
Ionic Design: CTA Button Final
<ion-button size="small" class="ion-float-right ion-text-uppercase">Register Result</ion-button>
@chrisgriffith
chrisgriffith / home.scss
Created April 9, 2019 20:16
Ionic Design
.card-content-md {
padding-inline-start: 0;
padding-inline-end: 0;
}
.card-content-ios {
-webkit-padding-start: 0 !important;
padding-inline-start: 0 !important;
-webkit-padding-end: 0 !important;
padding-inline-end: 0 !important;
@chrisgriffith
chrisgriffith / home.html
Created April 9, 2019 20:18
Ionic Design: Row Alignment
<ion-row class="ion-align-items-center”>
@chrisgriffith
chrisgriffith / home.html
Created April 9, 2019 20:18
Ionic Design: Row alignment
<ion-row class="ion-align-items-center ion-justify-content-between">
@chrisgriffith
chrisgriffith / home.scss
Created April 25, 2019 15:10
Ionic Design: Profile - Step 1
ion-content {
--background: url(../../assets/background_full.jpg) no-repeat top center/cover fixed, #fff;
position: relative;
height: 100%;
width: 100%;
}
ion-toolbar {
--background: transparent;
}
@chrisgriffith
chrisgriffith / home.html
Created April 25, 2019 15:12
Ionic Design: Profile - Step 1
<ion-header translucent no-border>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button color="light">
<ion-icon slot="start" name="ios-arrow-back"></ion-icon>
Favorites
</ion-button>
</ion-buttons>
<ion-title>&nbsp;</ion-title>
<ion-buttons slot="end">
<ion-header>
 <ion-toolbar>
   <ion-buttons slot="secondary">
     <ion-button fill="outline">
       <ion-icon slot="start" name="star"></ion-icon>
       Star
     </ion-button>
   </ion-buttons>
   <ion-title>Theme Demo</ion-title>
   <ion-buttons slot="primary">
:root {
 --mycolor: rebeccapurple;
 --mytextcolor: #fff;
 /** primary **/
 --ion-color-primary: #3880ff;
 --ion-color-primary-rgb: 56, 128, 255;
 --ion-color-primary-contrast: #ffffff;
 --ion-color-primary-contrast-rgb: 255, 255, 255;
 --ion-color-primary-shade: #3171e0;