summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPhil <phil.buschmann@tum.de>2018-05-15 22:01:35 +0200
committerPhil <phil.buschmann@tum.de>2018-05-15 22:01:35 +0200
commit734d4b3be1cf2931752d5c192f93353bbf2373af (patch)
treee925319a0e1fdb7ceb089daef1e299d6129e4662
parentf80bf66d3bb01deead290961f5d8d3b579bd4195 (diff)
Design improvements
-rw-r--r--src/scss/components/_button.scss0
-rw-r--r--src/scss/main.scss28
-rw-r--r--src/scss/objects/_container.scss4
-rw-r--r--src/scss/objects/_grid.scss8
-rw-r--r--src/scss/objects/_list.scss9
-rw-r--r--src/scss/objects/_type.scss10
-rw-r--r--src/scss/settings/_baseline.scss14
-rw-r--r--src/scss/settings/_colors.scss15
-rw-r--r--src/scss/settings/_core.scss7
-rw-r--r--src/scss/settings/_spacing.scss10
-rw-r--r--src/scss/settings/_type.scss24
-rw-r--r--src/scss/utilities/_bgcolor.scss2
-rw-r--r--src/scss/utilities/_color.scss2
-rw-r--r--src/scss/utilities/_margin.scss2
-rw-r--r--src/scss/utilities/_padding.scss2
-rw-r--r--src/scss/utilities/_size.scss8
-rw-r--r--src/scss/utilities/_text.scss4
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 @@
+@import 'settings/baseline';
@import 'settings/core';
+@import 'settings/colors';
+@import 'settings/type';
+@import 'settings/spacing';
-//@import 'tools/core';
+@import 'tools/core';
//@import 'tools/breakpoint';
//@import 'tools/ms';
//@import 'tools/rtl';
@@ -8,28 +12,28 @@
@import 'base/initialize';
-//@import 'objects/container';
-//@import 'objects/grid';
-//@import 'objects/list';
+@import 'objects/container';
+@import 'objects/grid';
+@import 'objects/list';
//@import 'objects/media';
-//@import 'objects/type';
+@import 'objects/type';
//@import 'utilities/align-items';
//@import 'utilities/align';
-//@import 'utilities/bgcolor';
+@import 'utilities/bgcolor';
//@import 'utilities/clearfix';
-//@import 'utilities/color';
-//@import 'utilities/display';
+@import 'utilities/color';
+@import 'utilities/display';
//@import 'utilities/flex-direction';
//@import 'utilities/float';
//@import 'utilities/justify-content';
-//@import 'utilities/margin';
+@import 'utilities/margin';
//@import 'utilities/opacity';
-//@import 'utilities/padding';
+@import 'utilities/padding';
//@import 'utilities/position';
//@import 'utilities/pull';
//@import 'utilities/push';
-//@import 'utilities/size';
-//@import 'utilities/text';
+@import 'utilities/size';
+@import 'utilities/text';
//@import 'utilities/transform';
//@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;
* Type: Map
*/
-$iota-objs-container-gutter-extra: ();
+$iota-objs-container-gutter-extra: (
+ 'gutter-x3': $baseline-x3
+);
/**
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;
* Default gutter size. Use a number for a single size or
* a map for a responsive size.
*
- * Type: Number / Map
+ * Type: Number / Map
*/
$iota-objs-grid-gutter-default: $iota-global-gutter-default;
@@ -42,12 +42,14 @@ $iota-objs-grid-gutter-default: $iota-global-gutter-default;
* Type: Map
*/
-$iota-objs-grid-gutter-extra: ();
+$iota-objs-grid-gutter-extra: (
+ 'gutter-x4': $baseline-x4
+);
/**
* Enable / Disable flexbox on grid.
- *
+ *
* Type: Boolean
*/
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;
* Type: Boolean
*/
-$iota-objs-list-block: false;
+$iota-objs-list-block: true;
/**
@@ -26,7 +26,7 @@ $iota-objs-list-block: false;
* Type: Boolean
*/
-$iota-objs-list-inline: false;
+$iota-objs-list-inline: true;
/**
@@ -59,7 +59,10 @@ $iota-objs-list-gutter-default: $iota-global-gutter-default;
* Type: Map
*/
-$iota-objs-list-gutter-extra: ();
+$iota-objs-list-gutter-extra: (
+ 'gutter-x3': $baseline-x3,
+ 'gutter-x4': $baseline-x4
+);
/**
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 @@
/**
* Allows you to change the default type name from .o-type-.
- *
+ *
* Type: String
*/
@@ -13,7 +13,13 @@ $iota-objs-type-namespace: 'type-';
* Type: Map
*/
-$iota-objs-type-sizes: ();
+$iota-objs-type-sizes: (
+ 16: $type-16,
+ 20: $type-20,
+ 28: $type-28,
+ 35: $type-35,
+ 80: $type-80
+);
@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 @@
+$baseline: 7px;
+
+$baseline-x2: $baseline * 2;
+$baseline-x3: $baseline * 3;
+$baseline-x4: $baseline * 4;
+$baseline-x5: $baseline * 5;
+$baseline-x6: $baseline * 6;
+$baseline-x7: $baseline * 7;
+$baseline-x8: $baseline * 8;
+$baseline-x9: $baseline * 9;
+$baseline-x10: $baseline * 10;
+$baseline-x11: $baseline * 11;
+$baseline-x12: $baseline * 12;
+$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 @@
+$color-black: #0D2A4A;
+$color-purple: #7070D5;
+$color-red: #FC4A33;
+$color-grey: #A3ADBF;
+$color-grey-light: #F5F5F7;
+$color-white: #FFFFFF;
+
+$colors: (
+ 'black' : $color-black,
+ 'purple': $color-purple,
+ 'red': $color-red,
+ 'grey': $color-grey,
+ 'grey-light' : $color-grey-light,
+ 'white' : $color-white
+);
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-';
* Type: Number / List / Map
*/
-$iota-global-gutter-default: 10px;
+$iota-global-gutter-default: $baseline;
/**
@@ -43,7 +43,7 @@ $iota-global-gutter-default: 10px;
* Type: Boolean
*/
-$iota-global-flex: false;
+$iota-global-flex: true;
/**
@@ -66,8 +66,7 @@ $iota-global-rtl: false;
*/
$iota-global-breakpoints: (
- sm : "screen and ( min-width: 768px )",
- md : "screen and ( min-width: 1000px )"
+ sm : "screen and ( min-width: 768px )"
);
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 @@
+$spacing-default: $baseline;
+
+$spacing-extra: (
+ -x2 : $baseline-x2,
+ -x3 : $baseline-x3,
+ -x4 : $baseline-x4,
+ -x5 : $baseline-x5,
+ -x6 : $baseline-x6,
+ -x7 : $baseline-x7,
+);
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 @@
+$type-16: (
+ null: ( 14px, $baseline-x3 ),
+ sm: ( 16px, $baseline-x3 )
+);
+
+$type-20: (
+ null: ( 18px, $baseline-x3 ),
+ sm: ( 20px, $baseline-x4 )
+);
+
+$type-28: (
+ null: ( 20px, $baseline-x4 ),
+ sm: ( 28px, $baseline-x5 )
+);
+
+$type-35: (
+ null: ( 25px, $baseline-x5 ),
+ sm: ( 35px, $baseline-x5 )
+);
+
+$type-80: (
+ null: ( 70px, $baseline-x13 ),
+ sm: ( 80px, $baseline-x13 )
+);
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 @@
* Type: Map
*/
-$iota-utils-bgcolor-names: ();
+$iota-utils-bgcolor-names: $colors;
/**
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 @@
* Type: Map
*/
-$iota-utils-color-names: ();
+$iota-utils-color-names: $colors;
/**
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;
* Type: Map
*/
-$iota-utils-margin-extra: ();
+$iota-utils-margin-extra: $spacing-extra;
/**
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;
* Type: Map
*/
-$iota-utils-padding-extra: ();
+$iota-utils-padding-extra: $spacing-extra;
/**
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 @@
* Type: String
*/
-$iota-utils-size-delimiter: \/;
+$iota-utils-size-delimiter: \/;
/**
@@ -22,9 +22,9 @@ $iota-utils-size-columns: $iota-global-columns;
* Type: Boolean
*/
-$iota-utils-size-res: false;
+$iota-utils-size-res: true;
+
-
/**
* Breakpoints map. Overrides the breakpoints map only
* for margin utility.
@@ -37,7 +37,7 @@ $iota-utils-size-breakpoints: $iota-global-breakpoints;
/**
* Namespace classes
- *
+ *
* Type: String
*/
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 @@
* Type: Boolean
*/
-$iota-utils-text-res: false;
+$iota-utils-text-res: true;
/**
* Overrides breakpoints map only for position utility
- *
+ *
* Type: Map
*/