Skip to content

Commit 07d1421

Browse files
bundyobundyo
committed
Make the button colors work as modifiers - not looking like primary only
Fix app-compat to use scoped packages
1 parent 9c67c4d commit 07d1421

File tree

8 files changed

+115
-35
lines changed

8 files changed

+115
-35
lines changed

‎app-compat/bootstrap-based.compat.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77

88
$compat: true;
99

10-
@import '~nativescript-theme-core/scss/variables';
10+
@import '~@nativescript/theme/scss/variables';
1111

1212
// Variables form bootstrap v4 dependency
1313
@import '~bootstrap/scss/functions', '~bootstrap/scss/variables';
1414

1515
// Import bootstrap map to apply variable mapping
16-
@import '~nativescript-theme-core/scss/bootstrap/map';
16+
@import '~@nativescript/theme/scss/bootstrap/map';
1717

1818
// Import theme
19-
@import '~nativescript-theme-core/index';
19+
@import '~@nativescript/theme/index';

‎app-compat/customized.compat.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
$compat: true;
1111

1212
// Core variables
13-
@import '~nativescript-theme-core/scss/variables';
13+
@import '~@nativescript/theme/scss/variables';
1414

1515
// Colors
1616
$focus: #09A52e;
@@ -29,4 +29,4 @@ $background-alt-10: #0AC16E;
2929
$btn-color-disabled: #CCC4C9;
3030

3131
// Core styles
32-
@import '~nativescript-theme-core/index';
32+
@import '~@nativescript/theme/index';

‎app-compat/kendo-bootstrap.compat.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,4 @@ $series-f: #d9534f;
2323

2424
$compat: true;
2525

26-
@import '~nativescript-theme-core/index';
26+
@import '~@nativescript/theme/index';

‎app-compat/kendo-default.compat.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,4 @@ $series-f: #598229;
2424

2525
$compat: true;
2626

27-
@import '~nativescript-theme-core/index';
27+
@import '~@nativescript/theme/index';

‎app-compat/kendo-material.compat.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@ $theme-type: dark;
88

99
$compat: true;
1010

11-
@import '~nativescript-theme-core/index';
11+
@import '~@nativescript/theme/index';

‎app-compat/pages/buttons.xml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,19 @@
66
<ScrollView>
77
<StackLayout>
88
<Button class="btn" text="btn"/>
9+
<Button class="btn btn-ruby" text="btn btn-ruby"/>
910
<Button text="btn btn-simple" class="btn btn-simple" />
11+
<Button text="btn btn-simple btn-ruby" class="btn btn-simple btn-ruby" />
1012
<Button text="btn btn-primary" class="btn btn-primary"/>
13+
<Button text="btn btn-primary btn-ruby" class="btn btn-primary btn-ruby"/>
1114
<Button class="btn btn-primary">
1215
<FormattedString>
1316
<Span text="{{ 'fa-twitter' | fonticon }}" class="fa nt-icon"/>
1417
<Span text=" btn btn-primary with icon"/>
1518
</FormattedString>
1619
</Button>
1720
<Button text="btn btn-outline" class="btn btn-outline"/>
21+
<Button text="btn btn-outline btn-ruby" class="btn btn-outline btn-ruby"/>
1822
<Button text="btn btn-primary btn-rounded-sm" tap="" class="btn btn-primary btn-rounded-sm"/>
1923
<Button text="btn btn-outline btn-rounded-sm" tap="" class="btn btn-outline btn-rounded-sm"/>
2024
<Button text="btn btn-primary btn-rounded-lg" tap="" class="btn btn-primary btn-rounded-lg"/>

‎app/pages/buttons.xml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,19 @@
55
<ScrollView>
66
<StackLayout>
77
<Button text="Button"/>
8+
<Button text="Button.-ruby" class="-ruby"/>
89
<Button text="Button.-simple" class="-simple" />
10+
<Button text="Button.-simple.-ruby" class="-simple -ruby" />
911
<Button text="Button.-primary" class="-primary"/>
12+
<Button text="Button.-primary.-ruby" class="-primary -ruby"/>
1013
<Button class="-primary">
1114
<FormattedString>
1215
<Span text="{{ 'fa-twitter' | fonticon }}" class="fa nt-icon"/>
1316
<Span text=" Button.-primary with icon"/>
1417
</FormattedString>
1518
</Button>
1619
<Button text="Button.-outline" class="-outline"/>
20+
<Button text="Button.-outline.-ruby" class="-outline -ruby"/>
1721
<Button text="Button.-primary.-rounded-sm" class="-primary -rounded-sm"/>
1822
<Button text="Button.-primary.-rounded-lg" tap="" class="-primary -rounded-lg"/>
1923
<Button text="Button.-outline.-rounded-sm" tap="" class="-outline -rounded-sm"/>

‎src/scss/mixins/components/_button.scss‎

Lines changed: 99 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -60,96 +60,164 @@
6060

6161
.ns-root #{if($compat, '&-aqua.btn', '&.-aqua')} {
6262
@include colorize(
63-
$background-color: aqua,
6463
$border-color: aqua,
65-
$alternate-color: aqua
64+
$color: aqua
6665
);
66+
67+
#{if($compat, '&.btn-primary', '&.-primary')} {
68+
@include colorize(
69+
$alternate-color: aqua,
70+
$background-color: aqua
71+
);
72+
}
6773
}
6874

6975
.ns-root #{if($compat, '&-blue.btn', '&.-blue')} {
7076
@include colorize(
71-
$background-color: blue,
7277
$border-color: blue,
73-
$alternate-color: blue
78+
$color: blue
7479
);
80+
81+
#{if($compat, '&.btn-primary', '&.-primary')} {
82+
@include colorize(
83+
$alternate-color: blue,
84+
$background-color: blue
85+
);
86+
}
7587
}
7688

