",
6 | "homepage": "https://www.nativescript.org",
7 | "license": "Apache-2.0",
8 | "main": "index",
9 | "typings": "index.d.ts",
10 | "repository": {
11 | "type": "git",
12 | "url": "https://github.com/NativeScript/theme"
13 | },
14 | "nativescript": {
15 | "id": "org.nativescript.theme",
16 | "tns-ios": {
17 | "version": "6.5.2"
18 | },
19 | "tns-android": {
20 | "version": "6.5.3"
21 | }
22 | },
23 | "dependencies": {
24 | "@nativescript/core": "latest",
25 | "@nativescript/theme": "./src",
26 | "bootstrap": "~4.5.2",
27 | "nativescript-picker": "~2.1.2",
28 | "@nativescript/datetimepicker": "~3.0.0",
29 | "nativescript-themes": "2.0.1",
30 | "nativescript-ui-autocomplete": "~7.0.0",
31 | "nativescript-ui-sidedrawer": "~9.0.0",
32 | "nativescript-ui-dataform": "~7.0.0",
33 | "nativescript-ui-listview": "~9.0.0",
34 | "nativescript-masked-text-field": "~4.0.3"
35 | },
36 | "devDependencies": {
37 | "@nativescript/webpack": "~2.1.0",
38 | "babel-eslint": "^10.0.3",
39 | "cache-loader": "4.1.0",
40 | "eslint": "6.4.0",
41 | "glob": "7.1.4",
42 | "lazy": "1.0.11",
43 | "resolve-url-loader": "3.1.1",
44 | "sass": "~1.77.8",
45 | "sass-lint": "~1.13.1",
46 | "speed-measure-webpack-plugin": "~1.3.1"
47 | },
48 | "scripts": {
49 | "eslint": "node_modules/.bin/eslint .",
50 | "builder": "node scripts/builder.js",
51 | "lint": "eslint \"app/**/*.js\" \"src/**/*.js\""
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/app-compat/pages/forms.xml:
--------------------------------------------------------------------------------
1 |
4 |
6 |
7 |
8 |
9 |
13 |
14 |
15 |
19 |
20 |
21 |
25 |
26 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/app/pages/buttons.xml:
--------------------------------------------------------------------------------
1 |
4 |
6 |
7 |
14 |
15 |
18 |
19 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/src/scss/mixins/_colorize.scss:
--------------------------------------------------------------------------------
1 | $enhancers: 'alternate', 'scale-alternate', 'contrasted', 'scale-contrasted';
2 | $root-classes: '.ns-modal', '.ns-root', '.ns-android', '.ns-ios', '.ns-phone', '.ns-tablet', '.ns-portrait', '.ns-landscape';
3 |
4 | @mixin enhance($name, $arguments, $colors) {
5 | $args: ();
6 | $has-enhancer: false;
7 |
8 | $color: map-get($colors, $arguments);
9 | $color: if($color != null, $color, const($arguments));
10 |
11 | @each $enhancer in $enhancers {
12 | @if str-index($name, '#{$enhancer}-') == 1 {
13 | $has-enhancer: $enhancer;
14 | }
15 | }
16 |
17 | @if $has-enhancer {
18 | @each $arg in $arguments {
19 | $color: map-get($colors, $arg);
20 | $const: const($arg);
21 |
22 | $args: append($args, if($color != null, $color, if($const != null, $const, $arg)));
23 | }
24 |
25 | $name: str-slice($name, str-length($has-enhancer) + 2);
26 | $color: call(get-function($has-enhancer), $args...);
27 | }
28 |
29 | & {
30 | #{$name}: $color;
31 | }
32 | }
33 |
34 | @mixin colorize($args...) {
35 | $is-at-root: false;
36 |
37 | @each $class in $root-classes {
38 | @if(str-index('#{&}', $class) == 1) {
39 | $is-at-root: true;
40 | }
41 | }
42 |
43 | @each $name, $arguments in keywords($args) {
44 | @include enhance($name, $arguments, $light-colors);
45 | }
46 |
47 | @at-root #{if($is-at-root,
48 | selector-append('.ns-dark', &),
49 | selector-nest('.ns-dark', &))} {
50 |
51 | @each $name, $arguments in keywords($args) {
52 | @include enhance($name, $arguments, $dark-colors);
53 | }
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/app/pages/listview.xml:
--------------------------------------------------------------------------------
1 |
4 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
38 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/app/App_Resources/Android/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
18 |
19 |
21 |
22 |
23 |
31 |
32 |
34 |
35 |
36 |
42 |
43 |
45 |
46 |
--------------------------------------------------------------------------------
/app/app-root/app-root.xml:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 |
10 |
11 |
12 |
16 |
17 |
18 |
19 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
32 |
33 |
34 |
37 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/app-compat/pages/listview.xml:
--------------------------------------------------------------------------------
1 |
5 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
39 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/app-compat/pages/buttons.xml:
--------------------------------------------------------------------------------
1 |
5 |
7 |
8 |
15 |
16 |
19 |
20 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/app/pages/radlistview.xml:
--------------------------------------------------------------------------------
1 |
5 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
39 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/app-compat/pages/radlistview.xml:
--------------------------------------------------------------------------------
1 |
5 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
39 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/app-compat/app-root/app-root.xml:
--------------------------------------------------------------------------------
1 |
6 |
7 |
9 |
10 |
11 |
12 |
16 |
17 |
18 |
19 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
32 |
33 |
34 |
37 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/scss/core/colors/_index.scss:
--------------------------------------------------------------------------------
1 | // $focus is an internal variable to abstract the accent from the input
2 | $focus: null !default;
3 |
4 | @if (global_variable_exists('primary-palette-name')) {
5 | $focus: $primary-palette-name;
6 | } @else {
7 | @if (global_variable_exists('accent')) {
8 | $focus: $accent;
9 | } @else {
10 | $focus: #30bcff;
11 | }
12 | }
13 |
14 | $accent-dark: transparent !default;
15 | $disabled: mix($focus, $background, 40%), !default;
16 | $border-color: $focus !default;
17 |
18 | // Constants
19 |
20 | $colors: (
21 | // Core colors
22 | "black": $black,
23 | "white": $white,
24 | grey: $grey,
25 | grey-light: $grey-background,
26 | charcoal: $charcoal,
27 | "transparent": transparent,
28 |
29 | // Accents
30 | aqua: #00caab,
31 | blue: #3a53ff,
32 | brown: #795548,
33 | forest: #006968,
34 | grey-dark: #5c687c,
35 | purple: #8130ff,
36 | lemon: #ffea00,
37 | lime: #aee406,
38 | orange: #f57c00,
39 | ruby: #ff1744,
40 | sky: #30bcff,
41 |
42 | error: #d50000
43 | );
44 |
45 | $constants: map-merge($colors, (
46 | font-size: $font-size,
47 |
48 | // Buttons
49 | background-alt-10: $background-alt-10,
50 | btn-color-secondary: $btn-color-secondary,
51 | btn-color-disabled: $btn-color-disabled,
52 | btn-font-size: $btn-font-size,
53 | btn-min-width: $btn-min-width,
54 | btn-height: $btn-height,
55 | btn-padding-x: $btn-padding-x,
56 | btn-padding-y: $btn-padding-y,
57 | btn-margin-x: $btn-margin-x,
58 | btn-margin-y: $btn-margin-y,
59 | btn-radius: $btn-radius,
60 |
61 | // Headings
62 | headings-margin-bottom: $headings-margin-bottom,
63 | headings-font-weight: $headings-font-weight,
64 |
65 | // Borders
66 | border-width: $border-width,
67 | border-radius: $border-radius,
68 | border-radius-sm: $border-radius-sm,
69 | border-radius-lg: $border-radius-lg,
70 |
71 | // Icons
72 | icon-font-size: $font-size,
73 | icon-font-size-lg: $font-size + 4,
74 |
75 | // Misc
76 | disabled-opacity: $disabled-opacity
77 | ));
78 |
79 | @import "./light";
80 | @import "./dark";
81 |
--------------------------------------------------------------------------------
/app/pages/forms.xml:
--------------------------------------------------------------------------------
1 |
5 |
7 |
8 |
9 |
12 |
15 |
16 |
17 |
20 |
21 |
36 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/src/scss/_controls.scss:
--------------------------------------------------------------------------------
1 |
2 | @if not $compat {
3 | @include button-skin(
4 | ('Button',
5 | '.nt-button')
6 | );
7 |
8 | @include activity-indicator-skin(
9 | ('ActivityIndicator',
10 | '.nt-activity-indicator')
11 | );
12 |
13 | @include segmented-bar-skin(
14 | ('SegmentedBar',
15 | '.nt-segmented-bar')
16 | );
17 |
18 | @include progress-skin(
19 | ('Progress',
20 | '.nt-progress')
21 | );
22 |
23 | @include slider-skin(
24 | ('Slider',
25 | '.nt-slider')
26 | );
27 |
28 | @include search-bar-skin(
29 | ('SearchBar',
30 | '.nt-search-bar')
31 | );
32 |
33 | @include switch-skin(
34 | ('Switch',
35 | '.nt-switch')
36 | );
37 |
38 | @include tab-view-skin(
39 | ('TabView',
40 | '.nt-tab-view')
41 | );
42 |
43 | @include tabs-skin();
44 |
45 | @include list-view-skin(
46 | ('ListView',
47 | 'RadListView',
48 | '.nt-list-view')
49 | );
50 |
51 | @include side-drawer-skin(
52 | ('RadSideDrawer',
53 | '.nt-drawer')
54 | );
55 |
56 |
57 | // Forms
58 |
59 | @include form-skin(
60 | ('Form',
61 | '.nt-form')
62 | );
63 |
64 | @include form-fields-skin(
65 | ('.nt-input')
66 | );
67 |
68 | @include input-component-skin(
69 | ('.nt-input')
70 | );
71 |
72 | @include action-bar-skin(
73 | ('ActionBar',
74 | '.nt-action-bar'),
75 | ('Label',
76 | 'Button',
77 | '.nt-action-bar__item')
78 | );
79 |
80 | } @else {
81 | @include button-skin('.btn');
82 | @include activity-indicator-skin('.activity-indicator');
83 | @include segmented-bar-skin('.segmented-bar');
84 | @include progress-skin('.progress');
85 | @include slider-skin('.slider');
86 | @include switch-skin('.switch');
87 | @include tab-view-skin('.tab-view');
88 | @include list-view-skin('.list-group');
89 | @include side-drawer-skin('.side-drawer');
90 | @include form-fields-skin();
91 | @include input-component-skin('.input-field');
92 | @include action-bar-skin('.action-bar', '.action-item');
93 | }
94 |
--------------------------------------------------------------------------------
/app/pages/dataform.js:
--------------------------------------------------------------------------------
1 | import { BaseModel } from "./base";
2 |
3 | export class Person {
4 | constructor(name, age, email, city, street, streetNumber, birthday) {
5 | this.name = name;
6 | this.age = age;
7 | this.email = email;
8 | this.city = city;
9 | this.street = street;
10 | this.streetNumber = streetNumber;
11 | this.birthday = birthday;
12 | }
13 | }
14 |
15 | export class DataFormModel extends BaseModel {
16 | constructor(page) {
17 | super(page);
18 |
19 | this.person = new Person("John", 23, "john@company.com", "New York", "5th Avenue", 11, new Date("06 March 1975").toISOString());
20 |
21 | this.metadata = {
22 | isReadOnly: false,
23 | commitMode: "Immediate",
24 | validationMode: "Immediate",
25 | propertyAnnotations:
26 | [
27 | {
28 | name: "name",
29 | displayName: "Name",
30 | index: 0
31 | },
32 | {
33 | name: "age",
34 | displayName: "Age",
35 | index: 1,
36 | editor: "Number"
37 | },
38 | {
39 | name: "email",
40 | displayName: "E-Mail",
41 | index: 2,
42 | editor: "Email"
43 | },
44 | {
45 | name: "city",
46 | displayName: "City",
47 | index: 3,
48 | editor: "Picker",
49 | valuesProvider: ["New York", "Washington", "Los Angeles"]
50 | },
51 | {
52 | name: "street",
53 | displayName: "Street Name",
54 | index: 4
55 | },
56 | {
57 | name: "streetNumber",
58 | displayName: "Street Number",
59 | index: 5,
60 | editor: "Number"
61 | },
62 | {
63 | name: "birthday",
64 | displayName: "Birthday",
65 | index: 6,
66 | editor: "Date"
67 | }
68 | ]
69 | };
70 | }
71 | }
72 |
73 | export function navigatingTo({ object: page }) {
74 | page.bindingContext = new DataFormModel(page);
75 | }
76 |
--------------------------------------------------------------------------------
/app/pages/themes.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
9 |
10 |
11 |
16 |
17 |
20 |
32 |
33 |
36 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/src/scss/core/colors/_light.scss:
--------------------------------------------------------------------------------
1 | // Core light colors
2 | $light-colors: (
3 | primary: $primary,
4 | background: $background,
5 | secondary: $secondary,
6 |
7 | accent: $focus,
8 | complementary: $complementary,
9 | complementary-color: $complementary-color,
10 |
11 | btn-color: $primary,
12 | border-color: $border-color
13 | );
14 |
15 | @if global_variable_exists("theme-type") {
16 | $light-colors: map-merge($light-colors, (
17 | accent: get-base-hue($primary-palette-name, 500),
18 | complementary: get-base-hue($secondary-palette-name, 500),
19 | btn-color: map-get($material-light-complimentary, body-bg),
20 | border-color: rgba(0,0,0,.08)
21 | ));
22 |
23 | $light-colors: map-merge($light-colors, (
24 | disabled: mix(light(accent), light(background), 40%),
25 | complementary-color: alternate(light(complementary))
26 | ));
27 | }
28 |
29 | @if global_variable_exists("body-bg") {
30 | $light-colors: map-merge($light-colors, (
31 | complementary: $card-cap-bg,
32 | complementary-color: alternate($card-cap-bg, 100%),
33 | border-color: darken($background, 3%),
34 | btn-color: $secondary
35 | ));
36 | }
37 |
38 | @if global_variable_exists("bg-color") {
39 | $light-colors: map-merge($light-colors, (
40 | complementary: $accent,
41 | complementary-color: alternate($accent, 100%),
42 | border-color: rgba(0,0,0,.08),
43 | btn-color: $base-bg
44 | ));
45 | }
46 |
47 | $light-colors: map-merge($light-colors, (
48 | background-alt-5: darken(light(background), 5%),
49 | background-alt-10: darken(light(background), 10%),
50 | background-alt-20: darken(light(background), 20%),
51 | disabled: mix(light(accent), light(background), 40%),
52 |
53 | text-color: light(primary),
54 | headings-color: light(primary),
55 |
56 | tab-text-color: mix(const(gray), light(accent), 70%),
57 |
58 | accent-dark: darken(light(accent), 20%),
59 | accent-light: lighten(light(accent), 20%),
60 | accent-transparent: mix(transparent, light(accent), 20%),
61 | primary-accent: mix(transparent, light(accent), 60%),
62 | background-accent: mix(transparent, light(accent), 90%),
63 | background-dark-accent: mix(transparent, light(accent), 85%),
64 |
65 | item-active-color: mix(light(primary), light(background), 70%)
66 | ));
67 |
68 | $light-colors: map-merge($light-colors, (
69 | item-active-background: light(background-dark-accent),
70 | complementary-dark: darken(light(complementary), 5%),
71 | item-active-icon-color: light(item-active-color),
72 | btn-color-inverse: alternate(light(accent)),
73 | btn-color-secondary: darken(light(btn-color), 10%)
74 | ));
75 |
76 |
--------------------------------------------------------------------------------
/app-compat/pages/themes.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
9 |
10 |
13 |
16 |
17 |
20 |
32 |
33 |
36 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/src/scss/core/_controls.scss:
--------------------------------------------------------------------------------
1 |
2 | @if not $compat {
3 | @include button(
4 | ('Button',
5 | '.nt-button')
6 | );
7 |
8 | @include label(
9 | ('Label',
10 | '.nt-label')
11 | );
12 |
13 |
14 | @include frame(
15 | ('Frame',
16 | '.nt-frame')
17 | );
18 |
19 | @include page(
20 | ('Page',
21 | '.nt-page')
22 | );
23 |
24 | @include activity-indicator(
25 | ('ActivityIndicator',
26 | '.nt-activity-indicator')
27 | );
28 |
29 | @include segmented-bar(
30 | ('SegmentedBar',
31 | '.nt-segmented-bar')
32 | );
33 |
34 | @include progress(
35 | ('Progress',
36 | '.nt-progress')
37 | );
38 |
39 | @include slider(
40 | ('Slider',
41 | '.nt-slider')
42 | );
43 |
44 | @include search-bar(
45 | ('SearchBar',
46 | '.nt-search-bar')
47 | );
48 |
49 | @include switch(
50 | ('Switch',
51 | '.nt-switch')
52 | );
53 |
54 | @include tab-view(
55 | ('TabView',
56 | '.nt-tab-view')
57 | );
58 |
59 | @include tabs();
60 |
61 | @include list-view(
62 | ('ListView',
63 | 'RadListView',
64 | '.nt-list-view')
65 | );
66 |
67 | @include side-drawer(
68 | ('RadSideDrawer',
69 | '.nt-drawer')
70 | );
71 |
72 |
73 | // Forms
74 |
75 | @include form(
76 | ('Form',
77 | '.nt-form')
78 | );
79 |
80 | @include form-fields(
81 | ('.nt-input')
82 | );
83 |
84 | @include input-component(
85 | ('.nt-input')
86 | );
87 |
88 | @include action-bar(
89 | ('ActionBar',
90 | '.nt-action-bar'),
91 |
92 | ('Label',
93 | 'Button',
94 | '.nt-action-bar__item')
95 | );
96 | } @else {
97 | @include button('.btn');
98 | @include label('.label');
99 | @include page('.page');
100 | @include activity-indicator('.activity-indicator');
101 | @include segmented-bar('.segmented-bar');
102 | @include progress('.progress');
103 | @include slider('.slider');
104 | @include search-bar('.search-bar');
105 | @include switch('.switch');
106 | @include tab-view('.tab-view');
107 | @include list-view('.list-group');
108 | @include side-drawer('.side-drawer');
109 | @include form('.form');
110 | @include form-fields();
111 | @include input-component('.input-field');
112 | @include action-bar('.action-bar', '.action-item');
113 | }
114 |
--------------------------------------------------------------------------------
/src/scss/core/primitives/_spacing.scss:
--------------------------------------------------------------------------------
1 | /* Width/Height */
2 | .w-full {
3 | width: 100%;
4 | }
5 |
6 | .w-100 {
7 | width: 100;
8 | }
9 |
10 | .h-full {
11 | height: 100%;
12 | }
13 |
14 | .h-100 {
15 | height: 100;
16 | }
17 |
18 | $spacer: 5 !default;
19 | $spacer-x: $spacer !default;
20 | $spacer-y: $spacer !default;
21 | $spacer-alt: 4 !default;
22 | $spacer-x-alt: $spacer-alt !default;
23 | $spacer-y-alt: $spacer-alt !default;
24 | $n-spacers: (
25 | 0: (
26 | x: 0,
27 | y: 0
28 | ),
29 | 2: (
30 | x: 2,
31 | y: 2
32 | ),
33 | 4: (
34 | x: $spacer-x-alt,
35 | y: $spacer-y-alt
36 | ),
37 | 5: (
38 | x: $spacer-x,
39 | y: $spacer-y
40 | ),
41 | 8: (
42 | x: $spacer-x-alt * 2,
43 | y: $spacer-y-alt * 2
44 | ),
45 | 10: (
46 | x: ($spacer-x * 2),
47 | y: ($spacer-y * 2)
48 | ),
49 | 12: (
50 | x: $spacer-x-alt * 3,
51 | y: $spacer-y-alt * 3
52 | ),
53 | 15: (
54 | x: ($spacer-x * 3),
55 | y: ($spacer-y * 3)
56 | ),
57 | 16: (
58 | x: $spacer-x-alt * 4,
59 | y: $spacer-y-alt * 4
60 | ),
61 | 20: (
62 | x: ($spacer-x * 4),
63 | y: ($spacer-y * 4)
64 | ),
65 | 24: (
66 | x: $spacer-x-alt * 6,
67 | y: $spacer-y-alt * 6
68 | ),
69 | 25: (
70 | x: ($spacer-x * 5),
71 | y: ($spacer-y * 5)
72 | ),
73 | 28: (
74 | x: $spacer-x-alt * 7,
75 | y: $spacer-y-alt * 7
76 | ),
77 | 30: (
78 | x: ($spacer-x * 6),
79 | y: ($spacer-y * 6)
80 | )
81 | ) !default;
82 |
83 | /**
84 | * Margin and Padding
85 | * The following creates this pattern:
86 | * .m-0{margin:0}.m-t-0{margin-top:0}.m-r-0{margin-right:0}.m-b-0{margin-bottom:0}.m-l-0{margin-left:0}.m-x-0{margin-right:0;margin-left:0}.m-y-0{margin-top:0;margin-bottom:0}
87 | * Same for Padding (using the 'p' abbreviation)
88 | * From 0, 2, 5, 10, 15, 20, 25, 30
89 | **/
90 | // sass-lint:disable-all
91 | @each $prop, $abbrev in (margin: m, padding: p) {
92 | // sass-lint:enable-all
93 | @each $size, $lengths in $n-spacers {
94 | $length-x: map-get($lengths, x);
95 | $length-y: map-get($lengths, y);
96 |
97 | // sass-lint:disable-all
98 | .#{$abbrev}-#{$size} { #{$prop}: $length-y; } // a = All sides (can just use one length)
99 | // sass-lint:enable-all
100 | .#{$abbrev}-t-#{$size} { #{$prop}-top: $length-y; }
101 | .#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x; }
102 | .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y; }
103 | .#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x; }
104 |
105 | // Axes
106 | .#{$abbrev}-x-#{$size} {
107 | #{$prop}-right: $length-x;
108 | #{$prop}-left: $length-x;
109 | }
110 |
111 | .#{$abbrev}-y-#{$size} {
112 | #{$prop}-top: $length-y;
113 | #{$prop}-bottom: $length-y;
114 | }
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/app/pages/colors.xml:
--------------------------------------------------------------------------------
1 |
4 |
6 |
7 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/app-compat/pages/colors.xml:
--------------------------------------------------------------------------------
1 |
5 |
7 |
8 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "size" : "20x20",
5 | "idiom" : "iphone",
6 | "filename" : "icon-20@2x.png",
7 | "scale" : "2x"
8 | },
9 | {
10 | "size" : "20x20",
11 | "idiom" : "iphone",
12 | "filename" : "icon-20@3x.png",
13 | "scale" : "3x"
14 | },
15 | {
16 | "size" : "29x29",
17 | "idiom" : "iphone",
18 | "filename" : "icon-29.png",
19 | "scale" : "1x"
20 | },
21 | {
22 | "size" : "29x29",
23 | "idiom" : "iphone",
24 | "filename" : "icon-29@2x.png",
25 | "scale" : "2x"
26 | },
27 | {
28 | "size" : "29x29",
29 | "idiom" : "iphone",
30 | "filename" : "icon-29@3x.png",
31 | "scale" : "3x"
32 | },
33 | {
34 | "size" : "40x40",
35 | "idiom" : "iphone",
36 | "filename" : "icon-40@2x.png",
37 | "scale" : "2x"
38 | },
39 | {
40 | "size" : "40x40",
41 | "idiom" : "iphone",
42 | "filename" : "icon-40@3x.png",
43 | "scale" : "3x"
44 | },
45 | {
46 | "size" : "60x60",
47 | "idiom" : "iphone",
48 | "filename" : "icon-60@2x.png",
49 | "scale" : "2x"
50 | },
51 | {
52 | "size" : "60x60",
53 | "idiom" : "iphone",
54 | "filename" : "icon-60@3x.png",
55 | "scale" : "3x"
56 | },
57 | {
58 | "size" : "20x20",
59 | "idiom" : "ipad",
60 | "filename" : "icon-20.png",
61 | "scale" : "1x"
62 | },
63 | {
64 | "size" : "20x20",
65 | "idiom" : "ipad",
66 | "filename" : "icon-20@2x.png",
67 | "scale" : "2x"
68 | },
69 | {
70 | "size" : "29x29",
71 | "idiom" : "ipad",
72 | "filename" : "icon-29.png",
73 | "scale" : "1x"
74 | },
75 | {
76 | "size" : "29x29",
77 | "idiom" : "ipad",
78 | "filename" : "icon-29@2x.png",
79 | "scale" : "2x"
80 | },
81 | {
82 | "size" : "40x40",
83 | "idiom" : "ipad",
84 | "filename" : "icon-40.png",
85 | "scale" : "1x"
86 | },
87 | {
88 | "size" : "40x40",
89 | "idiom" : "ipad",
90 | "filename" : "icon-40@2x.png",
91 | "scale" : "2x"
92 | },
93 | {
94 | "size" : "76x76",
95 | "idiom" : "ipad",
96 | "filename" : "icon-76.png",
97 | "scale" : "1x"
98 | },
99 | {
100 | "size" : "76x76",
101 | "idiom" : "ipad",
102 | "filename" : "icon-76@2x.png",
103 | "scale" : "2x"
104 | },
105 | {
106 | "size" : "83.5x83.5",
107 | "idiom" : "ipad",
108 | "filename" : "icon-83.5@2x.png",
109 | "scale" : "2x"
110 | },
111 | {
112 | "size" : "1024x1024",
113 | "idiom" : "ios-marketing",
114 | "filename" : "icon-1024.png",
115 | "scale" : "1x"
116 | }
117 | ],
118 | "info" : {
119 | "version" : 1,
120 | "author" : "xcode"
121 | }
122 | }
--------------------------------------------------------------------------------
/app/pages/tabview.js:
--------------------------------------------------------------------------------
1 | import { BaseModel } from "./base";
2 |
3 | export class TabsModel extends BaseModel {
4 | constructor() {
5 | super();
6 |
7 | this.tab1 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget libero sed diam congue tristique. Nullam convallis dapibus nunc, et maximus lectus scelerisque quis. Ut ut urna tellus. Vivamus pharetra venenatis urna, vel interdum turpis vestibulum quis. Duis varius feugiat elit, vel ultricies quam ullamcorper non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id risus tellus.Vestibulum consectetur leo nec sapien gravida, ut tincidunt turpis laoreet. Nulla quis nisi nec lectus mattis luctus a sit amet elit. Aliquam nec ipsum vitae ex luctus elementum ut ut nisi. Integer vehicula dignissim scelerisque. Nullam ut felis et orci semper tincidunt efficitur in ante. Praesent rutrum bibendum arcu, id porttitor odio ultrices nec. Pellentesque nulla nibh, mattis sit amet magna sit amet, ultrices vestibulum velit. Sed at ante ipsum. Nullam justo nisl, volutpat in lobortis id, eleifend eu justo. Nunc dui metus, faucibus gravida viverra et, varius in nisi. Mauris vitae accumsan odio.";
8 | this.tab2 = "Vestibulum consectetur leo nec sapien gravida, ut tincidunt turpis laoreet. Nulla quis nisi nec lectus mattis luctus a sit amet elit. Aliquam nec ipsum vitae ex luctus elementum ut ut nisi. Integer vehicula dignissim scelerisque. Nullam ut felis et orci semper tincidunt efficitur in ante. Praesent rutrum bibendum arcu, id porttitor odio ultrices nec. Pellentesque nulla nibh, mattis sit amet magna sit amet, ultrices vestibulum velit. Sed at ante ipsum. Nullam justo nisl, volutpat in lobortis id, eleifend eu justo. Nunc dui metus, faucibus gravida viverra et, varius in nisi. Mauris vitae accumsan odio.Nulla facilisi. Morbi sed mauris at nisl sagittis gravida. Aliquam tincidunt magna arcu, et posuere nibh porttitor molestie. Nam laoreet semper purus sed ornare. Aliquam erat volutpat. Vestibulum vulputate rhoncus sem ut euismod. Pellentesque condimentum dignissim ligula, eget viverra nulla luctus non. Praesent orci dui, malesuada non sollicitudin molestie, varius eget sem. Sed aliquet malesuada nunc sed suscipit. Phasellus egestas lectus sed enim pellentesque, vitae interdum est eleifend. Nulla commodo ligula eget libero suscipit imperdiet. Suspendisse ornare erat sit amet fermentum volutpat. Cras sollicitudin eget libero et bibendum. Mauris mattis feugiat ante, sit amet pharetra ante ullamcorper id.";
9 | this.tab3 = "Phasellus at nunc consectetur, maximus diam nec, tristique neque. Ut volutpat facilisis ex, vel mollis tortor rutrum nec. Aenean tempus risus eu velit tincidunt, at viverra magna finibus. Mauris in eleifend ante. Donec varius vestibulum urna nec aliquam. In id erat lacus. Vestibulum viverra odio orci. Cras tortor elit, sagittis ac facilisis id, ultricies id ex. Donec malesuada metus vel dolor pharetra imperdiet. Integer quis orci laoreet eros elementum pellentesque. Mauris ornare dignissim mauris in vehicula. Fusce in malesuada dui. Sed tristique sollicitudin fringilla.";
10 |
11 | this.image1 = "http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/dogepaints.jpg";
12 | }
13 | }
14 |
15 | export function navigatingTo({ object: page }) {
16 | page.bindingContext = new TabsModel(page);
17 | }
18 |
--------------------------------------------------------------------------------
/app/pages/bottomnav.js:
--------------------------------------------------------------------------------
1 | import { BaseModel } from "./base";
2 |
3 | export class TabsModel extends BaseModel {
4 | constructor() {
5 | super();
6 |
7 | this.tab1 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget libero sed diam congue tristique. Nullam convallis dapibus nunc, et maximus lectus scelerisque quis. Ut ut urna tellus. Vivamus pharetra venenatis urna, vel interdum turpis vestibulum quis. Duis varius feugiat elit, vel ultricies quam ullamcorper non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id risus tellus.Vestibulum consectetur leo nec sapien gravida, ut tincidunt turpis laoreet. Nulla quis nisi nec lectus mattis luctus a sit amet elit. Aliquam nec ipsum vitae ex luctus elementum ut ut nisi. Integer vehicula dignissim scelerisque. Nullam ut felis et orci semper tincidunt efficitur in ante. Praesent rutrum bibendum arcu, id porttitor odio ultrices nec. Pellentesque nulla nibh, mattis sit amet magna sit amet, ultrices vestibulum velit. Sed at ante ipsum. Nullam justo nisl, volutpat in lobortis id, eleifend eu justo. Nunc dui metus, faucibus gravida viverra et, varius in nisi. Mauris vitae accumsan odio.";
8 | this.tab2 = "Vestibulum consectetur leo nec sapien gravida, ut tincidunt turpis laoreet. Nulla quis nisi nec lectus mattis luctus a sit amet elit. Aliquam nec ipsum vitae ex luctus elementum ut ut nisi. Integer vehicula dignissim scelerisque. Nullam ut felis et orci semper tincidunt efficitur in ante. Praesent rutrum bibendum arcu, id porttitor odio ultrices nec. Pellentesque nulla nibh, mattis sit amet magna sit amet, ultrices vestibulum velit. Sed at ante ipsum. Nullam justo nisl, volutpat in lobortis id, eleifend eu justo. Nunc dui metus, faucibus gravida viverra et, varius in nisi. Mauris vitae accumsan odio.Nulla facilisi. Morbi sed mauris at nisl sagittis gravida. Aliquam tincidunt magna arcu, et posuere nibh porttitor molestie. Nam laoreet semper purus sed ornare. Aliquam erat volutpat. Vestibulum vulputate rhoncus sem ut euismod. Pellentesque condimentum dignissim ligula, eget viverra nulla luctus non. Praesent orci dui, malesuada non sollicitudin molestie, varius eget sem. Sed aliquet malesuada nunc sed suscipit. Phasellus egestas lectus sed enim pellentesque, vitae interdum est eleifend. Nulla commodo ligula eget libero suscipit imperdiet. Suspendisse ornare erat sit amet fermentum volutpat. Cras sollicitudin eget libero et bibendum. Mauris mattis feugiat ante, sit amet pharetra ante ullamcorper id.";
9 | this.tab3 = "Phasellus at nunc consectetur, maximus diam nec, tristique neque. Ut volutpat facilisis ex, vel mollis tortor rutrum nec. Aenean tempus risus eu velit tincidunt, at viverra magna finibus. Mauris in eleifend ante. Donec varius vestibulum urna nec aliquam. In id erat lacus. Vestibulum viverra odio orci. Cras tortor elit, sagittis ac facilisis id, ultricies id ex. Donec malesuada metus vel dolor pharetra imperdiet. Integer quis orci laoreet eros elementum pellentesque. Mauris ornare dignissim mauris in vehicula. Fusce in malesuada dui. Sed tristique sollicitudin fringilla.";
10 |
11 | this.image1 = "https://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/dogepaints.jpg";
12 | }
13 | }
14 |
15 | export function navigatingTo({ object: page }) {
16 | page.bindingContext = new TabsModel(page);
17 | }
18 |
--------------------------------------------------------------------------------
/app/pages/tabs.js:
--------------------------------------------------------------------------------
1 | import { BaseModel } from "./base";
2 |
3 | export class TabsModel extends BaseModel {
4 | constructor() {
5 | super();
6 |
7 | this.tab1 = "Lorem ipsum dolor sit amet, consectetur adipiscing elit . Fusce eget libero sed diam congue tristique.
Nullam convallis dapibus nunc, et maximus lectus scelerisque quis. Ut ut urna tellus. Vivamus pharetra venenatis urna, vel interdum turpis vestibulum quis. Duis varius feugiat elit, vel ultricies quam ullamcorper non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id risus tellus.Vestibulum consectetur leo nec sapien gravida, ut tincidunt turpis laoreet. Nulla quis nisi nec lectus mattis luctus a sit amet elit. Aliquam nec ipsum vitae ex luctus elementum ut ut nisi. Integer vehicula dignissim scelerisque. Nullam ut felis et orci semper tincidunt efficitur in ante. Praesent rutrum bibendum arcu, id porttitor odio ultrices nec. Pellentesque nulla nibh, mattis sit amet magna sit amet, ultrices vestibulum velit. Sed at ante ipsum. Nullam justo nisl, volutpat in lobortis id, eleifend eu justo. Nunc dui metus, faucibus gravida viverra et, varius in nisi. Mauris vitae accumsan odio.
";
8 | this.tab2 = "Vestibulum consectetur leo nec sapien gravida, ut tincidunt turpis laoreet. Nulla quis nisi nec lectus mattis luctus a sit amet elit. Aliquam nec ipsum vitae ex luctus elementum ut ut nisi. Integer vehicula dignissim scelerisque. Nullam ut felis et orci semper tincidunt efficitur in ante. Praesent rutrum bibendum arcu, id porttitor odio ultrices nec. Pellentesque nulla nibh, mattis sit amet magna sit amet, ultrices vestibulum velit. Sed at ante ipsum. Nullam justo nisl, volutpat in lobortis id, eleifend eu justo. Nunc dui metus, faucibus gravida viverra et, varius in nisi. Mauris vitae accumsan odio.Nulla facilisi. Morbi sed mauris at nisl sagittis gravida. Aliquam tincidunt magna arcu, et posuere nibh porttitor molestie. Nam laoreet semper purus sed ornare. Aliquam erat volutpat. Vestibulum vulputate rhoncus sem ut euismod. Pellentesque condimentum dignissim ligula, eget viverra nulla luctus non. Praesent orci dui, malesuada non sollicitudin molestie, varius eget sem. Sed aliquet malesuada nunc sed suscipit. Phasellus egestas lectus sed enim pellentesque, vitae interdum est eleifend. Nulla commodo ligula eget libero suscipit imperdiet. Suspendisse ornare erat sit amet fermentum volutpat. Cras sollicitudin eget libero et bibendum. Mauris mattis feugiat ante, sit amet pharetra ante ullamcorper id.";
9 | this.tab3 = "Phasellus at nunc consectetur, maximus diam nec, tristique neque. Ut volutpat facilisis ex, vel mollis tortor rutrum nec. Aenean tempus risus eu velit tincidunt, at viverra magna finibus. Mauris in eleifend ante. Donec varius vestibulum urna nec aliquam. In id erat lacus. Vestibulum viverra odio orci. Cras tortor elit, sagittis ac facilisis id, ultricies id ex. Donec malesuada metus vel dolor pharetra imperdiet. Integer quis orci laoreet eros elementum pellentesque. Mauris ornare dignissim mauris in vehicula. Fusce in malesuada dui. Sed tristique sollicitudin fringilla.";
10 |
11 | this.image1 = "https://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/dogepaints.jpg";
12 | }
13 | }
14 |
15 | export function navigatingTo({ object: page }) {
16 | page.bindingContext = new TabsModel(page);
17 | }
18 |
--------------------------------------------------------------------------------
/src/scss/core/colors/_dark.scss:
--------------------------------------------------------------------------------
1 | // Core dark colors
2 | $dark-colors: (
3 | primary: $primary-dark,
4 | background: $background-dark,
5 | secondary: $secondary-dark,
6 |
7 | accent: lighten($focus, 10%),
8 | complementary: if(light(complementary) == #fff, $background-dark, if($complementary-dark != transparent, $complementary-dark, light(complementary))),
9 |
10 | btn-color: $white,
11 | border-color: lighten($focus, 10%)
12 | );
13 |
14 | @if (global_variable_exists("theme-type")) {
15 | $dark-colors: map-merge($dark-colors, (
16 | accent: lighten(get-base-hue($primary-palette-name, 500), 10%),
17 | complementary: get-base-hue($secondary-palette-name, 500),
18 | btn-color: map-get($material-dark-complimentary, base-bg),
19 | border-color: rgba(0,0,0,.08)
20 | ));
21 |
22 | $dark-colors: map-merge($dark-colors, (
23 | disabled: mix(dark(accent), dark(background), 40%)
24 | ));
25 | }
26 |
27 | @if (global_variable_exists("body-bg")) {
28 | $dark-colors: map-merge($dark-colors, (
29 | background: mix($body-bg, $charcoal, if(lightness($body-bg) > .5, 10%, 40%))
30 | ));
31 |
32 | $dark-colors: map-merge($dark-colors, (
33 | complementary: $card-cap-bg,
34 | primary: alternate(dark(background), 70%),
35 | border-color: lighten($background, 3%),
36 | btn-color: mix($secondary, $charcoal, 30%)
37 | ));
38 | }
39 |
40 | @if (global_variable_exists("bg-color")) {
41 | $dark-colors: map-merge($dark-colors, (
42 | background: mix($bg-color, $charcoal, 10%)
43 | ));
44 |
45 | $dark-colors: map-merge($dark-colors, (
46 | complementary: $accent,
47 | primary: alternate(dark(background), 70%),
48 | border-color: rgba(255,255,255,.08),
49 | btn-color: mix($base-bg, $charcoal, 10%)
50 | ));
51 | }
52 |
53 | $dark-colors: map-merge($dark-colors, (
54 | accent: if($accent-dark != transparent, $accent-dark, dark(accent))
55 | ));
56 |
57 | $dark-colors: map-merge($dark-colors, (
58 | background-alt-5: lighten(dark(background), 5%),
59 | background-alt-10: lighten(dark(background), 10%),
60 | background-alt-20: lighten(dark(background), 20%),
61 | disabled: mix(dark(accent), dark(background), 40%),
62 |
63 | complementary: if($complementary-dark != transparent, $complementary-dark, mix(dark(complementary), $black, 90%)),
64 |
65 | text-color: dark(primary),
66 | headings-color: dark(primary),
67 |
68 | tab-text-color: mix(const(gray), dark(accent), 70%),
69 |
70 | accent-dark: lighten(dark(accent), 20%),
71 | accent-light: lighten(dark(accent), 40%),
72 | accent-transparent: mix(transparent, dark(accent), 20%),
73 | primary-accent: mix(transparent, dark(accent), 60%),
74 | background-accent: mix(transparent, dark(accent), 90%),
75 | background-dark-accent: mix(transparent, dark(accent), 85%),
76 |
77 | item-active-color: mix(dark(primary), dark(background), 70%)
78 | ));
79 |
80 | $dark-colors: map-merge($dark-colors, (
81 | item-active-background: dark(background-dark-accent),
82 | complementary-color: if($complementary-color-dark != transparent, $complementary-color-dark, alternate(dark(complementary), 100%)),
83 | complementary-dark: darken(dark(complementary), 5%),
84 | item-active-icon-color: dark(item-active-color),
85 | btn-color-inverse: alternate(dark(accent)),
86 | btn-color-secondary: darken(dark(btn-color), 10%)
87 | ));
88 |
89 |
--------------------------------------------------------------------------------
/src/scss/variables/_index.scss:
--------------------------------------------------------------------------------
1 | // Mixins
2 | @import '../mixins/index';
3 |
4 | $compat: false !default;
5 |
6 | $black: #000 !default;
7 | $white: #fff !default;
8 | $base: $white !default;
9 | $grey: #e0e0e0 !default;
10 | $grey-background: #bababa !default;
11 | $charcoal: #303030 !default;
12 |
13 | // Kendo Palettes
14 | @import '../core/primitives/kendo-palletes';
15 |
16 | $font-size: 12 !default;
17 |
18 | // Button defaults
19 | $background-alt-10: #c0ebff !default;
20 | $btn-color-secondary: #01a0ec !default;
21 | $btn-color-disabled: #a4a4a4 !default;
22 | $btn-font-size: $font-size + 2 !default;
23 | $btn-min-width: 64 !default;
24 | $btn-height: 52 !default;
25 | $btn-padding-x: 5 !default;
26 | $btn-padding-y: 0 !default;
27 | $btn-margin-x: 16 !default;
28 | $btn-margin-y: 8 !default;
29 | $btn-radius: 0 !default;
30 |
31 | $headings-margin-bottom: 4 !default;
32 | $headings-font-weight: normal !default;
33 |
34 | // Border defaults
35 | $border-width: 1 !default;
36 | // Needs to be defined, to mitigate leftover radii from other themes
37 | $border-radius: null !default;
38 | $border-radius-sm: 4 !default;
39 | $border-radius-lg: 50% !default;
40 |
41 | // Misc defaults
42 | $disabled-opacity: .5 !default;
43 |
44 | // Options
45 | //
46 | // Quickly modify global styling by enabling or disabling optional features.
47 | // Only border-radius affects all styles, the rest are bootstrap only.
48 | $enable-rounded: false !default;
49 | $enable-shadows: false !default;
50 | $enable-gradients: false !default;
51 | $enable-transitions: false !default;
52 |
53 |
54 | // Colors
55 | $background: #fff !default;
56 | $primary: alternate($background, 85%) !default;
57 | $secondary: darken($primary, 30%) !default;
58 |
59 | $background-dark: $charcoal !default;
60 | $primary-dark: alternate($background-dark, 85%) !default;
61 | $secondary-dark: darken($primary-dark, 30%) !default;
62 |
63 | $complementary: $white !default;
64 | $complementary-dark: transparent !default;
65 |
66 | $complementary-color: alternate($complementary, 100%) !default;
67 | $complementary-color-dark: transparent !default;
68 |
69 | $theme-variant: "nativescript";
70 |
71 | $material-colors: () !default;
72 |
73 | // Kendo and compatibility overrides
74 |
75 | @if (global_variable_exists('ab-background')) {
76 | $complementary: $ab-background;
77 | }
78 |
79 | @if (global_variable_exists('ab-color')) {
80 | $complementary-color: $ab-color;
81 | }
82 |
83 | @if (global_variable_exists('secondary-palette-name')) {
84 | $secondary: $secondary-palette-name;
85 | }
86 |
87 | @if ($border-radius != null) {
88 | $btn-radius: rem-to-dip($border-radius);
89 | $enable-rounded: true;
90 | } else {
91 | $btn-radius: 0;
92 | $enable-rounded: false;
93 | }
94 |
95 | @if (global_variable_exists("text-color")) {
96 | $primary: $text-color;
97 | }
98 |
99 | @if (global_variable_exists("body-color")) {
100 | $primary: $body-color;
101 | }
102 |
103 | @if (global_variable_exists("theme-type")) {
104 | $theme-variant: "kendo-material";
105 | }
106 |
107 | @if (global_variable_exists("body-bg")) {
108 | $theme-variant: "kendo-bootstrap";
109 |
110 | $background: $body-bg;
111 | }
112 |
113 | @if (global_variable_exists("bg-color")) {
114 | $theme-variant: "kendo-default";
115 |
116 | $background: $bg-color;
117 | }
118 |
119 | // Core colors
120 | @import '../core/colors/index';
121 |
--------------------------------------------------------------------------------
/app/pages/themes.js:
--------------------------------------------------------------------------------
1 | import { BaseModel } from "./base";
2 | import themes from "nativescript-themes";
3 | import * as application from "tns-core-modules/application";
4 | import { Theme } from "@nativescript/theme";
5 |
6 | const currentTheme = {
7 | theme: "core.auto",
8 | skin: "",
9 | css: ""
10 | };
11 |
12 | export class ThemesModel extends BaseModel {
13 | constructor() {
14 | super();
15 |
16 | this.theme = "";
17 |
18 | const applyThemeProxy = this._applyThemeInternal.bind(this);
19 |
20 | application.on("livesync", applyThemeProxy);
21 |
22 | // Handle HMR
23 | if (module.hot) {
24 | module.hot.dispose(() => {
25 | application.off("livesync", applyThemeProxy);
26 | });
27 | }
28 |
29 | this._applyThemeInternal();
30 | }
31 |
32 | applyTheme(args) {
33 | const style = args.object.cssName;
34 | this._applyThemeInternal(style);
35 | }
36 |
37 | _applyThemeInternal(name) {
38 | const themeChange = typeof name === "string" && name.startsWith("core.");
39 |
40 | if (themeChange) {
41 | currentTheme.theme = name;
42 | } else {
43 | currentTheme.skin = typeof name === "string" ? name : currentTheme.skin;
44 | }
45 |
46 | const themeName = this.getThemeName(currentTheme.theme);
47 |
48 | Theme.setMode(Theme[themeName]);
49 |
50 | this.set("theme", `${themeName} ${this.getThemeName(currentTheme.skin)}`);
51 |
52 | if (themeChange) {
53 | return;
54 | }
55 |
56 | if (currentTheme.skin === "customized" ||
57 | currentTheme.skin.startsWith("kendo-") ||
58 | currentTheme.skin === "bootstrap-based") {
59 | return import(
60 | /* webpackMode: "lazy",
61 | webpackInclude: /\.s?css$/,
62 | webpackExclude: /_app-styles\.scss/ */
63 | `../${currentTheme.skin}`)
64 | .then((skinStyles) => this._applyStyles(skinStyles, `${currentTheme.skin}`));
65 | }
66 |
67 | import(
68 | /* webpackMode: "lazy",
69 | webpackExclude: /\/scss\/|index.d.ts|index.js/ */
70 | `@nativescript/theme/${currentTheme.skin}`)
71 | .then((skinStyles) => this._applyStyles(skinStyles, `${currentTheme.skin}`));
72 | }
73 |
74 | _applyStyles(skinStyles, name) {
75 | currentTheme.css = skinStyles.default.toString();
76 |
77 | themes.applyThemeCss(currentTheme.css, name);
78 | }
79 |
80 | getThemeName(cssPath) {
81 | if (cssPath.indexOf("core.light") > -1) {
82 | return "Light";
83 | } else if (cssPath.indexOf("core.dark") > -1) {
84 | return "Dark";
85 | } else if (cssPath.indexOf("core.auto") > -1) {
86 | return "Auto";
87 | } else if (cssPath.indexOf("customized") > -1) {
88 | return "Custom";
89 | } else if (cssPath.indexOf("bootstrap-based") > -1) {
90 | return "Bootstrap";
91 | } else {
92 | const filename = cssPath.split("/").splice(-1)[0].split(".")[0];
93 | return capitalizeFirstLetter(filename);
94 | }
95 | }
96 | }
97 |
98 | function capitalizeFirstLetter(string) {
99 | return string.charAt(0).toUpperCase() + string.slice(1);
100 | }
101 |
102 | export function onLoaded({ object: page }) {
103 | page.bindingContext = new ThemesModel();
104 | }
105 |
--------------------------------------------------------------------------------
/src/scss/mixins/_utilities.scss:
--------------------------------------------------------------------------------
1 | @use "sass:math";
2 |
3 | @mixin transition($transition...) {
4 | @if $enable-transitions {
5 | transition: $transition;
6 | }
7 | }
8 |
9 | // Functions
10 |
11 | @function const($const) {
12 | // Workarounds for node-sass color bug
13 | @if $const == white { $const: "white"; }
14 | @if $const == black { $const: "black"; }
15 | @if $const == transparent { $const: "transparent"; }
16 |
17 | @return map-get($constants, $const);
18 | }
19 |
20 | @function color($color) {
21 | @return map-get($colors, $color);
22 | }
23 |
24 | @function light($color) {
25 | @return map-get($light-colors, $color);
26 | }
27 |
28 | @function dark($color) {
29 | @return map-get($dark-colors, $color);
30 | }
31 |
32 | @function theme-is($type) {
33 | @if $type == "kendo" {
34 | @return str-index($theme-variant, '#{$type}-') == 1;
35 | }
36 |
37 | @return $type == $theme-variant;
38 | }
39 |
40 | @function mode-get($mode, $color) {
41 | @if $mode == light {
42 | @return map-get($light-colors, $color);
43 | }
44 |
45 | @return map-get($dark-colors, $color);
46 | }
47 |
48 | @function rem-to-dip($size) {
49 | @if unit($size) != 'em' and unit($size) != 'rem' {
50 | @return $size / ($size * 0 + 1);
51 | }
52 |
53 | $value: $size * $font-size;
54 |
55 | @return round($value);
56 | }
57 |
58 | @function filter-by-text($list, $starts, $excludes, $recursive: false) {
59 | $result: ();
60 |
61 | @for $i from 1 through length($list) {
62 | @if type-of(nth($list, $i)) == list and $recursive {
63 | $result: append($result, filter-by-text(nth($list, $i), $starts, $recursive));
64 | } @else if str-index(nth($list, $i), $starts) == 1 {
65 | $result: append($result, nth($list, $i));
66 | }
67 | }
68 |
69 | @return $result;
70 | }
71 |
72 | @function filter-selectors($selectors, $compat: false) {
73 | @return filter-by-text($selectors, \., \.nt-);
74 | }
75 |
76 | @function check-contrast($color) {
77 | $color-brightness: round((red($color) * 299) + (green($color) * 587) + math.div(blue($color) * 114, 1000));
78 | $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + math.div(blue(#ffffff) * 114, 1000));
79 |
80 | @return abs($color-brightness) < math.div($light-color, 1.7);
81 | }
82 |
83 | @function alternate($color, $lighten: 60%, $darken: null) {
84 | $darken: if($darken != null, $darken, $lighten);
85 |
86 | @return adjust-color($color, $lightness: if(check-contrast($color), $lighten, -$darken));
87 | }
88 |
89 | @function scale-alternate($color, $lighten: 60%, $darken: null) {
90 | $darken: if($darken != null, $darken, $lighten);
91 |
92 | @return scale-color($color, $lightness: if(check-contrast($color), $lighten, -$darken));
93 | }
94 |
95 | @function contrasted($color, $to-color, $lighten: 60%, $darken: null) {
96 | $darken: if($darken != null, $darken, $lighten);
97 |
98 | @return adjust-color($color, $lightness: if(check-contrast($to-color), $lighten, -$darken));
99 | }
100 |
101 | @function scale-contrasted($color, $to-color, $lighten: 60%, $darken: null) {
102 | $darken: if($darken != null, $darken, $lighten);
103 |
104 | @return scale-color($color, $lightness: if(check-contrast($to-color), $lighten, -$darken));
105 | }
106 |
107 | @function slice($list, $start: 1, $end: length($list)) {
108 | $result: ();
109 |
110 | @if ($start > $end) {
111 | @return $result;
112 | }
113 |
114 | @for $i from $start through $end {
115 | $result: append($result, nth($list, $i));
116 | }
117 |
118 | @return $result;
119 | }
120 |
--------------------------------------------------------------------------------