Common CSS styling for Ionic 2 theme

variable.scss

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

// Font path is used to include ionicons,
// roboto, and noto sans fonts
$font-path: "../assets/fonts";


// The app direction is used to include
// rtl styles in your app. For more info, please see:
// http://ionicframework.com/docs/theming/rtl-support/
$app-direction: ltr;


@import "ionic.globals";


// 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/theming/overriding-ionic-variables/




// 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:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  semaYellow: #e6c229,
  semaOrange: #f17105,
  semaRed: #d11149,
  semaPurple: #6610f2,
  semaBlue: #1882cf,
  semaGray: #cecdcd,
  semaDark: #313132,
  semaBlack: #000000,
  mPesaGreen: #8bc43f
);


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




// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
$radio-md-icon-border-radius: 0px;



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




// 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/ionicons/

@import "ionic.ionicons";


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

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


.transparent-item {
  background: none!important;
  border: none!important;
  user-select: none!important;
};

.label-text-white {
  font-size: 0.625em;
  color: #fff!important;
};

.tall-btn {
  height: 3.125em!important;
  border-radius: 6px;
};

.taller-btn {
  height: 4em!important;
  border-radius: 6px;
};

.normal-caps {
  text-transform: none!important;
  /* font-weight: 300;
  font-size: 16px; */
};

.no-box-shadow {
  box-shadow: none!important;
};

.spacer-ex-large {
  /*height: 50px;*/
  height: 3.125em;
  width: 100%;
};

.spacer-large {
  /*height: 30px;*/
  height: 1.875em;
  width: 100%;
};

.spacer-small {
  /*height: 20px;*/
  height: 1.250em;
  width: 100%;
};

.spacer-ex-small {
  /*height: 10px;*/
  height: 0.625em;
  width: 100%;
};

.spacer-nano {
  /*height: 5px;*/
  height: 0.313em;
  width: 100%;
};

.no-padding {
  padding: 0;
};

.theme-round-full-btn{
  height: 3.5em!important;
  border-radius: 30px!important; 
};

.theme-squire-full-btn{
  height: 3.5em!important;
};

.center-placing-btn{
  padding-left: 8rem; 
  padding-right: 8rem;
};

.center{
  display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
};

.border-less-item{
  .item-inner{
    border: none!important;
  }
};