variables.scss

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/v2/theming/
$font-path: "../assets/fonts";
@font-face {
  font-family: "Lato-Regular";
  src: url($font-path+'/Lato-Regular.ttf');
}
@font-face {
  font-family: "Lato-Black";
  src: url($font-path+'/Lato-Black.ttf');
}
@font-face {
  font-family: "Lato-Thin";
  src: url($font-path+'/Lato-Thin.ttf');
}
@font-face {
  font-family: "Lato-Italic";
  src: url($font-path+'/Lato-Italic.ttf');
}
@font-face {
  font-family: "Lato-Medium";
  src: url($font-path+'/Lato-Medium.ttf');
}
@font-face {
  font-family: "Lato-Bold";
  src: url($font-path+'/Lato-Bold.ttf');
}
@font-face {
  font-family: "Lato-Semibold";
  src: url($font-path+'/Lato-Semibold.ttf');
}
@font-face {
  font-family: "Lato-Heavy";
  src: url($font-path+'/Lato-Heavy.ttf');
}

@import "ionic.globals";

// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.

$colors: (
  primary:      #00AF64,
  primarydark:  #016B3E,
  secondary:    #FFC900,
  cancel:       #424242,
  danger:       #E31B48,
  dark:         #CCCCCC,
  light:        #DDDDDD,
  input:        #F7F7F7,
  icon:         #777777,
  cards:        #F7F7F7,
  card:         #FFFFFF,
  header:       #F7F7F7,
  navbar:       #EDEDED,
  waiting:      #CCCCCC,
  background:   #FFFFFF,
  text:         #777777,
  grey:         #777777,
  white:        #FFFFFF,
  black:        #000000,
  yellow:       #FFC900,
  orange:       #F7921E,
  blue:         #1553A5,
  purple:       #603795
);

// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/

$background-color: color($colors, background);
$toolbar-text-color: color($colors, text);
$modal-inset-height-small: 90%;

// App Web Variables
// --------------------------------------------------
// Web only Sass variables can go here

$font-family-base: "Lato-Regular", "Roboto", "Helvetica Neue", sans-serif;

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here

$font-family-ios-base: -apple-system, "Helvetica Neue", "Roboto", sans-serif;
$toolbar-ios-text-color: color($colors, primary);
$toolbar-ios-button-color: color($colors, primary);
$card-ios-background-color: color($colors, card);

// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here

$font-family-md-base: "Roboto", "Helvetica Neue", sans-serif;
$toolbar-md-text-color: color($colors, primary);
$toolbar-md-button-color: color($colors, primary);
$card-md-background-color: color($colors, card);

// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here

$font-family-wp-base: "Lato-Regular", "Roboto", "Helvetica Neue", sans-serif;
$toolbar-wp-text-color: color($colors, primary);
$toolbar-wp-button-color: color($colors, primary);
$card-wp-background-color: color($colors, card);

// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.

@import "ionic.theme.default";

// Ionicons
// --------------------------------------------------
// The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/v2/ionicons/

@import "ionic.ionicons";

// Fonts
// --------------------------------------------------

@import "roboto";
@import "noto-sans";