diff options
author | Phil <phil.buschmann@tum.de> | 2018-05-15 22:01:35 +0200 |
---|---|---|
committer | Phil <phil.buschmann@tum.de> | 2018-05-15 22:01:35 +0200 |
commit | 734d4b3be1cf2931752d5c192f93353bbf2373af (patch) | |
tree | e925319a0e1fdb7ceb089daef1e299d6129e4662 | |
parent | f80bf66d3bb01deead290961f5d8d3b579bd4195 (diff) | |
download | gnunet-webui-734d4b3be1cf2931752d5c192f93353bbf2373af.tar.gz gnunet-webui-734d4b3be1cf2931752d5c192f93353bbf2373af.zip |
Design improvements
-rw-r--r-- | src/scss/components/_button.scss | 0 | ||||
-rw-r--r-- | src/scss/main.scss | 28 | ||||
-rw-r--r-- | src/scss/objects/_container.scss | 4 | ||||
-rw-r--r-- | src/scss/objects/_grid.scss | 8 | ||||
-rw-r--r-- | src/scss/objects/_list.scss | 9 | ||||
-rw-r--r-- | src/scss/objects/_type.scss | 10 | ||||
-rw-r--r-- | src/scss/settings/_baseline.scss | 14 | ||||
-rw-r--r-- | src/scss/settings/_colors.scss | 15 | ||||
-rw-r--r-- | src/scss/settings/_core.scss | 7 | ||||
-rw-r--r-- | src/scss/settings/_spacing.scss | 10 | ||||
-rw-r--r-- | src/scss/settings/_type.scss | 24 | ||||
-rw-r--r-- | src/scss/utilities/_bgcolor.scss | 2 | ||||
-rw-r--r-- | src/scss/utilities/_color.scss | 2 | ||||
-rw-r--r-- | src/scss/utilities/_margin.scss | 2 | ||||
-rw-r--r-- | src/scss/utilities/_padding.scss | 2 | ||||
-rw-r--r-- | src/scss/utilities/_size.scss | 8 | ||||
-rw-r--r-- | src/scss/utilities/_text.scss | 4 |
17 files changed, 114 insertions, 35 deletions
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/scss/components/_button.scss | |||
diff --git a/src/scss/main.scss b/src/scss/main.scss index c643b18..5270a83 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss | |||
@@ -1,6 +1,10 @@ | |||
1 | @import 'settings/baseline'; | ||
1 | @import 'settings/core'; | 2 | @import 'settings/core'; |
3 | @import 'settings/colors'; | ||
4 | @import 'settings/type'; | ||
5 | @import 'settings/spacing'; | ||
2 | 6 | ||
3 | //@import 'tools/core'; | 7 | @import 'tools/core'; |
4 | //@import 'tools/breakpoint'; | 8 | //@import 'tools/breakpoint'; |
5 | //@import 'tools/ms'; | 9 | //@import 'tools/ms'; |
6 | //@import 'tools/rtl'; | 10 | //@import 'tools/rtl'; |
@@ -8,28 +12,28 @@ | |||
8 | 12 | ||
9 | @import 'base/initialize'; | 13 | @import 'base/initialize'; |
10 | 14 | ||
11 | //@import 'objects/container'; | 15 | @import 'objects/container'; |
12 | //@import 'objects/grid'; | 16 | @import 'objects/grid'; |
13 | //@import 'objects/list'; | 17 | @import 'objects/list'; |
14 | //@import 'objects/media'; | 18 | //@import 'objects/media'; |
15 | //@import 'objects/type'; | 19 | @import 'objects/type'; |
16 | 20 | ||
17 | //@import 'utilities/align-items'; | 21 | //@import 'utilities/align-items'; |
18 | //@import 'utilities/align'; | 22 | //@import 'utilities/align'; |
19 | //@import 'utilities/bgcolor'; | 23 | @import 'utilities/bgcolor'; |
20 | //@import 'utilities/clearfix'; | 24 | //@import 'utilities/clearfix'; |
21 | //@import 'utilities/color'; | 25 | @import 'utilities/color'; |
22 | //@import 'utilities/display'; | 26 | @import 'utilities/display'; |
23 | //@import 'utilities/flex-direction'; | 27 | //@import 'utilities/flex-direction'; |
24 | //@import 'utilities/float'; | 28 | //@import 'utilities/float'; |
25 | //@import 'utilities/justify-content'; | 29 | //@import 'utilities/justify-content'; |
26 | //@import 'utilities/margin'; | 30 | @import 'utilities/margin'; |
27 | //@import 'utilities/opacity'; | 31 | //@import 'utilities/opacity'; |
28 | //@import 'utilities/padding'; | 32 | @import 'utilities/padding'; |
29 | //@import 'utilities/position'; | 33 | //@import 'utilities/position'; |
30 | //@import 'utilities/pull'; | 34 | //@import 'utilities/pull'; |
31 | //@import 'utilities/push'; | 35 | //@import 'utilities/push'; |
32 | //@import 'utilities/size'; | 36 | @import 'utilities/size'; |
33 | //@import 'utilities/text'; | 37 | @import 'utilities/text'; |
34 | //@import 'utilities/transform'; | 38 | //@import 'utilities/transform'; |
35 | //@import 'utilities/weight'; | 39 | //@import 'utilities/weight'; |
diff --git a/src/scss/objects/_container.scss b/src/scss/objects/_container.scss index 2b28286..24d02c4 100644 --- a/src/scss/objects/_container.scss +++ b/src/scss/objects/_container.scss | |||
@@ -28,7 +28,9 @@ $iota-objs-container-gutter-default: $iota-global-gutter-default; | |||
28 | * Type: Map | 28 | * Type: Map |
29 | */ | 29 | */ |
30 | 30 | ||
31 | $iota-objs-container-gutter-extra: (); | 31 | $iota-objs-container-gutter-extra: ( |
32 | 'gutter-x3': $baseline-x3 | ||
33 | ); | ||
32 | 34 | ||
33 | 35 | ||
34 | /** | 36 | /** |
diff --git a/src/scss/objects/_grid.scss b/src/scss/objects/_grid.scss index 93a3c48..8a18397 100644 --- a/src/scss/objects/_grid.scss +++ b/src/scss/objects/_grid.scss | |||
@@ -25,7 +25,7 @@ $iota-objs-grid-rev: false; | |||
25 | * Default gutter size. Use a number for a single size or | 25 | * Default gutter size. Use a number for a single size or |
26 | * a map for a responsive size. | 26 | * a map for a responsive size. |
27 | * | 27 | * |
28 | * Type: Number / Map | 28 | * Type: Number / Map |
29 | */ | 29 | */ |
30 | 30 | ||
31 | $iota-objs-grid-gutter-default: $iota-global-gutter-default; | 31 | $iota-objs-grid-gutter-default: $iota-global-gutter-default; |
@@ -42,12 +42,14 @@ $iota-objs-grid-gutter-default: $iota-global-gutter-default; | |||
42 | * Type: Map | 42 | * Type: Map |
43 | */ | 43 | */ |
44 | 44 | ||
45 | $iota-objs-grid-gutter-extra: (); | 45 | $iota-objs-grid-gutter-extra: ( |
46 | 'gutter-x4': $baseline-x4 | ||
47 | ); | ||
46 | 48 | ||
47 | 49 | ||
48 | /** | 50 | /** |
49 | * Enable / Disable flexbox on grid. | 51 | * Enable / Disable flexbox on grid. |
50 | * | 52 | * |
51 | * Type: Boolean | 53 | * Type: Boolean |
52 | */ | 54 | */ |
53 | 55 | ||
diff --git a/src/scss/objects/_list.scss b/src/scss/objects/_list.scss index 7e91ef1..e3c3aa1 100644 --- a/src/scss/objects/_list.scss +++ b/src/scss/objects/_list.scss | |||
@@ -16,7 +16,7 @@ $iota-objs-list-aligned: false; | |||
16 | * Type: Boolean | 16 | * Type: Boolean |
17 | */ | 17 | */ |
18 | 18 | ||
19 | $iota-objs-list-block: false; | 19 | $iota-objs-list-block: true; |
20 | 20 | ||
21 | 21 | ||
22 | /** | 22 | /** |
@@ -26,7 +26,7 @@ $iota-objs-list-block: false; | |||
26 | * Type: Boolean | 26 | * Type: Boolean |
27 | */ | 27 | */ |
28 | 28 | ||
29 | $iota-objs-list-inline: false; | 29 | $iota-objs-list-inline: true; |
30 | 30 | ||
31 | 31 | ||
32 | /** | 32 | /** |
@@ -59,7 +59,10 @@ $iota-objs-list-gutter-default: $iota-global-gutter-default; | |||
59 | * Type: Map | 59 | * Type: Map |
60 | */ | 60 | */ |
61 | 61 | ||
62 | $iota-objs-list-gutter-extra: (); | 62 | $iota-objs-list-gutter-extra: ( |
63 | 'gutter-x3': $baseline-x3, | ||
64 | 'gutter-x4': $baseline-x4 | ||
65 | ); | ||
63 | 66 | ||
64 | 67 | ||
65 | /** | 68 | /** |
diff --git a/src/scss/objects/_type.scss b/src/scss/objects/_type.scss index ed74bde..43a2b9f 100644 --- a/src/scss/objects/_type.scss +++ b/src/scss/objects/_type.scss | |||
@@ -1,6 +1,6 @@ | |||
1 | /** | 1 | /** |
2 | * Allows you to change the default type name from .o-type-. | 2 | * Allows you to change the default type name from .o-type-. |
3 | * | 3 | * |
4 | * Type: String | 4 | * Type: String |
5 | */ | 5 | */ |
6 | 6 | ||
@@ -13,7 +13,13 @@ $iota-objs-type-namespace: 'type-'; | |||
13 | * Type: Map | 13 | * Type: Map |
14 | */ | 14 | */ |
15 | 15 | ||
16 | $iota-objs-type-sizes: (); | 16 | $iota-objs-type-sizes: ( |
17 | 16: $type-16, | ||
18 | 20: $type-20, | ||
19 | 28: $type-28, | ||
20 | 35: $type-35, | ||
21 | 80: $type-80 | ||
22 | ); | ||
17 | 23 | ||
18 | 24 | ||
19 | @import 'node_modules/iotacss/objects/type'; | 25 | @import 'node_modules/iotacss/objects/type'; |
diff --git a/src/scss/settings/_baseline.scss b/src/scss/settings/_baseline.scss new file mode 100644 index 0000000..2855a88 --- /dev/null +++ b/src/scss/settings/_baseline.scss | |||
@@ -0,0 +1,14 @@ | |||
1 | $baseline: 7px; | ||
2 | |||
3 | $baseline-x2: $baseline * 2; | ||
4 | $baseline-x3: $baseline * 3; | ||
5 | $baseline-x4: $baseline * 4; | ||
6 | $baseline-x5: $baseline * 5; | ||
7 | $baseline-x6: $baseline * 6; | ||
8 | $baseline-x7: $baseline * 7; | ||
9 | $baseline-x8: $baseline * 8; | ||
10 | $baseline-x9: $baseline * 9; | ||
11 | $baseline-x10: $baseline * 10; | ||
12 | $baseline-x11: $baseline * 11; | ||
13 | $baseline-x12: $baseline * 12; | ||
14 | $baseline-x13: $baseline * 13; | ||
diff --git a/src/scss/settings/_colors.scss b/src/scss/settings/_colors.scss new file mode 100644 index 0000000..2a9704d --- /dev/null +++ b/src/scss/settings/_colors.scss | |||
@@ -0,0 +1,15 @@ | |||
1 | $color-black: #0D2A4A; | ||
2 | $color-purple: #7070D5; | ||
3 | $color-red: #FC4A33; | ||
4 | $color-grey: #A3ADBF; | ||
5 | $color-grey-light: #F5F5F7; | ||
6 | $color-white: #FFFFFF; | ||
7 | |||
8 | $colors: ( | ||
9 | 'black' : $color-black, | ||
10 | 'purple': $color-purple, | ||
11 | 'red': $color-red, | ||
12 | 'grey': $color-grey, | ||
13 | 'grey-light' : $color-grey-light, | ||
14 | 'white' : $color-white | ||
15 | ); | ||
diff --git a/src/scss/settings/_core.scss b/src/scss/settings/_core.scss index 6f08294..3959f7d 100644 --- a/src/scss/settings/_core.scss +++ b/src/scss/settings/_core.scss | |||
@@ -31,7 +31,7 @@ $iota-global-components-namespace : 'c-'; | |||
31 | * Type: Number / List / Map | 31 | * Type: Number / List / Map |
32 | */ | 32 | */ |
33 | 33 | ||
34 | $iota-global-gutter-default: 10px; | 34 | $iota-global-gutter-default: $baseline; |
35 | 35 | ||
36 | 36 | ||
37 | /** | 37 | /** |
@@ -43,7 +43,7 @@ $iota-global-gutter-default: 10px; | |||
43 | * Type: Boolean | 43 | * Type: Boolean |
44 | */ | 44 | */ |
45 | 45 | ||
46 | $iota-global-flex: false; | 46 | $iota-global-flex: true; |
47 | 47 | ||
48 | 48 | ||
49 | /** | 49 | /** |
@@ -66,8 +66,7 @@ $iota-global-rtl: false; | |||
66 | */ | 66 | */ |
67 | 67 | ||
68 | $iota-global-breakpoints: ( | 68 | $iota-global-breakpoints: ( |
69 | sm : "screen and ( min-width: 768px )", | 69 | sm : "screen and ( min-width: 768px )" |
70 | md : "screen and ( min-width: 1000px )" | ||
71 | ); | 70 | ); |
72 | 71 | ||
73 | 72 | ||
diff --git a/src/scss/settings/_spacing.scss b/src/scss/settings/_spacing.scss new file mode 100644 index 0000000..76a173d --- /dev/null +++ b/src/scss/settings/_spacing.scss | |||
@@ -0,0 +1,10 @@ | |||
1 | $spacing-default: $baseline; | ||
2 | |||
3 | $spacing-extra: ( | ||
4 | -x2 : $baseline-x2, | ||
5 | -x3 : $baseline-x3, | ||
6 | -x4 : $baseline-x4, | ||
7 | -x5 : $baseline-x5, | ||
8 | -x6 : $baseline-x6, | ||
9 | -x7 : $baseline-x7, | ||
10 | ); | ||
diff --git a/src/scss/settings/_type.scss b/src/scss/settings/_type.scss new file mode 100644 index 0000000..f8f7d46 --- /dev/null +++ b/src/scss/settings/_type.scss | |||
@@ -0,0 +1,24 @@ | |||
1 | $type-16: ( | ||
2 | null: ( 14px, $baseline-x3 ), | ||
3 | sm: ( 16px, $baseline-x3 ) | ||
4 | ); | ||
5 | |||
6 | $type-20: ( | ||
7 | null: ( 18px, $baseline-x3 ), | ||
8 | sm: ( 20px, $baseline-x4 ) | ||
9 | ); | ||
10 | |||
11 | $type-28: ( | ||
12 | null: ( 20px, $baseline-x4 ), | ||
13 | sm: ( 28px, $baseline-x5 ) | ||
14 | ); | ||
15 | |||
16 | $type-35: ( | ||
17 | null: ( 25px, $baseline-x5 ), | ||
18 | sm: ( 35px, $baseline-x5 ) | ||
19 | ); | ||
20 | |||
21 | $type-80: ( | ||
22 | null: ( 70px, $baseline-x13 ), | ||
23 | sm: ( 80px, $baseline-x13 ) | ||
24 | ); | ||
diff --git a/src/scss/utilities/_bgcolor.scss b/src/scss/utilities/_bgcolor.scss index 015e36f..85ec04c 100644 --- a/src/scss/utilities/_bgcolor.scss +++ b/src/scss/utilities/_bgcolor.scss | |||
@@ -4,7 +4,7 @@ | |||
4 | * Type: Map | 4 | * Type: Map |
5 | */ | 5 | */ |
6 | 6 | ||
7 | $iota-utils-bgcolor-names: (); | 7 | $iota-utils-bgcolor-names: $colors; |
8 | 8 | ||
9 | 9 | ||
10 | /** | 10 | /** |
diff --git a/src/scss/utilities/_color.scss b/src/scss/utilities/_color.scss index 467a63b..c7ba3d2 100644 --- a/src/scss/utilities/_color.scss +++ b/src/scss/utilities/_color.scss | |||
@@ -4,7 +4,7 @@ | |||
4 | * Type: Map | 4 | * Type: Map |
5 | */ | 5 | */ |
6 | 6 | ||
7 | $iota-utils-color-names: (); | 7 | $iota-utils-color-names: $colors; |
8 | 8 | ||
9 | 9 | ||
10 | /** | 10 | /** |
diff --git a/src/scss/utilities/_margin.scss b/src/scss/utilities/_margin.scss index 4e08dc4..d4753d5 100644 --- a/src/scss/utilities/_margin.scss +++ b/src/scss/utilities/_margin.scss | |||
@@ -14,7 +14,7 @@ $iota-utils-margin-default: $iota-global-gutter-default; | |||
14 | * Type: Map | 14 | * Type: Map |
15 | */ | 15 | */ |
16 | 16 | ||
17 | $iota-utils-margin-extra: (); | 17 | $iota-utils-margin-extra: $spacing-extra; |
18 | 18 | ||
19 | 19 | ||
20 | /** | 20 | /** |
diff --git a/src/scss/utilities/_padding.scss b/src/scss/utilities/_padding.scss index dc85f53..23fee35 100644 --- a/src/scss/utilities/_padding.scss +++ b/src/scss/utilities/_padding.scss | |||
@@ -14,7 +14,7 @@ $iota-utils-padding-default: $iota-global-gutter-default; | |||
14 | * Type: Map | 14 | * Type: Map |
15 | */ | 15 | */ |
16 | 16 | ||
17 | $iota-utils-padding-extra: (); | 17 | $iota-utils-padding-extra: $spacing-extra; |
18 | 18 | ||
19 | 19 | ||
20 | /** | 20 | /** |
diff --git a/src/scss/utilities/_size.scss b/src/scss/utilities/_size.scss index 2f546f6..4a69f4a 100644 --- a/src/scss/utilities/_size.scss +++ b/src/scss/utilities/_size.scss | |||
@@ -4,7 +4,7 @@ | |||
4 | * Type: String | 4 | * Type: String |
5 | */ | 5 | */ |
6 | 6 | ||
7 | $iota-utils-size-delimiter: \/; | 7 | $iota-utils-size-delimiter: \/; |
8 | 8 | ||
9 | 9 | ||
10 | /** | 10 | /** |
@@ -22,9 +22,9 @@ $iota-utils-size-columns: $iota-global-columns; | |||
22 | * Type: Boolean | 22 | * Type: Boolean |
23 | */ | 23 | */ |
24 | 24 | ||
25 | $iota-utils-size-res: false; | 25 | $iota-utils-size-res: true; |
26 | |||
26 | 27 | ||
27 | |||
28 | /** | 28 | /** |
29 | * Breakpoints map. Overrides the breakpoints map only | 29 | * Breakpoints map. Overrides the breakpoints map only |
30 | * for margin utility. | 30 | * for margin utility. |
@@ -37,7 +37,7 @@ $iota-utils-size-breakpoints: $iota-global-breakpoints; | |||
37 | 37 | ||
38 | /** | 38 | /** |
39 | * Namespace classes | 39 | * Namespace classes |
40 | * | 40 | * |
41 | * Type: String | 41 | * Type: String |
42 | */ | 42 | */ |
43 | 43 | ||
diff --git a/src/scss/utilities/_text.scss b/src/scss/utilities/_text.scss index a417f1b..f3f1015 100644 --- a/src/scss/utilities/_text.scss +++ b/src/scss/utilities/_text.scss | |||
@@ -4,12 +4,12 @@ | |||
4 | * Type: Boolean | 4 | * Type: Boolean |
5 | */ | 5 | */ |
6 | 6 | ||
7 | $iota-utils-text-res: false; | 7 | $iota-utils-text-res: true; |
8 | 8 | ||
9 | 9 | ||
10 | /** | 10 | /** |
11 | * Overrides breakpoints map only for position utility | 11 | * Overrides breakpoints map only for position utility |
12 | * | 12 | * |
13 | * Type: Map | 13 | * Type: Map |
14 | */ | 14 | */ |
15 | 15 | ||