7789
.ns-root #{if($compat, '&-brown', '&.-brown')} {
7890
@include colorize(
79-
$background-color: brown,
8091
$border-color: brown,
81-
$alternate-color: brown
92+
$color: brown
8293
);
94+
95+
#{if($compat, '&.btn-primary', '&.-primary')} {
96+
@include colorize(
97+
$alternate-color: brown,
98+
$background-color: brown
99+
);
100+
}
83101
}
84102

85103
.ns-root #{if($compat, '&-forest', '&.-forest')} {
86104
@include colorize(
87-
$alternate-color: forest,
88-
$background-color: forest,
89-
$border-color: forest
105+
$border-color: forest,
106+
$color: forest
90107
);
108+
109+
#{if($compat, '&.btn-primary', '&.-primary')} {
110+
@include colorize(
111+
$alternate-color: forest,
112+
$background-color: forest
113+
);
114+
}
91115
}
92116

93117
.ns-root #{if($compat, '&-grey', '&.-grey')} {
94118
@include colorize(
95-
$background-color: grey-dark,
96119
$border-color: grey-dark,
97-
$alternate-color: grey-dark
120+
$color: grey-dark
98121
);
122+
123+
#{if($compat, '&.btn-primary', '&.-primary')} {
124+
@include colorize(
125+
$alternate-color: grey-dark,
126+
$background-color: grey-dark
127+
);
128+
}
99129
}
100130

101131
.ns-root #{if($compat, '&-lemon', '&.-lemon')} {
102132
@include colorize(
103-
$background-color: lemon,
104133
$border-color: lemon,
105-
$alternate-color: lemon
134+
$color: lemon
106135
);
136+
137+
#{if($compat, '&.btn-primary', '&.-primary')} {
138+
@include colorize(
139+
$alternate-color: lemon,
140+
$background-color: lemon
141+
);
142+
}
107143
}
108144

109145
.ns-root #{if($compat, '&-lime', '&.-lime')} {
110146
@include colorize(
111-
$background-color: lime,
112147
$border-color: lime,
113-
$alternate-color: lime
148+
$color: lime
114149
);
150+
151+
#{if($compat, '&.btn-primary', '&.-primary')} {
152+
@include colorize(
153+
$alternate-color: lime,
154+
$background-color: lime
155+
);
156+
}
115157
}
116158

117159
.ns-root #{if($compat, '&-orange', '&.-orange')} {
118160
@include colorize(
119-
$background-color: orange,
120161
$border-color: orange,
121-
$alternate-color: orange
162+
$color: orange
122163
);
164+
165+
#{if($compat, '&.btn-primary', '&.-primary')} {
166+
@include colorize(
167+
$alternate-color: orange,
168+
$background-color: orange
169+
);
170+
}
123171
}
124172

125173
.ns-root #{if($compat, '&-purple', '&.-purple')} {
126174
@include colorize(
127-
$background-color: purple,
128175
$border-color: purple,
129-
$alternate-color: purple
176+
$color: purple
130177
);
178+
179+
#{if($compat, '&.btn-primary', '&.-primary')} {
180+
@include colorize(
181+
$alternate-color: purple,
182+
$background-color: purple
183+
);
184+
}
131185
}
132186

133-
.ns-root #{if($compat, '&-ruby', '&.-ruby')} {
187+
.ns-root #{if($compat, '&-ruby.btn', '&.-ruby')} {
134188
@include colorize(
135-
$background-color: ruby,
136189
$border-color: ruby,
137-
$alternate-color: ruby
190+
$color: ruby
138191
);
192+
193+
#{if($compat, '&.btn-primary', '&.-primary')} {
194+
@include colorize(
195+
$alternate-color: ruby,
196+
$background-color: ruby
197+
);
198+
}
139199
}
140200

141201
.ns-root #{if($compat, '&-sky', '&.-sky')} {
142202
@include colorize(
143-
$background-color: sky,
144203
$border-color: sky,
145-
$alternate-color: sky
204+
$color: sky
146205
);
206+
207+
#{if($compat, '&.btn-primary', '&.-primary')} {
208+
@include colorize(
209+
$alternate-color: sky,
210+
$background-color: sky
211+
);
212+
}
147213
}
148214
}
149215
}
150216

151217
// Skin
152218

219+
@keyframes empty {}
220+
153221
@mixin button-animations($animation: "", $color: background, $percent: 5%, $root: false) {
154222
@at-root {
155223
@keyframes #{$animation}-hightlight-light {
@@ -226,7 +294,7 @@
226294
$contrasted-border-color: accent background 20%
227295
);
228296

229-
#{if($compat, '&.btn-active, &.btn:active', '&:active, &.-active')} {
297+
#{if($compat, '&.btn-active, &:active', '&:active, &.-active')} {
230298
@include button-animations();
231299
}
232300
}
@@ -239,8 +307,12 @@
239307
$border-color: accent
240308
);
241309

242-
#{if($compat, '&.btn-active, &.btn:active', '&:active, &.-active')} {
243-
@include button-animations(accent, accent, 10%);
310+
#{if($compat, '&.btn-active, &:active', '&:active, &.-active')} {
311+
@if $enable-rounded {
312+
@include button-animations(accent, accent, 10%);
313+
} @else {
314+
@include colorize($contrasted-background-color: accent background 10%);
315+
}
244316
}
245317
}
246318
}

0 commit comments

Comments
 (0)