Skip to content

Commit f339370

Browse files
bundyobundyo
committed
Update styling from latest KS
Some fixes, introduce CSSType decorators Prepare for component separation in different repo
1 parent 9b8b6cf commit f339370

18 files changed

+635
-399
lines changed

‎app/_app-styles.scss‎

Lines changed: 136 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,164 @@
1+
//ActionBar {
2+
// background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2));
3+
//}
4+
5+
Image {
6+
margin-bottom: 20;
7+
}
8+
9+
/* Form Controls */
10+
11+
Label,
112
TextField,
13+
PickerField,
214
DatePickerField,
3-
TimePickerField,
4-
.form StackLayout Label,
5-
.form StackLayout TextField {
6-
font-size: 14;
7-
placeholder-color: $grey;
15+
TimePickerField {
16+
font-size: 14;
17+
placeholder-color: $grey;
818
}
919

20+
Button,
21+
Slider,
1022
TextField,
11-
.form Button,
23+
PickerField,
1224
DatePickerField,
1325
TimePickerField,
14-
.form.form TextField {
15-
border-width: 1;
16-
border-color: $accent;
17-
border-radius: 3;
18-
padding: 10;
19-
margin: 5 0 20;
20-
font-size: 16;
26+
.ks-date-time-picker {
27+
border-width: 1;
28+
border-color: $accent;
29+
border-radius: 3;
30+
padding: 10;
31+
margin: 5 0 20;
32+
font-size: 16;
2133
}
2234

23-
.form.form Button {
24-
width: 100%;
25-
border-radius: 3;
35+
/* Date Picker */
2636

27-
&:active {
28-
color: $btn-color-inverse;
29-
background-color: $accent;
30-
border-color: $accent;
31-
}
37+
PickerField,
38+
DatePickerField,
39+
TimePickerField,
40+
.ks-date-time-picker {
41+
background-image: url('~/assets/images/components/date.png');
42+
background-repeat: no-repeat;
43+
background-position: right center;
44+
background-color: transparent;
3245

33-
&.-action {
34-
color: $btn-color-inverse;
35-
background-color: $accent;
36-
border-color: $accent;
46+
@at-root .-ios & {
47+
background-size: 28 16;
48+
}
49+
}
50+
51+
/* Time Picker */
52+
53+
TimePickerField {
54+
background-image: url('~/assets/images/components/time.png');
55+
}
56+
57+
58+
/* Date/Time Picker */
59+
60+
.ks-date-time-picker {
61+
padding: 0;
62+
flex-direction: row;
63+
background-image: url('~/assets/images/components/date-time.png');
64+
65+
@at-root .-ios & {
66+
background-size: 56 16;
67+
}
68+
69+
DatePickerField {
70+
width: 40%;
71+
}
72+
73+
TimePickerField {
74+
flex-grow: 1;
75+
}
76+
77+
DatePickerField,
78+
TimePickerField {
79+
background-image: none;
80+
border-width: 0;
81+
padding: 10;
82+
margin: 0;
83+
}
84+
}
85+
86+
87+
/* Picker */
88+
89+
PickerField {
90+
background-image: url('~/assets/images/components/picker.png');
91+
}
92+
93+
PickerPage ListView {
94+
separator-color: transparent;
95+
96+
> * {
97+
color: $text-color;
98+
height: 54;
99+
margin-top: 0;
100+
padding: 12 15;
101+
102+
border-bottom-width: 1px;
103+
border-bottom-color: $primary-light;
104+
}
105+
}
106+
107+
108+
/* Form Buttons */
109+
110+
Button {
111+
width: auto;
112+
border-radius: 3;
37113

38114
&:active {
39-
background-color: $accent-dark;
40-
border-color: $accent-dark;
115+
color: $btn-color-inverse;
116+
background-color: $accent;
117+
border-color: $accent;
41118
}
42-
}
43119
}
44120

45-
.dataform > StackLayout {
46-
padding: 16;
121+
/* Form helpers */
122+
123+
StackLayout {
124+
padding: 8 16;
47125
}
48126

127+
.ks-take-picture {
128+
> StackLayout {
129+
padding: 0;
130+
horizontal-align: center;
131+
}
49132

50-
/* Detail Pages */
133+
Button {
134+
width: 35%;
135+
margin: 5;
136+
}
137+
}
138+
139+
Label {
140+
padding: 4 0;
141+
}
51142

52-
.detail-page {
53-
padding: 20;
143+
Label.-data-label {
144+
color: $primary-light;
145+
margin-top: 0;
54146
}
55147

148+
/* TabView */
149+
56150
TabView {
57-
tab-text-color: mix($btn-color-inverse, $accent, 70%);
58-
tab-background-color: $accent;
59-
selected-tab-text-color: $btn-color-inverse;
151+
font-size: 16;
152+
tab-text-color: mix($btn-color-inverse, $accent, 70%);
153+
tab-background-color: $accent;
154+
selected-tab-text-color: $btn-color-inverse;
60155

61-
TabViewItem {
62-
text-transform: default;
63-
}
156+
TabViewItem {
157+
text-transform: default;
158+
}
64159
}
65160

66161
RadPieChart {
67-
width: 90%;
68-
height: 250;
162+
width: 90%;
163+
height: 250;
69164
}

0 commit comments

Comments
 (0)