-
-
Save mhartington/a4b756d235dd5f988c80 to your computer and use it in GitHub Desktop.
//Custom Theme test | |
// Colors | |
// ------------------------------- | |
$custom: #057b6c !default; | |
// Buttons | |
// ------------------------------- | |
$button-custom-bg: $custom !default; | |
$button-custom-text: #fff !default; | |
$button-custom-border: $custom !default; | |
$button-custom-active-bg: #fafafa !default; | |
$button-custom-active-border: #ccc !default; | |
// Bars | |
// ------------------------------- | |
$bar-custom-bg: rgba($button-custom-bg, $bar-transparency) !default; | |
$bar-custom-text: $button-custom-text !default; | |
$bar-custom-border: $button-custom-border !default; | |
$bar-custom-active-bg: $button-custom-active-bg !default; | |
$bar-custom-active-border: $button-custom-active-border !default; | |
// Tabs | |
// ------------------------------- | |
$tabs-custom-bg: $button-custom-bg !default; | |
$tabs-custom-border: $button-custom-border !default; | |
$tabs-custom-text: $button-custom-text !default; | |
$tabs-striped-off-color: #000; | |
$tabs-striped-off-opacity: .4; | |
$tabs-striped-border-width: 4px; | |
// Items | |
// ------------------------------- | |
$item-custom-bg: $button-custom-bg !default; | |
$item-custom-border: $button-custom-border !default; | |
$item-custom-text: $button-custom-text !default; | |
$item-custom-active-bg: $button-custom-active-bg !default; | |
$item-custom-active-border: $button-custom-active-border !default; | |
// Toggle | |
// ------------------------------- | |
$toggle-on-custom-bg: $button-custom-border !default; | |
$toggle-on-custom-border: $toggle-on-custom-bg !default; | |
$toggle-on-stable-bg: $button-stable-border !default; | |
// Checkbox | |
// ------------------------------- | |
$checkbox-off-border-custom: $button-custom-border !default; | |
$checkbox-on-bg-custom: $button-custom-border !default; | |
// Range | |
// ------------------------------- | |
$range-custom-track-bg: $button-custom-border !default; | |
// Badges | |
// ------------------------------- | |
$badge-custom-bg: $button-custom-bg !default; | |
$badge-custom-text: $button-custom-text !default; | |
//Util | |
// Allow parent element of tabs to define color, or just the tab itself */ | |
.tabs-custom > .tabs, | |
.tabs.tabs-custom { | |
@include tab-style($tabs-custom-bg, $tabs-custom-border, $tabs-custom-text); | |
@include tab-badge-style($tabs-custom-text, $tabs-custom-bg); | |
} | |
@mixin tabs-striped($style, $color) { | |
&.#{$style} { | |
.tab-item.tab-item-active, | |
.tab-item.active, | |
.tab-item.activated { | |
margin-top: -4px; | |
color: $color; | |
border-style: solid; | |
border-width: $tabs-striped-border-width 0 0 0; | |
border-color: $color; | |
} | |
} | |
} | |
.tabs-striped { | |
.tabs { | |
background-color: #fff; | |
background-image: none; | |
border: 0; | |
} | |
@include tabs-striped('tabs-custom', $custom); | |
.tab-item { | |
color: $tabs-striped-off-color; | |
opacity: $tabs-striped-off-opacity; | |
} | |
} | |
// Navigational tab */ | |
// Active state for tab | |
.tab-item.tab-item-active, | |
.tab-item.active, | |
.tab-item.activated { | |
opacity: 1; | |
&.tab-item-custom { | |
color: $custom; | |
} | |
} | |
.custom, | |
a.custom { | |
color: $custom; | |
} | |
.custom-bg { | |
background-color: $custom; | |
} | |
.custom-border { | |
border-color: $button-custom-border; | |
} | |
.tabs .tab-item .badge, | |
.badge { | |
&.badge-custom { | |
@include badge-style($badge-custom-bg, $badge-custom-text); | |
} | |
} | |
.bar { | |
&.bar-custom { | |
@include bar-style($bar-custom-bg, $bar-custom-border, $bar-custom-text); | |
} | |
} | |
.bar-custom { | |
.button { | |
@include button-style($bar-custom-bg, $bar-custom-border, $bar-custom-active-bg, $bar-custom-active-border, $bar-custom-text); | |
@include button-clear($bar-custom-text, $bar-title-font-size); | |
} | |
} | |
.button { | |
&.button-custom { | |
@include button-style($button-custom-bg, $button-custom-border, $button-custom-active-bg, $button-custom-active-border, $button-custom-text); | |
@include button-clear($button-custom-border); | |
@include button-outline($button-custom-border); | |
} | |
} | |
//This will be here | |
&.button-outline { | |
@include button-outline($button-custom-border); | |
@include transition(opacity .1s); | |
background: none; | |
box-shadow: none; | |
} | |
.button-clear { | |
@include button-clear($button-custom-border); | |
@include transition(opacity .1s); | |
padding: 0 $button-clear-padding; | |
max-height: $button-height; | |
border-color: transparent; | |
background: none; | |
box-shadow: none; | |
&.active, | |
&.activated { | |
opacity: 0.3; | |
} | |
} | |
.item { | |
&.item-custom { | |
@include item-style($item-custom-bg, $item-custom-border, $item-custom-text); | |
} | |
} | |
.item.active, | |
.item.activated, | |
.item-complex.active .item-content, | |
.item-complex.activated .item-content, | |
.item .item-content.active, | |
.item .item-content.activated { | |
&.item-custom { | |
@include item-active-style($item-custom-active-bg, $item-custom-active-border); | |
} | |
} | |
.item-complex { | |
&.item-custom > .item-content { | |
@include item-style($item-custom-bg, $item-custom-border, $item-custom-text); | |
&.active, | |
&:active { | |
@include item-active-style($item-custom-active-bg, $item-custom-active-border); | |
} | |
} | |
} | |
.checkbox { | |
&.checkbox-custom { | |
@include checkbox-style($checkbox-off-border-custom, $checkbox-on-bg-custom); | |
} | |
} | |
.toggle { | |
&.toggle-custom { | |
@include toggle-style($toggle-on-custom-border, $toggle-on-custom-bg); | |
} | |
} | |
.range { | |
&.range-custom { | |
input { | |
@include range-style($range-custom-track-bg); | |
} | |
} | |
} |
For that you would use this
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default;
$font-family-light-sans-serif: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace !default;
I need to actually change the sizes of my modal window based on specified style guide.
e.g. in my app.css have the following
.modal {
align: center;
width: 1020px;
height: 790px;
@include transition(opacity .1s);
background: none;
box-shadow: none;
}
Doesn't take affect though for any div with modal.
Please guide.
Does this help me with my android tablet? I am trying to get the nav tab which appears on my browser at the top to appear at the bottom for my Tablet.
It's giving me a sass error when gulp auto-compiles the ionic.app.scss file ""Base-level rules cannot contain the parent-selector-referencing character '&'."
Give me an error: Error: Undefined variable: "$bar-transparency".
i think that its a dude, i need a styles for web but dont need the md of ionic, how can i change thats?
I only want to change the fonts in the intire app. How do I do this?