mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
remove primary/secondary/tertiary colours
This commit is contained in:
Adam Bradley
413
dist/css/ionic.css
vendored
413
dist/css/ionic.css
vendored
@ -2552,26 +2552,19 @@ a.subdued {
|
||||
color: #fff; }
|
||||
.bar.bar-clear .title {
|
||||
color: #fff; }
|
||||
.bar.bar-primary {
|
||||
background-color: #4a87ee;
|
||||
border-color: #1b68ea;
|
||||
background-image: linear-gradient(0deg, #1b68ea, #1b68ea 50%, transparent 50%);
|
||||
color: white; }
|
||||
.bar.bar-primary .title {
|
||||
color: white; }
|
||||
.bar.bar-secondary {
|
||||
.bar.bar-light {
|
||||
background-color: white;
|
||||
border-color: #d9d9d9;
|
||||
background-image: linear-gradient(0deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
|
||||
border-color: #b2b2b2;
|
||||
background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
|
||||
color: #444444; }
|
||||
.bar.bar-secondary .title {
|
||||
.bar.bar-light .title {
|
||||
color: #444444; }
|
||||
.bar.bar-tertiary {
|
||||
background-color: whitesmoke;
|
||||
border-color: #b5b5b5;
|
||||
background-image: linear-gradient(0deg, #b5b5b5, #b5b5b5 50%, transparent 50%);
|
||||
.bar.bar-stable {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #bbbbbb;
|
||||
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
|
||||
color: #444444; }
|
||||
.bar.bar-tertiary .title {
|
||||
.bar.bar-stable .title {
|
||||
color: #444444; }
|
||||
.bar.bar-positive {
|
||||
background-color: #4a87ee;
|
||||
@ -2615,20 +2608,6 @@ a.subdued {
|
||||
color: white; }
|
||||
.bar.bar-royal .title {
|
||||
color: white; }
|
||||
.bar.bar-light {
|
||||
background-color: white;
|
||||
border-color: #dddddd;
|
||||
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
|
||||
color: #444444; }
|
||||
.bar.bar-light .title {
|
||||
color: #444444; }
|
||||
.bar.bar-stable {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #bbbbbb;
|
||||
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
|
||||
color: #444444; }
|
||||
.bar.bar-stable .title {
|
||||
color: #444444; }
|
||||
.bar.bar-dark {
|
||||
background-color: #444444;
|
||||
border-color: #444444;
|
||||
@ -2677,52 +2656,35 @@ a.subdued {
|
||||
right: 5px;
|
||||
bottom: 5px; }
|
||||
|
||||
.bar-primary .button {
|
||||
color: white;
|
||||
background-color: #4a87ee;
|
||||
border-color: #1b68ea; }
|
||||
.bar-primary .button:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.bar-primary .button.active, .bar-primary .button:active {
|
||||
background-color: #3378ec;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #1b68ea; }
|
||||
.bar-primary .button.button-clear {
|
||||
color: white;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
font-size: 18px; }
|
||||
|
||||
.bar-secondary .button {
|
||||
.bar-light .button {
|
||||
color: #444444;
|
||||
background-color: white;
|
||||
border-color: #d9d9d9; }
|
||||
.bar-secondary .button:hover {
|
||||
border-color: #b2b2b2; }
|
||||
.bar-light .button:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.bar-secondary .button.active, .bar-secondary .button:active {
|
||||
background-color: white;
|
||||
.bar-light .button.active, .bar-light .button:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #cccccc; }
|
||||
.bar-secondary .button.button-clear {
|
||||
color: #444444;
|
||||
border-color: black; }
|
||||
.bar-light .button.button-clear {
|
||||
color: white;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
font-size: 18px; }
|
||||
|
||||
.bar-tertiary .button {
|
||||
.bar-stable .button {
|
||||
color: #444444;
|
||||
background-color: whitesmoke;
|
||||
border-color: #b5b5b5; }
|
||||
.bar-tertiary .button:hover {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #bbbbbb; }
|
||||
.bar-stable .button:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.bar-tertiary .button.active, .bar-tertiary .button:active {
|
||||
background-color: white;
|
||||
.bar-stable .button.active, .bar-stable .button:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #cfcfcf; }
|
||||
.bar-tertiary .button.button-clear {
|
||||
border-color: black; }
|
||||
.bar-stable .button.button-clear {
|
||||
color: white;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
@ -2830,40 +2792,6 @@ a.subdued {
|
||||
box-shadow: none;
|
||||
font-size: 18px; }
|
||||
|
||||
.bar-light .button {
|
||||
color: #444444;
|
||||
background-color: white;
|
||||
border-color: #dddddd; }
|
||||
.bar-light .button:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.bar-light .button.active, .bar-light .button:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.bar-light .button.button-clear {
|
||||
color: white;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
font-size: 18px; }
|
||||
|
||||
.bar-stable .button {
|
||||
color: #444444;
|
||||
background-color: #f8f8f8;
|
||||
border-color: #bbbbbb; }
|
||||
.bar-stable .button:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.bar-stable .button.active, .bar-stable .button:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.bar-stable .button.button-clear {
|
||||
color: white;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
font-size: 18px; }
|
||||
|
||||
.bar-dark .button {
|
||||
color: white;
|
||||
background-color: #444444;
|
||||
@ -2933,20 +2861,15 @@ a.subdued {
|
||||
border-top-width: 1px;
|
||||
background-size: 0;
|
||||
line-height: 49px; }
|
||||
.tabs.tabs-primary {
|
||||
background-color: #4a87ee;
|
||||
background-image: linear-gradient(0deg, #1b68ea, #1b68ea 50%, transparent 50%);
|
||||
border-color: #1b68ea;
|
||||
color: white; }
|
||||
.tabs.tabs-secondary {
|
||||
.tabs.tabs-light {
|
||||
background-color: white;
|
||||
background-image: linear-gradient(0deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
|
||||
border-color: #d9d9d9;
|
||||
background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
|
||||
border-color: #b2b2b2;
|
||||
color: #444444; }
|
||||
.tabs.tabs-tertiary {
|
||||
background-color: whitesmoke;
|
||||
background-image: linear-gradient(0deg, #b5b5b5, #b5b5b5 50%, transparent 50%);
|
||||
border-color: #b5b5b5;
|
||||
.tabs.tabs-stable {
|
||||
background-color: #f8f8f8;
|
||||
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
|
||||
border-color: #bbbbbb;
|
||||
color: #444444; }
|
||||
.tabs.tabs-positive {
|
||||
background-color: #4a87ee;
|
||||
@ -2978,16 +2901,6 @@ a.subdued {
|
||||
background-image: linear-gradient(0deg, #552bdf, #552bdf 50%, transparent 50%);
|
||||
border-color: #552bdf;
|
||||
color: white; }
|
||||
.tabs.tabs-light {
|
||||
background-color: white;
|
||||
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
|
||||
border-color: #dddddd;
|
||||
color: #444444; }
|
||||
.tabs.tabs-stable {
|
||||
background-color: #f8f8f8;
|
||||
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
|
||||
border-color: #bbbbbb;
|
||||
color: #444444; }
|
||||
.tabs.tabs-dark {
|
||||
background-color: #444444;
|
||||
background-image: linear-gradient(0deg, #444444, #444444 50%, transparent 50%);
|
||||
@ -3055,12 +2968,10 @@ a.subdued {
|
||||
/* Active state for tab */
|
||||
.tab-item.active, .tab-item:active {
|
||||
opacity: 1; }
|
||||
.tab-item.active.tab-item-primary, .tab-item:active.tab-item-primary {
|
||||
color: #4a87ee; }
|
||||
.tab-item.active.tab-item-secondary, .tab-item:active.tab-item-secondary {
|
||||
.tab-item.active.tab-item-light, .tab-item:active.tab-item-light {
|
||||
color: white; }
|
||||
.tab-item.active.tab-item-tertiary, .tab-item:active.tab-item-tertiary {
|
||||
color: whitesmoke; }
|
||||
.tab-item.active.tab-item-stable, .tab-item:active.tab-item-stable {
|
||||
color: #f8f8f8; }
|
||||
.tab-item.active.tab-item-positive, .tab-item:active.tab-item-positive {
|
||||
color: #4a87ee; }
|
||||
.tab-item.active.tab-item-calm, .tab-item:active.tab-item-calm {
|
||||
@ -3073,10 +2984,6 @@ a.subdued {
|
||||
color: #f0b840; }
|
||||
.tab-item.active.tab-item-royal, .tab-item:active.tab-item-royal {
|
||||
color: #8a6de9; }
|
||||
.tab-item.active.tab-item-light, .tab-item:active.tab-item-light {
|
||||
color: white; }
|
||||
.tab-item.active.tab-item-stable, .tab-item:active.tab-item-stable {
|
||||
color: #f8f8f8; }
|
||||
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
|
||||
color: #444444; }
|
||||
|
||||
@ -3233,29 +3140,21 @@ a.subdued {
|
||||
.item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading {
|
||||
color: inherit; }
|
||||
|
||||
.item-primary.active {
|
||||
.item-light.active {
|
||||
color: white;
|
||||
background-color: #4a87ee;
|
||||
border-color: #444444; }
|
||||
.item-primary.active .item-content {
|
||||
background-color: #4a87ee;
|
||||
color: white; }
|
||||
|
||||
.item-secondary.active {
|
||||
color: #444444;
|
||||
background-color: white;
|
||||
border-color: #444444; }
|
||||
.item-secondary.active .item-content {
|
||||
.item-light.active .item-content {
|
||||
background-color: white;
|
||||
color: #444444; }
|
||||
color: white; }
|
||||
|
||||
.item-tertiary.active {
|
||||
color: #444444;
|
||||
background-color: whitesmoke;
|
||||
.item-stable.active {
|
||||
color: white;
|
||||
background-color: #f8f8f8;
|
||||
border-color: #444444; }
|
||||
.item-tertiary.active .item-content {
|
||||
background-color: whitesmoke;
|
||||
color: #444444; }
|
||||
.item-stable.active .item-content {
|
||||
background-color: #f8f8f8;
|
||||
color: white; }
|
||||
|
||||
.item-positive.active {
|
||||
color: white;
|
||||
@ -3297,22 +3196,6 @@ a.subdued {
|
||||
background-color: #8a6de9;
|
||||
color: white; }
|
||||
|
||||
.item-light.active {
|
||||
color: white;
|
||||
background-color: white;
|
||||
border-color: #444444; }
|
||||
.item-light.active .item-content {
|
||||
background-color: white;
|
||||
color: white; }
|
||||
|
||||
.item-stable.active {
|
||||
color: white;
|
||||
background-color: #f8f8f8;
|
||||
border-color: #444444; }
|
||||
.item-stable.active .item-content {
|
||||
background-color: #f8f8f8;
|
||||
color: white; }
|
||||
|
||||
.item-dark.active {
|
||||
color: white;
|
||||
background-color: #444444;
|
||||
@ -3837,14 +3720,11 @@ button.item-button-right:after {
|
||||
position: relative;
|
||||
top: -1px; }
|
||||
|
||||
.badge-primary {
|
||||
background-color: #4a87ee; }
|
||||
|
||||
.badge-secondary {
|
||||
.badge-light {
|
||||
background-color: white; }
|
||||
|
||||
.badge-tertiary {
|
||||
background-color: whitesmoke; }
|
||||
.badge-stable {
|
||||
background-color: #f8f8f8; }
|
||||
|
||||
.badge-positive {
|
||||
background-color: #4a87ee; }
|
||||
@ -3864,12 +3744,6 @@ button.item-button-right:after {
|
||||
.badge-royal {
|
||||
background-color: #8a6de9; }
|
||||
|
||||
.badge-light {
|
||||
background-color: white; }
|
||||
|
||||
.badge-stable {
|
||||
background-color: #f8f8f8; }
|
||||
|
||||
.badge-dark {
|
||||
background-color: #444444; }
|
||||
|
||||
@ -4413,73 +4287,50 @@ input[type="range"] {
|
||||
.button.block, .button.button-full {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px; }
|
||||
.button.button-primary {
|
||||
color: white;
|
||||
background-color: #4a87ee;
|
||||
border-color: #1b68ea; }
|
||||
.button.button-primary:hover {
|
||||
color: white;
|
||||
text-decoration: none; }
|
||||
.button.button-primary.active, .button.button-primary:active {
|
||||
background-color: #3378ec;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #1b68ea; }
|
||||
.button.button-primary.button-clear {
|
||||
color: #4a87ee;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-primary.button-outline {
|
||||
background: transparent;
|
||||
border-color: #4a87ee;
|
||||
color: #4a87ee; }
|
||||
.button.button-primary.button-outline.active, .button.button-primary.button-outline:active {
|
||||
background-color: #4a87ee;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-secondary {
|
||||
.button.button-light {
|
||||
color: #444444;
|
||||
background-color: white;
|
||||
border-color: #d9d9d9; }
|
||||
.button.button-secondary:hover {
|
||||
border-color: #b2b2b2; }
|
||||
.button.button-light:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.button.button-secondary.active, .button.button-secondary:active {
|
||||
background-color: white;
|
||||
.button.button-light.active, .button.button-light:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #cccccc; }
|
||||
.button.button-secondary.button-clear {
|
||||
color: #d9d9d9;
|
||||
border-color: black; }
|
||||
.button.button-light.button-clear {
|
||||
color: white;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-secondary.button-outline {
|
||||
.button.button-light.button-outline {
|
||||
background: transparent;
|
||||
border-color: #d9d9d9;
|
||||
color: #444444; }
|
||||
.button.button-secondary.button-outline.active, .button.button-secondary.button-outline:active {
|
||||
background-color: #d9d9d9;
|
||||
border-color: white;
|
||||
color: white; }
|
||||
.button.button-light.button-outline.active, .button.button-light.button-outline:active {
|
||||
background-color: white;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-tertiary {
|
||||
.button.button-stable {
|
||||
color: #444444;
|
||||
background-color: whitesmoke;
|
||||
border-color: #b5b5b5; }
|
||||
.button.button-tertiary:hover {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #bbbbbb; }
|
||||
.button.button-stable:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.button.button-tertiary.active, .button.button-tertiary:active {
|
||||
background-color: white;
|
||||
.button.button-stable.active, .button.button-stable:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: #cfcfcf; }
|
||||
.button.button-tertiary.button-clear {
|
||||
color: whitesmoke;
|
||||
border-color: black; }
|
||||
.button.button-stable.button-clear {
|
||||
color: #f8f8f8;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-tertiary.button-outline {
|
||||
.button.button-stable.button-outline {
|
||||
background: transparent;
|
||||
border-color: whitesmoke;
|
||||
color: whitesmoke; }
|
||||
.button.button-tertiary.button-outline.active, .button.button-tertiary.button-outline:active {
|
||||
background-color: whitesmoke;
|
||||
border-color: #f8f8f8;
|
||||
color: #f8f8f8; }
|
||||
.button.button-stable.button-outline.active, .button.button-stable.button-outline:active {
|
||||
background-color: #f8f8f8;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-positive {
|
||||
@ -4620,52 +4471,6 @@ input[type="range"] {
|
||||
background-color: #8a6de9;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-light {
|
||||
color: #444444;
|
||||
background-color: white;
|
||||
border-color: #dddddd; }
|
||||
.button.button-light:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.button.button-light.active, .button.button-light:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.button.button-light.button-clear {
|
||||
color: white;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-light.button-outline {
|
||||
background: transparent;
|
||||
border-color: white;
|
||||
color: white; }
|
||||
.button.button-light.button-outline.active, .button.button-light.button-outline:active {
|
||||
background-color: white;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-stable {
|
||||
color: #444444;
|
||||
background-color: #f8f8f8;
|
||||
border-color: #bbbbbb; }
|
||||
.button.button-stable:hover {
|
||||
color: #444444;
|
||||
text-decoration: none; }
|
||||
.button.button-stable.active, .button.button-stable:active {
|
||||
background-color: #222222;
|
||||
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
|
||||
border-color: black; }
|
||||
.button.button-stable.button-clear {
|
||||
color: #f8f8f8;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
.button.button-stable.button-outline {
|
||||
background: transparent;
|
||||
border-color: #f8f8f8;
|
||||
color: #f8f8f8; }
|
||||
.button.button-stable.button-outline.active, .button.button-stable.button-outline:active {
|
||||
background-color: #f8f8f8;
|
||||
color: #fff;
|
||||
box-shadow: none; }
|
||||
.button.button-dark {
|
||||
color: white;
|
||||
background-color: #444444;
|
||||
@ -5263,6 +5068,24 @@ a.button {
|
||||
* notice we purposely do not use words like "red" or "blue", but
|
||||
* instead have colors which represent an emotion or generic theme.
|
||||
*/
|
||||
.light {
|
||||
color: white; }
|
||||
|
||||
.light-bg {
|
||||
background-color: white; }
|
||||
|
||||
.light-border {
|
||||
border-color: #b2b2b2; }
|
||||
|
||||
.stable {
|
||||
color: #f8f8f8; }
|
||||
|
||||
.stable-bg {
|
||||
background-color: #f8f8f8; }
|
||||
|
||||
.stable-border {
|
||||
border-color: #bbbbbb; }
|
||||
|
||||
.positive {
|
||||
color: #4a87ee; }
|
||||
|
||||
@ -5317,24 +5140,6 @@ a.button {
|
||||
.royal-border {
|
||||
border-color: #552bdf; }
|
||||
|
||||
.light {
|
||||
color: white; }
|
||||
|
||||
.light-bg {
|
||||
background-color: white; }
|
||||
|
||||
.light-border {
|
||||
border-color: #dddddd; }
|
||||
|
||||
.stable {
|
||||
color: #f8f8f8; }
|
||||
|
||||
.stable-bg {
|
||||
background-color: #f8f8f8; }
|
||||
|
||||
.stable-border {
|
||||
border-color: #bbbbbb; }
|
||||
|
||||
.dark {
|
||||
color: #444444; }
|
||||
|
||||
@ -5344,40 +5149,6 @@ a.button {
|
||||
.dark-border {
|
||||
border-color: #444444; }
|
||||
|
||||
/**
|
||||
* Brand Colors
|
||||
* --------------------------------------------------
|
||||
* Brand colors are your brand's colors...override the defaults to
|
||||
* your app's theme! Throughout Ionic's CSS we use brand-primary,
|
||||
* brand-secondary and brand-tertiary (ter·tia·ry: of third rank, importance, or value).
|
||||
*/
|
||||
.primary {
|
||||
color: #4a87ee; }
|
||||
|
||||
.primary-bg {
|
||||
background-color: #4a87ee; }
|
||||
|
||||
.primary-border {
|
||||
border-color: #1b68ea; }
|
||||
|
||||
.secondary {
|
||||
color: white; }
|
||||
|
||||
.secondary-bg {
|
||||
background-color: white; }
|
||||
|
||||
.secondary-border {
|
||||
border-color: #d9d9d9; }
|
||||
|
||||
.tertiary {
|
||||
color: whitesmoke; }
|
||||
|
||||
.tertiary-bg {
|
||||
background-color: whitesmoke; }
|
||||
|
||||
.tertiary-border {
|
||||
border-color: #b5b5b5; }
|
||||
|
||||
/**
|
||||
* Platform
|
||||
* --------------------------------------------------
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
border-radius: none;
|
||||
background-color: transparent;
|
||||
|
||||
color: $primary;
|
||||
color: $positive;
|
||||
font-size: 18px;
|
||||
|
||||
&.destructive {
|
||||
|
||||
@ -29,14 +29,11 @@
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background-color: $primary;
|
||||
.badge-light {
|
||||
background-color: $light;
|
||||
}
|
||||
.badge-secondary {
|
||||
background-color: $secondary;
|
||||
}
|
||||
.badge-tertiary {
|
||||
background-color: $tertiary;
|
||||
.badge-stable {
|
||||
background-color: $stable;
|
||||
}
|
||||
.badge-positive {
|
||||
background-color: $positive;
|
||||
@ -56,12 +53,6 @@
|
||||
.badge-royal {
|
||||
background-color: $royal;
|
||||
}
|
||||
.badge-light {
|
||||
background-color: $light;
|
||||
}
|
||||
.badge-stable {
|
||||
background-color: $stable;
|
||||
}
|
||||
.badge-dark {
|
||||
background-color: $dark;
|
||||
}
|
||||
|
||||
@ -50,14 +50,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.bar-primary {
|
||||
@include bar-style($bar-primary-bg, $bar-primary-border, $bar-primary-text);
|
||||
&.bar-light {
|
||||
@include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
|
||||
}
|
||||
&.bar-secondary {
|
||||
@include bar-style($bar-secondary-bg, $bar-secondary-border, $bar-secondary-text);
|
||||
}
|
||||
&.bar-tertiary {
|
||||
@include bar-style($bar-tertiary-bg, $bar-tertiary-border, $bar-tertiary-text);
|
||||
&.bar-stable {
|
||||
@include bar-style($bar-stable-bg, $bar-stable-border, $bar-stable-text);
|
||||
}
|
||||
&.bar-positive {
|
||||
@include bar-style($bar-positive-bg, $bar-positive-border, $bar-positive-text);
|
||||
@ -77,12 +74,6 @@
|
||||
&.bar-royal {
|
||||
@include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text);
|
||||
}
|
||||
&.bar-light {
|
||||
@include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
|
||||
}
|
||||
&.bar-stable {
|
||||
@include bar-style($bar-stable-bg, $bar-stable-border, $bar-stable-text);
|
||||
}
|
||||
&.bar-dark {
|
||||
@include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text);
|
||||
}
|
||||
@ -153,21 +144,15 @@
|
||||
}
|
||||
|
||||
// Default styles for buttons inside of styled bars
|
||||
.bar-primary {
|
||||
.bar-light {
|
||||
.button {
|
||||
@include button-style($bar-primary-bg, $bar-primary-border, $bar-primary-active-bg, $bar-primary-active-border, $bar-primary-text);
|
||||
@include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text);
|
||||
@include button-clear(#fff, $bar-title-font-size);
|
||||
}
|
||||
}
|
||||
.bar-secondary {
|
||||
.bar-stable {
|
||||
.button {
|
||||
@include button-style($bar-secondary-bg, $bar-secondary-border, $bar-secondary-active-bg, $bar-secondary-active-border, $bar-secondary-text);
|
||||
@include button-clear($dark, $bar-title-font-size);
|
||||
}
|
||||
}
|
||||
.bar-tertiary {
|
||||
.button {
|
||||
@include button-style($bar-tertiary-bg, $bar-tertiary-border, $bar-tertiary-active-bg, $bar-tertiary-active-border, $bar-tertiary-text);
|
||||
@include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text);
|
||||
@include button-clear(#fff, $bar-title-font-size);
|
||||
}
|
||||
}
|
||||
@ -207,18 +192,6 @@
|
||||
@include button-clear(#fff, $bar-title-font-size);
|
||||
}
|
||||
}
|
||||
.bar-light {
|
||||
.button {
|
||||
@include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text);
|
||||
@include button-clear(#fff, $bar-title-font-size);
|
||||
}
|
||||
}
|
||||
.bar-stable {
|
||||
.button {
|
||||
@include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text);
|
||||
@include button-clear(#fff, $bar-title-font-size);
|
||||
}
|
||||
}
|
||||
.bar-dark {
|
||||
.button {
|
||||
@include button-style($bar-dark-bg, $bar-dark-border, $bar-dark-active-bg, $bar-dark-active-border, $bar-dark-text);
|
||||
|
||||
@ -43,22 +43,16 @@
|
||||
margin-bottom: $button-block-margin;
|
||||
}
|
||||
|
||||
&.button-primary {
|
||||
@include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text);
|
||||
@include button-clear($button-primary-bg);
|
||||
@include button-outline($button-primary-bg);
|
||||
&.button-light {
|
||||
@include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text);
|
||||
@include button-clear($button-light-bg);
|
||||
@include button-outline($button-light-bg);
|
||||
}
|
||||
|
||||
&.button-secondary {
|
||||
@include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text);
|
||||
@include button-clear($button-secondary-border);
|
||||
@include button-outline($button-secondary-border, $dark);
|
||||
}
|
||||
|
||||
&.button-tertiary {
|
||||
@include button-style($button-tertiary-bg, $button-tertiary-border, $button-tertiary-active-bg, $button-tertiary-active-border, $button-tertiary-text);
|
||||
@include button-clear($button-tertiary-bg);
|
||||
@include button-outline($button-tertiary-bg);
|
||||
&.button-stable {
|
||||
@include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text);
|
||||
@include button-clear($button-stable-bg);
|
||||
@include button-outline($button-stable-bg);
|
||||
}
|
||||
|
||||
&.button-positive {
|
||||
@ -97,18 +91,6 @@
|
||||
@include button-outline($button-royal-bg);
|
||||
}
|
||||
|
||||
&.button-light {
|
||||
@include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text);
|
||||
@include button-clear($button-light-bg);
|
||||
@include button-outline($button-light-bg);
|
||||
}
|
||||
|
||||
&.button-stable {
|
||||
@include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text);
|
||||
@include button-clear($button-stable-bg);
|
||||
@include button-outline($button-stable-bg);
|
||||
}
|
||||
|
||||
&.button-dark {
|
||||
@include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $button-dark-text);
|
||||
@include button-clear($button-dark-bg);
|
||||
|
||||
@ -75,16 +75,13 @@
|
||||
}
|
||||
|
||||
// Different themes for list items
|
||||
.item-primary { @include item-style-active($primary, $dark, #fff); }
|
||||
.item-secondary { @include item-style-active($secondary, $dark, $dark); }
|
||||
.item-tertiary { @include item-style-active($tertiary, $dark, $dark); }
|
||||
.item-light { @include item-style-active($light, $dark, #fff); }
|
||||
.item-stable { @include item-style-active($stable, $dark, #fff); }
|
||||
.item-positive { @include item-style-active($positive, $dark, #fff); }
|
||||
.item-calm { @include item-style-active($calm, $dark, #fff); }
|
||||
.item-balanced { @include item-style-active($balanced, $dark, #fff); }
|
||||
.item-energized { @include item-style-active($energized, $dark, #fff); }
|
||||
.item-royal { @include item-style-active($royal, $dark, #fff); }
|
||||
.item-light { @include item-style-active($light, $dark, #fff); }
|
||||
.item-stable { @include item-style-active($stable, $dark, #fff); }
|
||||
.item-dark { @include item-style-active($dark, $dark, #fff); }
|
||||
|
||||
// Handle text overflow
|
||||
|
||||
@ -133,7 +133,7 @@ body, .ionic-body {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: $primary;
|
||||
background-color: $positive;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
|
||||
@ -22,14 +22,11 @@
|
||||
background-size: 0;
|
||||
line-height: $tabs-height;
|
||||
|
||||
&.tabs-primary {
|
||||
@include tab-style($tabs-primary-bg, $tabs-primary-border-color, $tabs-primary-text);
|
||||
&.tabs-light {
|
||||
@include tab-style($tabs-light-bg, $tabs-light-border-color, $tabs-light-text);
|
||||
}
|
||||
&.tabs-secondary {
|
||||
@include tab-style($tabs-secondary-bg, $tabs-secondary-border-color, $tabs-secondary-text);
|
||||
}
|
||||
&.tabs-tertiary {
|
||||
@include tab-style($tabs-tertiary-bg, $tabs-tertiary-border-color, $tabs-tertiary-text);
|
||||
&.tabs-stable {
|
||||
@include tab-style($tabs-stable-bg, $tabs-stable-border-color, $tabs-stable-text);
|
||||
}
|
||||
&.tabs-positive {
|
||||
@include tab-style($tabs-positive-bg, $tabs-positive-border-color, $tabs-positive-text);
|
||||
@ -49,12 +46,6 @@
|
||||
&.tabs-royal {
|
||||
@include tab-style($tabs-royal-bg, $tabs-royal-border-color, $tabs-royal-text);
|
||||
}
|
||||
&.tabs-light {
|
||||
@include tab-style($tabs-light-bg, $tabs-light-border-color, $tabs-light-text);
|
||||
}
|
||||
&.tabs-stable {
|
||||
@include tab-style($tabs-stable-bg, $tabs-stable-border-color, $tabs-stable-text);
|
||||
}
|
||||
&.tabs-dark {
|
||||
@include tab-style($tabs-dark-bg, $tabs-dark-border-color, $tabs-dark-text);
|
||||
}
|
||||
@ -135,14 +126,11 @@
|
||||
.tab-item.active, .tab-item:active {
|
||||
opacity: 1;
|
||||
|
||||
&.tab-item-primary {
|
||||
color: $primary;
|
||||
&.tab-item-light {
|
||||
color: $light;
|
||||
}
|
||||
&.tab-item-secondary {
|
||||
color: $secondary;
|
||||
}
|
||||
&.tab-item-tertiary {
|
||||
color: $tertiary;
|
||||
&.tab-item-stable {
|
||||
color: $stable;
|
||||
}
|
||||
&.tab-item-positive {
|
||||
color: $positive;
|
||||
@ -162,12 +150,6 @@
|
||||
&.tab-item-royal {
|
||||
color: $royal;
|
||||
}
|
||||
&.tab-item-light {
|
||||
color: $light;
|
||||
}
|
||||
&.tab-item-stable {
|
||||
color: $stable;
|
||||
}
|
||||
&.tab-item-dark {
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
@ -81,6 +81,26 @@
|
||||
* instead have colors which represent an emotion or generic theme.
|
||||
*/
|
||||
|
||||
.light {
|
||||
color: $light;
|
||||
}
|
||||
.light-bg {
|
||||
background-color: $light;
|
||||
}
|
||||
.light-border {
|
||||
border-color: $button-light-border;
|
||||
}
|
||||
|
||||
.stable {
|
||||
color: $stable;
|
||||
}
|
||||
.stable-bg {
|
||||
background-color: $stable;
|
||||
}
|
||||
.stable-border {
|
||||
border-color: $button-stable-border;
|
||||
}
|
||||
|
||||
.positive {
|
||||
color: $positive;
|
||||
}
|
||||
@ -141,26 +161,6 @@
|
||||
border-color: $button-royal-border;
|
||||
}
|
||||
|
||||
.light {
|
||||
color: $light;
|
||||
}
|
||||
.light-bg {
|
||||
background-color: $light;
|
||||
}
|
||||
.light-border {
|
||||
border-color: $button-light-border;
|
||||
}
|
||||
|
||||
.stable {
|
||||
color: $stable;
|
||||
}
|
||||
.stable-bg {
|
||||
background-color: $stable;
|
||||
}
|
||||
.stable-border {
|
||||
border-color: $button-stable-border;
|
||||
}
|
||||
|
||||
.dark {
|
||||
color: $dark;
|
||||
}
|
||||
@ -170,42 +170,3 @@
|
||||
.dark-border {
|
||||
border-color: $button-dark-border;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Brand Colors
|
||||
* --------------------------------------------------
|
||||
* Brand colors are your brand's colors...override the defaults to
|
||||
* your app's theme! Throughout Ionic's CSS we use brand-primary,
|
||||
* brand-secondary and brand-tertiary (ter·tia·ry: of third rank, importance, or value).
|
||||
*/
|
||||
|
||||
.primary {
|
||||
color: $primary;
|
||||
}
|
||||
.primary-bg {
|
||||
background-color: $primary;
|
||||
}
|
||||
.primary-border {
|
||||
border-color: $button-primary-border;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
color: $secondary;
|
||||
}
|
||||
.secondary-bg {
|
||||
background-color: $secondary;
|
||||
}
|
||||
.secondary-border {
|
||||
border-color: $button-secondary-border;
|
||||
}
|
||||
|
||||
.tertiary {
|
||||
color: $tertiary;
|
||||
}
|
||||
.tertiary-bg {
|
||||
background-color: $tertiary;
|
||||
}
|
||||
.tertiary-border {
|
||||
border-color: $button-tertiary-border;
|
||||
}
|
||||
|
||||
@ -1,27 +1,19 @@
|
||||
|
||||
// Brand Colors
|
||||
// -------------------------------
|
||||
|
||||
$primary: #4a87ee !default;
|
||||
$secondary: #ffffff !default;
|
||||
$tertiary: #f5f5f5 !default;
|
||||
|
||||
|
||||
// Utility Colors
|
||||
// Colors
|
||||
// -------------------------------
|
||||
|
||||
$light: #ffffff !default;
|
||||
$stable: #f8f8f8 !default;
|
||||
$positive: #4a87ee !default;
|
||||
$calm: #43cee6 !default;
|
||||
$balanced: #66cc33 !default;
|
||||
$energized: #f0b840 !default;
|
||||
$assertive: #ef4e3a !default;
|
||||
$royal: #8a6de9 !default;
|
||||
|
||||
$light: #ffffff !default;
|
||||
$stable: #f8f8f8 !default;
|
||||
$dark: #444444 !default;
|
||||
|
||||
|
||||
|
||||
// Base
|
||||
// -------------------------------
|
||||
|
||||
@ -45,7 +37,7 @@ $headings-line-height: 1.1 !default;
|
||||
$base-background-color: #fff;
|
||||
$base-color: #000;
|
||||
|
||||
$link-color: $primary !default;
|
||||
$link-color: $positive !default;
|
||||
$link-hover-color: darken($link-color, 15%) !default;
|
||||
|
||||
$content-padding: 10px !default;
|
||||
@ -73,8 +65,6 @@ $border-radius-small: 3px !default;
|
||||
$caret-width-base: 4px !default;
|
||||
$caret-width-large: 5px !default;
|
||||
|
||||
$component-active-bg: $primary !default;
|
||||
|
||||
|
||||
// Forms
|
||||
// -------------------------------
|
||||
@ -178,23 +168,17 @@ $button-default-border: darken($stable, 15%);
|
||||
$button-default-active-bg: lighten($stable, 5%);
|
||||
$button-default-active-border: darken($stable, 25%);
|
||||
|
||||
$button-primary-bg: $primary;
|
||||
$button-primary-text: #fff;
|
||||
$button-primary-border: darken($primary, 10%);
|
||||
$button-primary-active-bg: darken($primary, 5%);
|
||||
$button-primary-active-border: darken($primary, 10%);
|
||||
$button-light-bg: $light;
|
||||
$button-light-text: #444;
|
||||
$button-light-border: #B2B2B2;
|
||||
$button-light-active-bg: #222;
|
||||
$button-light-active-border: #000;
|
||||
|
||||
$button-secondary-bg: $secondary;
|
||||
$button-secondary-text: #444;
|
||||
$button-secondary-border: darken($secondary, 15%);
|
||||
$button-secondary-active-bg: lighten($secondary, 10%);
|
||||
$button-secondary-active-border: darken($secondary, 20%);
|
||||
|
||||
$button-tertiary-bg: $tertiary;
|
||||
$button-tertiary-text: #444;
|
||||
$button-tertiary-border: darken($tertiary, 25%);
|
||||
$button-tertiary-active-bg: lighten($tertiary, 10%);
|
||||
$button-tertiary-active-border: darken($tertiary, 15%);
|
||||
$button-stable-bg: $stable;
|
||||
$button-stable-text: #444;
|
||||
$button-stable-border: #bbb;
|
||||
$button-stable-active-bg: #222;
|
||||
$button-stable-active-border: #000;
|
||||
|
||||
$button-positive-bg: $positive;
|
||||
$button-positive-text: #fff;
|
||||
@ -232,18 +216,6 @@ $button-royal-border: darken($royal, 15%);
|
||||
$button-royal-active-bg: darken($royal, 15%);
|
||||
$button-royal-active-border: darken($royal, 15%);
|
||||
|
||||
$button-light-bg: $light;
|
||||
$button-light-text: #444;
|
||||
$button-light-border: #ddd;
|
||||
$button-light-active-bg: #222;
|
||||
$button-light-active-border: #000;
|
||||
|
||||
$button-stable-bg: $stable;
|
||||
$button-stable-text: #444;
|
||||
$button-stable-border: #bbb;
|
||||
$button-stable-active-bg: #222;
|
||||
$button-stable-active-border: #000;
|
||||
|
||||
$button-dark-bg: $dark;
|
||||
$button-dark-text: #fff;
|
||||
$button-dark-border: #444;
|
||||
@ -266,23 +238,17 @@ $bar-default-border: #444;
|
||||
$bar-default-active-bg: #fff;
|
||||
$bar-default-active-border: #444;
|
||||
|
||||
$bar-primary-bg: rgba($button-primary-bg, $bar-transparency);
|
||||
$bar-primary-text: $button-primary-text;
|
||||
$bar-primary-border: $button-primary-border;
|
||||
$bar-primary-active-bg: $button-primary-active-bg;
|
||||
$bar-primary-active-border: $button-primary-active-border;
|
||||
$bar-light-bg: rgba($button-light-bg, $bar-transparency);
|
||||
$bar-light-text: $button-light-text;
|
||||
$bar-light-border: $button-light-border;
|
||||
$bar-light-active-bg: $button-light-active-bg;
|
||||
$bar-light-active-border: $button-light-active-border;
|
||||
|
||||
$bar-secondary-bg: rgba($button-secondary-bg, $bar-transparency);
|
||||
$bar-secondary-text: $button-secondary-text;
|
||||
$bar-secondary-border: $button-secondary-border;
|
||||
$bar-secondary-active-bg: $button-secondary-active-bg;
|
||||
$bar-secondary-active-border: $button-secondary-active-border;
|
||||
|
||||
$bar-tertiary-bg: rgba($button-tertiary-bg, $bar-transparency);
|
||||
$bar-tertiary-text: $button-tertiary-text;
|
||||
$bar-tertiary-border: $button-tertiary-border;
|
||||
$bar-tertiary-active-bg: $button-tertiary-active-bg;
|
||||
$bar-tertiary-active-border: $button-tertiary-active-border;
|
||||
$bar-stable-bg: rgba($button-stable-bg, $bar-transparency);
|
||||
$bar-stable-text: $button-stable-text;
|
||||
$bar-stable-border: $button-stable-border;
|
||||
$bar-stable-active-bg: $button-stable-active-bg;
|
||||
$bar-stable-active-border: $button-stable-active-border;
|
||||
|
||||
$bar-positive-bg: rgba($button-positive-bg, $bar-transparency);
|
||||
$bar-positive-text: $button-positive-text;
|
||||
@ -320,18 +286,6 @@ $bar-royal-border: $button-royal-border;
|
||||
$bar-royal-active-bg: $button-royal-active-bg;
|
||||
$bar-royal-active-border: $button-royal-active-border;
|
||||
|
||||
$bar-light-bg: rgba($button-light-bg, $bar-transparency);
|
||||
$bar-light-text: $button-light-text;
|
||||
$bar-light-border: $button-light-border;
|
||||
$bar-light-active-bg: $button-light-active-bg;
|
||||
$bar-light-active-border: $button-light-active-border;
|
||||
|
||||
$bar-stable-bg: rgba($button-stable-bg, $bar-transparency);
|
||||
$bar-stable-text: $button-stable-text;
|
||||
$bar-stable-border: $button-stable-border;
|
||||
$bar-stable-active-bg: $button-stable-active-bg;
|
||||
$bar-stable-active-border: $button-stable-active-border;
|
||||
|
||||
$bar-dark-bg: rgba($button-dark-bg, $bar-transparency);
|
||||
$bar-dark-text: $button-dark-text;
|
||||
$bar-dark-border: $button-dark-border;
|
||||
@ -351,17 +305,13 @@ $tabs-default-bg: $button-stable-bg;
|
||||
$tabs-default-border-color: $button-stable-border;
|
||||
$tabs-default-text: $button-stable-text;
|
||||
|
||||
$tabs-primary-bg: $button-primary-bg;
|
||||
$tabs-primary-border-color: $button-primary-border;
|
||||
$tabs-primary-text: $button-primary-text;
|
||||
$tabs-light-bg: $button-light-bg;
|
||||
$tabs-light-border-color: $button-light-border;
|
||||
$tabs-light-text: $button-light-text;
|
||||
|
||||
$tabs-secondary-bg: $button-secondary-bg;
|
||||
$tabs-secondary-border-color: $button-secondary-border;
|
||||
$tabs-secondary-text: $button-secondary-text;
|
||||
|
||||
$tabs-tertiary-bg: $button-tertiary-bg;
|
||||
$tabs-tertiary-border-color: $button-tertiary-border;
|
||||
$tabs-tertiary-text: $button-tertiary-text;
|
||||
$tabs-stable-bg: $button-stable-bg;
|
||||
$tabs-stable-border-color: $button-stable-border;
|
||||
$tabs-stable-text: $button-stable-text;
|
||||
|
||||
$tabs-positive-bg: $button-positive-bg;
|
||||
$tabs-positive-border-color: $button-positive-border;
|
||||
@ -387,14 +337,6 @@ $tabs-royal-bg: $button-royal-bg;
|
||||
$tabs-royal-border-color: $button-royal-border;
|
||||
$tabs-royal-text: $button-royal-text;
|
||||
|
||||
$tabs-light-bg: $button-light-bg;
|
||||
$tabs-light-border-color: $button-light-border;
|
||||
$tabs-light-text: $button-light-text;
|
||||
|
||||
$tabs-stable-bg: $button-stable-bg;
|
||||
$tabs-stable-border-color: $button-stable-border;
|
||||
$tabs-stable-text: $button-stable-text;
|
||||
|
||||
$tabs-dark-bg: $button-dark-bg;
|
||||
$tabs-dark-border-color: $button-dark-border;
|
||||
$tabs-dark-text: $button-dark-text;
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div class="button-bar bar-primary">
|
||||
<div class="button-bar bar-light">
|
||||
<a class="button">One</a>
|
||||
<a class="button">Two</a>
|
||||
<a class="button">Three</a>
|
||||
@ -32,15 +32,7 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div class="button-bar bar-secondary">
|
||||
<a class="button">One</a>
|
||||
<a class="button">Two</a>
|
||||
<a class="button">Three</a>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div class="button-bar bar-tertiary">
|
||||
<div class="button-bar bar-stable">
|
||||
<a class="button">One</a>
|
||||
<a class="button">Two</a>
|
||||
<a class="button">Three</a>
|
||||
@ -95,22 +87,6 @@
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div class="button-bar bar-light">
|
||||
<a class="button">One</a>
|
||||
<a class="button">Two</a>
|
||||
<a class="button">Three</a>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div class="button-bar bar-stable">
|
||||
<a class="button">One</a>
|
||||
<a class="button">Two</a>
|
||||
<a class="button">Three</a>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<div class="button-bar bar-dark">
|
||||
<a class="button">One</a>
|
||||
|
||||
@ -31,9 +31,9 @@
|
||||
<h3>a.button default</h3>
|
||||
<p>
|
||||
<a class="button"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-primary"><i class="icon ion-home"></i> .button-primary</a>
|
||||
<a class="button button-secondary"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-tertiary"><i class="icon ion-home"></i> .button-tertiary</a>
|
||||
<a class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
|
||||
<a class="button button-assertive"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-energized"><i class="icon ion-home"></i> .button-energized</a>
|
||||
<a class="button button-positive">.button-positive</a>
|
||||
<a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
|
||||
<a class="button button-assertive">.button-assertive</a>
|
||||
@ -45,9 +45,9 @@
|
||||
<h3>button.button default</h3>
|
||||
<p>
|
||||
<button class="button"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-primary"><i class="icon ion-home"></i> .button-primary</button>
|
||||
<button class="button button-secondary">.button-secondary</button>
|
||||
<button class="button button-tertiary">.button-tertiary</button>
|
||||
<button class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
|
||||
<button class="button button-assertive">.button-assertive</button>
|
||||
<button class="button button-energized">.button-energized</button>
|
||||
<button class="button button-positive"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-calm">.button-calm</button>
|
||||
<button class="button button-assertive"><i class="icon ion-home"></i> .button-assertive</button>
|
||||
@ -59,9 +59,9 @@
|
||||
<h3>a.button.button-large default</h3>
|
||||
<p>
|
||||
<a class="button button-large"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-large button-primary"><i class="icon ion-home"></i> .button-primary</a>
|
||||
<a class="button button-large button-secondary"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-large button-tertiary"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-large button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
|
||||
<a class="button button-large button-assertive"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-large button-energized"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-large button-positive">.button-positive</a>
|
||||
<a class="button button-large button-calm"><i class="icon ion-home"></i> .button-calm</a>
|
||||
<a class="button button-large button-assertive">.button-assertive</a>
|
||||
@ -73,9 +73,9 @@
|
||||
<h3>button.button. button-large default</h3>
|
||||
<p>
|
||||
<button class="button button-large"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-large button-primary"><i class="icon ion-home"></i> .button-primary</button>
|
||||
<button class="button button-large button-secondary">.button-secondary</button>
|
||||
<button class="button button-large button-tertiary">.button-tertiary</button>
|
||||
<button class="button button-large button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
|
||||
<button class="button button-large button-assertive">.button-assertive</button>
|
||||
<button class="button button-large button-energized">.button-energized</button>
|
||||
<button class="button button-large button-positive"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-large button-calm">.button-calm</button>
|
||||
<button class="button button-large button-assertive"><i class="icon ion-home"></i> .button-assertive</button>
|
||||
@ -87,9 +87,9 @@
|
||||
<h3>a.button.button-small default</h3>
|
||||
<p>
|
||||
<a class="button button-small"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-small button-primary"><i class="icon ion-home"></i> .button-primary</a>
|
||||
<a class="button button-small button-secondary"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-small button-tertiary"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-small button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
|
||||
<a class="button button-small button-assertive"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-small button-energized"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-small button-positive">.button-positive</a>
|
||||
<a class="button button-small button-calm"><i class="icon ion-home"></i> .button-calm</a>
|
||||
<a class="button button-small button-assertive">.button-assertive</a>
|
||||
@ -101,9 +101,9 @@
|
||||
<h3>button.button.button-small</h3>
|
||||
<p>
|
||||
<button class="button button-small"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-small button-primary"><i class="icon ion-home"></i> .button-primary</button>
|
||||
<button class="button button-small button-secondary">.button-secondary</button>
|
||||
<button class="button button-small button-tertiary">.button-tertiary</button>
|
||||
<button class="button button-small button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
|
||||
<button class="button button-small button-assertive">.button-assertive</button>
|
||||
<button class="button button-small button-energized">.button-energized</button>
|
||||
<button class="button button-small button-positive"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-small button-calm">.button-calm</button>
|
||||
<button class="button button-small button-assertive"><i class="icon ion-home"></i> .button-assertive</button>
|
||||
@ -115,9 +115,9 @@
|
||||
<h3>a.button.button-clear (Mixed in with others)</h3>
|
||||
<p>
|
||||
<a class="button button-clear"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-clear button-primary"><i class="icon ion-home"></i> .button-primary</a>
|
||||
<a class="button button-secondary"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-clear button-tertiary"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-clear button-balanced"><i class="icon ion-home"></i> .button-balanced</a>
|
||||
<a class="button button-assertive"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-clear button-energized"><i class="icon ion-home"></i></a>
|
||||
<a class="button button-positive">.button-positive</a>
|
||||
<a class="button button-calm"><i class="icon ion-home"></i> .button-calm</a>
|
||||
<a class="button button-clear button-assertive">.button-assertive</a>
|
||||
@ -129,9 +129,9 @@
|
||||
<h3>button.button.button-clear default</h3>
|
||||
<p>
|
||||
<button class="button"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-primary"><i class="icon ion-home"></i> .button-primary</button>
|
||||
<button class="button button-clear button-secondary">.button-secondary</button>
|
||||
<button class="button button-clear button-tertiary">.button-tertiary</button>
|
||||
<button class="button button-balanced"><i class="icon ion-home"></i> .button-balanced</button>
|
||||
<button class="button button-clear button-assertive">.button-assertive</button>
|
||||
<button class="button button-clear button-energized">.button-energized</button>
|
||||
<button class="button button-clear button-positive"><i class="icon ion-home"></i></button>
|
||||
<button class="button button-clear button-calm">.button-calm</button>
|
||||
<button class="button button-clear button-assertive"><i class="icon ion-home"></i> .button-assertive</button>
|
||||
@ -143,9 +143,9 @@
|
||||
<h3>a.block (parent w/ padding)</h3>
|
||||
<p>
|
||||
<a class="button block"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button block button-primary">.button-primary</a>
|
||||
<a class="button block button-secondary">.button-secondary</a>
|
||||
<a class="button block button-tertiary">.button-tertiary</a>
|
||||
<a class="button block button-balanced">.button-balanced</a>
|
||||
<a class="button block button-assertive">.button-assertive</a>
|
||||
<a class="button block button-energized">.button-energized</a>
|
||||
<a class="button block button-positive">.button-positive</a>
|
||||
<a class="button block button-calm">.button-calm</a>
|
||||
<a class="button block button-assertive">.button-assertive</a>
|
||||
@ -162,9 +162,9 @@
|
||||
<h3>button.block (parent w/ padding)</h3>
|
||||
<p>
|
||||
<button class="button block"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button block button-primary">.button-primary</button>
|
||||
<button class="button block button-secondary">.button-secondary</button>
|
||||
<button class="button block button-tertiary">.button-tertiary</button>
|
||||
<button class="button block button-balanced">.button-balanced</button>
|
||||
<button class="button block button-assertive">.button-assertive</button>
|
||||
<button class="button block button-energized">.button-energized</button>
|
||||
<button class="button block button-positive">.button-positive</button>
|
||||
<button class="button block button-calm">.button-calm</button>
|
||||
<button class="button block button-assertive">.button-assertive</button>
|
||||
@ -204,9 +204,9 @@
|
||||
<h3>a.button-outline</h3>
|
||||
<p>
|
||||
<a class="button button-outline"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-primary button-outline">.button-primary</a>
|
||||
<a class="button button-secondary button-outline">.button-secondary</a>
|
||||
<a class="button button-tertiary button-outline">.button-tertiary</a>
|
||||
<a class="button button-balanced button-outline">.button-balanced</a>
|
||||
<a class="button button-assertive button-outline">.button-assertive</a>
|
||||
<a class="button button-energized button-outline">.button-energized</a>
|
||||
<a class="button button-positive button-outline">.button-positive</a>
|
||||
<a class="button button-calm button-outline">.button-calm</a>
|
||||
<a class="button button-assertive button-outline">.button-assertive</a>
|
||||
@ -218,9 +218,9 @@
|
||||
<h3>button.button-outline</h3>
|
||||
<p>
|
||||
<button class="button button-outline"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-primary button-outline">.button-primary</button>
|
||||
<button class="button button-secondary button-outline">.button-secondary</button>
|
||||
<button class="button button-tertiary button-outline">.button-tertiary</button>
|
||||
<button class="button button-balanced button-outline">.button-balanced</button>
|
||||
<button class="button button-assertive button-outline">.button-assertive</button>
|
||||
<button class="button button-energized button-outline">.button-energized</button>
|
||||
<button class="button button-positive button-outline">.button-positive</button>
|
||||
<button class="button button-calm button-outline">.button-calm</button>
|
||||
<button class="button button-assertive button-outline">.button-assertive</button>
|
||||
@ -232,9 +232,9 @@
|
||||
<h3>a.block.button-outline (parent w/ padding)</h3>
|
||||
<p>
|
||||
<a class="button button-outline block"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-primary button-outline block">.button-primary</a>
|
||||
<a class="button button-secondary button-outline block">.button-secondary</a>
|
||||
<a class="button button-tertiary button-outline block">.button-tertiary</a>
|
||||
<a class="button button-balanced button-outline block">.button-balanced</a>
|
||||
<a class="button button-assertive button-outline block">.button-assertive</a>
|
||||
<a class="button button-energized button-outline block">.button-energized</a>
|
||||
<a class="button button-positive button-outline block">.button-positive</a>
|
||||
<a class="button button-calm button-outline block">.button-calm</a>
|
||||
<a class="button button-assertive button-outline block">.button-assertive</a>
|
||||
@ -246,9 +246,9 @@
|
||||
<h3>button.block.button-outline (parent w/ padding)</h3>
|
||||
<p>
|
||||
<button class="button button-outline block"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-primary button-outline block">.button-primary</button>
|
||||
<button class="button button-secondary button-outline block">.button-secondary</button>
|
||||
<button class="button button-tertiary button-outline block">.button-tertiary</button>
|
||||
<button class="button button-balanced button-outline block">.button-balanced</button>
|
||||
<button class="button button-assertive button-outline block">.button-assertive</button>
|
||||
<button class="button button-energized button-outline block">.button-energized</button>
|
||||
<button class="button button-positive button-outline block">.button-positive</button>
|
||||
<button class="button button-calm button-outline block">.button-calm</button>
|
||||
<button class="button button-assertive button-outline block">.button-assertive</button>
|
||||
@ -260,9 +260,9 @@
|
||||
<h3>a.button-clear</h3>
|
||||
<p>
|
||||
<a class="button button-clear"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-primary button-clear">.button-primary</a>
|
||||
<a class="button button-secondary button-clear">.button-secondary</a>
|
||||
<a class="button button-tertiary button-clear">.button-tertiary</a>
|
||||
<a class="button button-balanced button-clear">.button-balanced</a>
|
||||
<a class="button button-assertive button-clear">.button-assertive</a>
|
||||
<a class="button button-energized button-clear">.button-energized</a>
|
||||
<a class="button button-positive button-clear">.button-positive</a>
|
||||
<a class="button button-calm button-clear">.button-calm</a>
|
||||
<a class="button button-assertive button-clear">.button-assertive</a>
|
||||
@ -274,9 +274,9 @@
|
||||
<h3>button.button-clear</h3>
|
||||
<p>
|
||||
<button class="button button-clear"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-primary button-clear">.button-primary</button>
|
||||
<button class="button button-secondary button-clear">.button-secondary</button>
|
||||
<button class="button button-tertiary button-clear">.button-tertiary</button>
|
||||
<button class="button button-balanced button-clear">.button-balanced</button>
|
||||
<button class="button button-assertive button-clear">.button-assertive</button>
|
||||
<button class="button button-energized button-clear">.button-energized</button>
|
||||
<button class="button button-positive button-clear">.button-positive</button>
|
||||
<button class="button button-calm button-clear">.button-calm</button>
|
||||
<button class="button button-assertive button-clear">.button-assertive</button>
|
||||
@ -288,9 +288,9 @@
|
||||
<h3>a.block.button-clear (parent w/ padding)</h3>
|
||||
<p>
|
||||
<a class="button button-clear block"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-primary button-clear block">.button-primary</a>
|
||||
<a class="button button-secondary button-clear block">.button-secondary</a>
|
||||
<a class="button button-tertiary button-clear block">.button-tertiary</a>
|
||||
<a class="button button-balanced button-clear block">.button-balanced</a>
|
||||
<a class="button button-assertive button-clear block">.button-assertive</a>
|
||||
<a class="button button-energized button-clear block">.button-energized</a>
|
||||
<a class="button button-positive button-clear block">.button-positive</a>
|
||||
<a class="button button-calm button-clear block">.button-calm</a>
|
||||
<a class="button button-assertive button-clear block">.button-assertive</a>
|
||||
@ -302,9 +302,9 @@
|
||||
<h3>button.block.button-clear (parent w/ padding)</h3>
|
||||
<p>
|
||||
<button class="button button-clear block"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-primary button-clear block">.button-primary</button>
|
||||
<button class="button button-secondary button-clear block">.button-secondary</button>
|
||||
<button class="button button-tertiary button-clear block">.button-tertiary</button>
|
||||
<button class="button button-balanced button-clear block">.button-balanced</button>
|
||||
<button class="button button-assertive button-clear block">.button-assertive</button>
|
||||
<button class="button button-energized button-clear block">.button-energized</button>
|
||||
<button class="button button-positive button-clear block">.button-positive</button>
|
||||
<button class="button button-calm button-clear block">.button-calm</button>
|
||||
<button class="button button-assertive button-clear block">.button-assertive</button>
|
||||
@ -318,9 +318,9 @@
|
||||
<h3>a.block (parent w/out padding)</h3>
|
||||
<p>
|
||||
<a class="button block"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button block button-primary">.button-primary</a>
|
||||
<a class="button block button-secondary">.button-secondary</a>
|
||||
<a class="button block button-tertiary">.button-tertiary</a>
|
||||
<a class="button block button-balanced">.button-balanced</a>
|
||||
<a class="button block button-assertive">.button-assertive</a>
|
||||
<a class="button block button-energized">.button-energized</a>
|
||||
<a class="button block button-positive">.button-positive</a>
|
||||
<a class="button block button-calm">.button-calm</a>
|
||||
<a class="button block button-assertive">.button-assertive</a>
|
||||
@ -332,9 +332,9 @@
|
||||
<h3>a.block (.button-full on the parent)</h3>
|
||||
<p class="button-full">
|
||||
<a class="button"><i class="icon ion-home"></i> Default</a>
|
||||
<a class="button button-primary">.button-primary</a>
|
||||
<a class="button button-secondary">.button-secondary</a>
|
||||
<a class="button button-tertiary">.button-tertiary</a>
|
||||
<a class="button button-balanced">.button-balanced</a>
|
||||
<a class="button button-assertive">.button-assertive</a>
|
||||
<a class="button button-energized">.button-energized</a>
|
||||
<a class="button button-positive">.button-positive</a>
|
||||
<a class="button button-calm">.button-calm</a>
|
||||
<a class="button button-assertive">.button-assertive</a>
|
||||
@ -346,9 +346,9 @@
|
||||
<h3>button.block.button-full on each button and nothing on the parent</h3>
|
||||
<p>
|
||||
<button class="button button-full"><i class="icon ion-home"></i> Default</button>
|
||||
<button class="button button-full button-primary">.button-primary</button>
|
||||
<button class="button button-full button-secondary">.button-secondary</button>
|
||||
<button class="button button-full button-tertiary">.button-tertiary</button>
|
||||
<button class="button button-full button-balanced">.button-balanced</button>
|
||||
<button class="button button-full button-assertive">.button-assertive</button>
|
||||
<button class="button button-full button-energized">.button-energized</button>
|
||||
<button class="button button-full button-positive">.button-positive</button>
|
||||
<button class="button button-full button-calm">.button-calm</button>
|
||||
<button class="button button-full button-assertive">.button-assertive</button>
|
||||
@ -358,7 +358,7 @@
|
||||
<hr>
|
||||
|
||||
<p>
|
||||
<a class="button button-secondary" href="index.html">Homepage</a>
|
||||
<a class="button button-assertive" href="index.html">Homepage</a>
|
||||
</p>
|
||||
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user