Ionic2 Sass customization

[mjwheatley]

Is there a way to theme an app with Sass variables using this package? Ionic2 documentation (http://ionicframework.com/docs/v2/theming/theming-your-app/) mentions an app.variables.scss file where you can tweak the $colors map.

$colors: (

primary: #387ef5, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222,

);

[barbatus]

Hi, sorry for delays. I am considering too to add this feature in a separate package, though not sure it will be needed soon after release Meteor 1.3. Anyways, it's been already implemented for prev version of Ionic, i.e., take a look at this package https://atmospherejs.com/seba/ionic-sass, it should be done in the similar way for Ionic2.

[mjwheatley]

I have discovered some style issues with some of the components. I'm thinking these would be avoided with the use of SASS, so I'll continue to post on this issue instead of creating a new one.

The components effected are ion-radio, radio alerts, checkbox alerts, action sheets. Here are the css overrides I am using to correct the style of these elements:

/*Fix ion-radio element*/
.md .radio-checked .radio-inner {
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
}

.ios .radio-icon {
    border: none;
}

.ios .radio-inner {
    background-color: white;
    border-radius: 0;
    /*transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);*/
    transition: none;
}
/*End*/

/*Fix radio alert button group*/
.ios .alert-button-group {
    padding: 0; /*8px 8px 8px 24px;*/
}

/*Fix ios radio alert*/
.ios .alert-button {
    border-top: 1px solid #dbdbdf;
    text-align: center; /*right*/
    text-transform: none; /*uppercase*/
}

.ios .alert-radio-icon {
    border-style: none;
}

.ios .alert-radio-icon:after, .ios .alert-radio[aria-checked=true] .alert-radio-icon:after {
    background-color: white;
    border-radius: 0;
    transition: none;
    top: 2px;
    left: 0;
    width: 6px;
    height: 12px;
}

/*End*/

/*Fix md radio alert*/
.md .alert-radio-icon {
    top: 16px;
    left: -15px;
    min-width: 0;
    width: 16px;
    height: 16px;
}
.md .alert-radio-icon:after, .md .alert-radio[aria-checked=true] .alert-radio-icon:after {
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
}

.md .alert-button-group {
    padding: 8px 8px 8px 24px;
    display: -webkit-box;
}

.md .alert-button {
    border-top: none;
    border-right: none; /*1px solid #dbdbdf*/
    text-align: center;
    display: inline;
    min-width: 0;
}
/*End*/

/*Fix alert checkbox*/
.ios .alert-checkbox-icon {
    top: 2px;
}
.ios .alert-checkbox[aria-checked=true] .alert-checkbox-icon:after {
    border: none;
}

.md .alert-checkbox-icon {
    top: 5px;
}

.md .alert-checkbox[aria-checked=true] .alert-checkbox-icon .alert-checkbox-inner {
    border: none;
}

.md .alert-checkbox[aria-checked=true] .alert-checkbox-icon:after {
    top: 0px;
    left: 3px;
    width: 6px;
    height: 10px;
}
/*End*/

/*Action Sheet*/
.ios .action-sheet-button {
    text-align: center;
}

.md .action-sheet-button {
    border: none;
}
.md .action-sheet-title {
     border-bottom: none; /*1px solid #d6d6da; */
}
.md .action-sheet-container {
     padding: 0;
}
.md .action-sheet-wrapper {
    bottom: -10px;
}
/*End*/

[slippyC]

Thanks for styles!

Added to check them out... You saved me some time man!