From f80bf66d3bb01deead290961f5d8d3b579bd4195 Mon Sep 17 00:00:00 2001 From: Phil Date: Tue, 15 May 2018 11:22:35 +0200 Subject: SCSS with iotaCSS added --- angular.json | 26 +++++---- package.json | 9 +-- src/app/app.component.css | 0 src/app/app.component.ts | 2 +- src/scss/base/_initialize.scss | 42 ++++++++++++++ src/scss/main.scss | 35 ++++++++++++ src/scss/objects/_container.scss | 56 ++++++++++++++++++ src/scss/objects/_grid.scss | 81 ++++++++++++++++++++++++++ src/scss/objects/_list.scss | 78 +++++++++++++++++++++++++ src/scss/objects/_media.scss | 89 +++++++++++++++++++++++++++++ src/scss/objects/_type.scss | 19 +++++++ src/scss/settings/_core.scss | 97 ++++++++++++++++++++++++++++++++ src/scss/tools/_breakpoint.scss | 1 + src/scss/tools/_core.scss | 1 + src/scss/tools/_ms.scss | 29 ++++++++++ src/scss/tools/_rtl.scss | 1 + src/scss/tools/_type.scss | 1 + src/scss/utilities/_align-items.scss | 31 ++++++++++ src/scss/utilities/_align.scss | 32 +++++++++++ src/scss/utilities/_bgcolor.scss | 19 +++++++ src/scss/utilities/_clearfix.scss | 10 ++++ src/scss/utilities/_color.scss | 19 +++++++ src/scss/utilities/_display.scss | 33 +++++++++++ src/scss/utilities/_flex-direction.scss | 32 +++++++++++ src/scss/utilities/_float.scss | 32 +++++++++++ src/scss/utilities/_justify-content.scss | 31 ++++++++++ src/scss/utilities/_margin.scss | 54 ++++++++++++++++++ src/scss/utilities/_opacity.scss | 19 +++++++ src/scss/utilities/_padding.scss | 54 ++++++++++++++++++ src/scss/utilities/_position.scss | 33 +++++++++++ src/scss/utilities/_pull.scss | 47 ++++++++++++++++ src/scss/utilities/_push.scss | 47 ++++++++++++++++ src/scss/utilities/_size.scss | 47 ++++++++++++++++ src/scss/utilities/_text.scss | 31 ++++++++++ src/scss/utilities/_transform.scss | 32 +++++++++++ src/scss/utilities/_weight.scss | 19 +++++++ src/styles.css | 1 - src/styles.scss | 1 + yarn.lock | 6 +- 39 files changed, 1179 insertions(+), 18 deletions(-) delete mode 100644 src/app/app.component.css create mode 100644 src/scss/base/_initialize.scss create mode 100644 src/scss/main.scss create mode 100644 src/scss/objects/_container.scss create mode 100644 src/scss/objects/_grid.scss create mode 100644 src/scss/objects/_list.scss create mode 100644 src/scss/objects/_media.scss create mode 100644 src/scss/objects/_type.scss create mode 100644 src/scss/settings/_core.scss create mode 100644 src/scss/tools/_breakpoint.scss create mode 100644 src/scss/tools/_core.scss create mode 100644 src/scss/tools/_ms.scss create mode 100644 src/scss/tools/_rtl.scss create mode 100644 src/scss/tools/_type.scss create mode 100644 src/scss/utilities/_align-items.scss create mode 100644 src/scss/utilities/_align.scss create mode 100644 src/scss/utilities/_bgcolor.scss create mode 100644 src/scss/utilities/_clearfix.scss create mode 100644 src/scss/utilities/_color.scss create mode 100644 src/scss/utilities/_display.scss create mode 100644 src/scss/utilities/_flex-direction.scss create mode 100644 src/scss/utilities/_float.scss create mode 100644 src/scss/utilities/_justify-content.scss create mode 100644 src/scss/utilities/_margin.scss create mode 100644 src/scss/utilities/_opacity.scss create mode 100644 src/scss/utilities/_padding.scss create mode 100644 src/scss/utilities/_position.scss create mode 100644 src/scss/utilities/_pull.scss create mode 100644 src/scss/utilities/_push.scss create mode 100644 src/scss/utilities/_size.scss create mode 100644 src/scss/utilities/_text.scss create mode 100644 src/scss/utilities/_transform.scss create mode 100644 src/scss/utilities/_weight.scss delete mode 100644 src/styles.css create mode 100644 src/styles.scss diff --git a/angular.json b/angular.json index 15117b1..b396b5d 100644 --- a/angular.json +++ b/angular.json @@ -3,17 +3,21 @@ "version": 1, "newProjectRoot": "projects", "projects": { - "hello-world-app": { + "gnunet-webui": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", - "schematics": {}, + "schematics": { + "@schematics/angular:component": { + "styleext": "scss" + } + }, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { - "outputPath": "dist/hello-world-app", + "outputPath": "dist/gnunet-webui", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", @@ -23,7 +27,7 @@ "src/assets" ], "styles": [ - "src/styles.css" + "src/styles.scss" ], "scripts": [] }, @@ -50,18 +54,18 @@ "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { - "browserTarget": "hello-world-app:build" + "browserTarget": "gnunet-webui:build" }, "configurations": { "production": { - "browserTarget": "hello-world-app:build:production" + "browserTarget": "gnunet-webui:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { - "browserTarget": "hello-world-app:build" + "browserTarget": "gnunet-webui:build" } }, "test": { @@ -95,7 +99,7 @@ } } }, - "hello-world-app-e2e": { + "gnunet-webui-e2e": { "root": "e2e/", "projectType": "application", "architect": { @@ -103,7 +107,7 @@ "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "hello-world-app:serve" + "devServerTarget": "gnunet-webui:serve" } }, "lint": { @@ -118,5 +122,5 @@ } } }, - "defaultProject": "hello-world-app" -} \ No newline at end of file + "defaultProject": "gnunet-webui" +} diff --git a/package.json b/package.json index e1441cb..eae394d 100644 --- a/package.json +++ b/package.json @@ -22,14 +22,14 @@ "@angular/platform-browser-dynamic": "^6.0.0", "@angular/router": "^6.0.0", "core-js": "^2.5.4", + "iotacss": "^1.6.0", "rxjs": "^6.0.0", "zone.js": "^0.8.26" }, "devDependencies": { - "@angular/compiler-cli": "^6.0.0", "@angular-devkit/build-angular": "~0.6.1", - "typescript": "~2.7.2", - "@angular/cli": "~6.0.1", + "@angular/cli": "^6.0.1", + "@angular/compiler-cli": "^6.0.0", "@angular/language-service": "^6.0.0", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", @@ -44,6 +44,7 @@ "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.3.0", "ts-node": "~5.0.1", - "tslint": "~5.9.1" + "tslint": "~5.9.1", + "typescript": "~2.7.2" } } diff --git a/src/app/app.component.css b/src/app/app.component.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7b0f672..bff8c82 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./../scss/main.scss'] }) export class AppComponent { title = 'app'; diff --git a/src/scss/base/_initialize.scss b/src/scss/base/_initialize.scss new file mode 100644 index 0000000..6185613 --- /dev/null +++ b/src/scss/base/_initialize.scss @@ -0,0 +1,42 @@ +/** + * Global box sizing option + * + * Type: String + */ + +$iota-base-initialize-box-sizing: 'border-box'; + + +/** + * Makes all heading tags ( h1 - h6 ) to be equal + * to your body size. It forces you to use heading + * tags with focus on your semantics and not on the + * way they look. + * + * Type: Boolean + */ + +$iota-base-initialize-heading-size: true; + + +/** + * Enables normalize and resets for the HTML4 form + * elements + * + * Type: Boolean + */ + +$iota-base-initialize-form-elements: false; + + +/** + * Enables normalize and resets for the HTML5 form + * elements + * + * Type: Boolean + */ + +$iota-base-initialize-html5-form-elements: false; + + +@import 'node_modules/iotacss/base/initialize'; diff --git a/src/scss/main.scss b/src/scss/main.scss new file mode 100644 index 0000000..c643b18 --- /dev/null +++ b/src/scss/main.scss @@ -0,0 +1,35 @@ +@import 'settings/core'; + +//@import 'tools/core'; +//@import 'tools/breakpoint'; +//@import 'tools/ms'; +//@import 'tools/rtl'; +//@import 'tools/type'; + +@import 'base/initialize'; + +//@import 'objects/container'; +//@import 'objects/grid'; +//@import 'objects/list'; +//@import 'objects/media'; +//@import 'objects/type'; + +//@import 'utilities/align-items'; +//@import 'utilities/align'; +//@import 'utilities/bgcolor'; +//@import 'utilities/clearfix'; +//@import 'utilities/color'; +//@import 'utilities/display'; +//@import 'utilities/flex-direction'; +//@import 'utilities/float'; +//@import 'utilities/justify-content'; +//@import 'utilities/margin'; +//@import 'utilities/opacity'; +//@import 'utilities/padding'; +//@import 'utilities/position'; +//@import 'utilities/pull'; +//@import 'utilities/push'; +//@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 new file mode 100644 index 0000000..2b28286 --- /dev/null +++ b/src/scss/objects/_container.scss @@ -0,0 +1,56 @@ +/** + * Allows you to change the default container name + * from .o-container. + * + * Type: String + */ + +$iota-objs-container-namespace: 'container'; + + +/** + * Allows you to specify the default set of padding + * left and right of your container. You can use a + * map in case you would like to specify responsive + * gutter sizes. + * + * Type: Number / List / Map + */ + +$iota-objs-container-gutter-default: $iota-global-gutter-default; + + +/** + * Allows you to specify more sets of padding left and + * right of your container. You can use a nested map in + * case you would like to specify responsive gutter sizes. + * + * Type: Map + */ + +$iota-objs-container-gutter-extra: (); + + +/** + * Allows you to specify the default max-width of your + * container. You can use a map in case you would like + * to specify a responsive size. + * + * Type: String / Map + */ + +$iota-objs-container-size-default: 1000px; + + +/** + * Allows you to specify more sets of max-width for your + * container. You can use a nested map in case you would + * like to specify a responsive size. + * + * Type: Map + */ + +$iota-objs-container-size-extra: (); + + +@import 'node_modules/iotacss/objects/container'; diff --git a/src/scss/objects/_grid.scss b/src/scss/objects/_grid.scss new file mode 100644 index 0000000..93a3c48 --- /dev/null +++ b/src/scss/objects/_grid.scss @@ -0,0 +1,81 @@ +/** + * Enable / Disable aligment modifiers. + * .o-grid--right : Align columns on right horizontally + * .o-grid--center : Align columns on center horizontally + * .o-grid--middle : Align columns on middle vertically + * .o-grid--bottom : Align columns on bottom vertically + * + * Type: Boolean + */ + +$iota-objs-grid-aligned: false; + + +/** + * Enable / Disable reversed modifier + * .o-grid--rev : Reverse columns order + * + * Type: Boolean + */ + +$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 + */ + +$iota-objs-grid-gutter-default: $iota-global-gutter-default; + + +/** + * Extra gutters map. Each gutter size will be available as a + * modifier that will be named according to the gutter name. + * Each gutter size will be available as a modifier that will + * be named according to the gutter name. + * E.g. If $iota-objs-grid-gutter-extra: ('compact': '10px'); + * then .o-grid--compact will be available for use. + * + * Type: Map + */ + +$iota-objs-grid-gutter-extra: (); + + +/** + * Enable / Disable flexbox on grid. + * + * Type: Boolean + */ + +$iota-objs-grid-flex: $iota-global-flex; + + +/** + * Enable / Disable equal height modifier .o-grid--equal-height. + * Works only if $iota-obj-grid-flex is enabled. + * + * Type: Boolean + */ + +$iota-objs-grid-equal-height: false; + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-objs-grid-namespace : 'grid'; +$iota-objs-grid-column-name : 'col'; +$iota-objs-grid-align-right-name : 'right'; +$iota-objs-grid-align-center-name : 'center'; +$iota-objs-grid-align-top-name : 'top'; +$iota-objs-grid-namespace : 'grid'; + + +@import 'node_modules/iotacss/objects/grid'; diff --git a/src/scss/objects/_list.scss b/src/scss/objects/_list.scss new file mode 100644 index 0000000..7e91ef1 --- /dev/null +++ b/src/scss/objects/_list.scss @@ -0,0 +1,78 @@ +/** + * Enable / Disable aligment modifiers. + * .o-list--middle : Align list items on middle vertically + * .o-list--bottom : Align list items on bottom vertically + * + * Type: Boolean + */ + +$iota-objs-list-aligned: false; + + +/** + * Enable / Disable block modifier. .o-list--block : Each list + * item will have display block with a bottom margin. + * + * Type: Boolean + */ + +$iota-objs-list-block: false; + + +/** + * Enable / Disable inline modifier. .o-list--inline Each list + * item will have display inline-block with a right margin. + * + * Type: Boolean + */ + +$iota-objs-list-inline: false; + + +/** + * Enable / Disable span modifier. .o-list--span : Each list + * item will have display table-cell with a border spacing so + * that they never wrap to a new row. + * + * Type: Boolean + */ + +$iota-objs-list-span: false; + + +/** + * Default gutter size. Use a number for a single size or + * a map for a responsive size. + * + * Type: Number / Map + */ + +$iota-objs-list-gutter-default: $iota-global-gutter-default; + + +/** + * Extra gutters map. Each gutter size will be available + * as a modifier that will be named according to the gutter + * name. E.g. If $iota-objs-list-gutter-extra: ('compact': '10px'); + * then .o-list--compact will be available for use. + * + * Type: Map + */ + +$iota-objs-list-gutter-extra: (); + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-objs-list-namespace : 'list'; +$iota-objs-list-item-name : 'item'; +$iota-objs-list-block-name : 'block'; +$iota-objs-list-inline-name : 'inline'; +$iota-objs-list-span-name : 'span'; + + +@import 'node_modules/iotacss/objects/list'; diff --git a/src/scss/objects/_media.scss b/src/scss/objects/_media.scss new file mode 100644 index 0000000..2c52f87 --- /dev/null +++ b/src/scss/objects/_media.scss @@ -0,0 +1,89 @@ +/** + * Enable / Disable aligment modifiers. + * .o-media--middle Align columns at middle vertically + * .o-media--bottom Align columns at bottom vertically. + * + * Type: Boolean + */ + +$iota-objs-media-aligned: false; + + +/** + * Enable / Disable reversed modifier + * .o-media--rev Reverse columns order + * + * Type: Boolean + */ + +$iota-objs-media-rev: false; + + +/** + * Default gutter size. Use a number for a single size or + * a map for a responsive size. + * + * Type: Number / Map + */ + +$iota-objs-media-gutter-default: $iota-global-gutter-default; + + +/** + * Extra gutters map. Each gutter size will be available as + * a modifier that will be named according to the gutter name. + * Use a map for a single size or a nested map for a responsive + * size. E.g. If $iota-objs-media-gutter-extra: ('compact': '10px'); + * then .o-media--compact will be available for use. + * + * Type: Map + */ + +$iota-objs-media-gutter-extra: (); + + +/** + * Enable / Disable flexbox + * + * Type: Boolean + */ + +$iota-objs-media-flex: $iota-global-flex; + + +/** + * Enable / Disable responsive modifier. + * .o-media--res Collapse fluid section bellow fixed one, + * at a specific max-width breakpoint. + * + * Type: Boolean + */ + +$iota-objs-media-res: false; + + +/** + * Specify max-width for breakpoint to collapse at. + * + * Type: Number + */ + +$iota-objs-media-collapse-at: 767px; + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-objs-media-namespace : 'media'; +$iota-objs-media-fixed-name : 'fixed'; +$iota-objs-media-fluid-name : 'fluid'; +$iota-objs-media-reversed-name : 'rev'; +$iota-objs-media-align-middle-name : 'middle'; +$iota-objs-media-align-bottom-name : 'bottom'; +$iota-objs-media-responsive-name : 'res'; + + +@import 'node_modules/iotacss/objects/media'; diff --git a/src/scss/objects/_type.scss b/src/scss/objects/_type.scss new file mode 100644 index 0000000..ed74bde --- /dev/null +++ b/src/scss/objects/_type.scss @@ -0,0 +1,19 @@ +/** + * Allows you to change the default type name from .o-type-. + * + * Type: String + */ + +$iota-objs-type-namespace: 'type-'; + + +/** + * Allows you to specify typography sizes. + * + * Type: Map + */ + +$iota-objs-type-sizes: (); + + +@import 'node_modules/iotacss/objects/type'; diff --git a/src/scss/settings/_core.scss b/src/scss/settings/_core.scss new file mode 100644 index 0000000..6f08294 --- /dev/null +++ b/src/scss/settings/_core.scss @@ -0,0 +1,97 @@ +/** + * Grid columns. This setting is shared between + * iotaCSS grid objects and size, pull & push + * utilities. You can change it also locally to + * each module. + * + * Type: Unitless Number / List + */ + +$iota-global-columns: 2, 3, 6, 12; + + +/** + * Global namespace for Objects, Components and + * Utilities + * + * Type: String + */ + +$iota-global-objects-namespace : 'o-'; +$iota-global-utilities-namespace : 'u-'; +$iota-global-components-namespace : 'c-'; + + +/** + * Default gutters. This setting is shared between + * multiple objects and utilities as the default value + * for gutters. You can change it also locally to each + * module. + * + * Type: Number / List / Map + */ + +$iota-global-gutter-default: 10px; + + +/** + * Enables flexbox across the app. If you do not want + * all modules to use flexbox you can keep this value + * false and set it to true separately to each one of + * them locally. + * + * Type: Boolean + */ + +$iota-global-flex: false; + + +/** + * Enables rtl across the app. If you enable this setting + * the final CSS will be converted to RTL. + * + * Type: Boolean + */ + +$iota-global-rtl: false; + + +/** + * Default global breakpoints map. These are the + * default breakpoints map that will be shared across + * all iotaCSS modules. You can change it also locally + * to each module. + * + * Type: Map + */ + +$iota-global-breakpoints: ( + sm : "screen and ( min-width: 768px )", + md : "screen and ( min-width: 1000px )" +); + + +/** + * Global breakpoint suffix naming setting. All breakpoint + * specific styles have a '@breakpointName' suffix by default. + * The \ character is used to escape the @ character. + * + * Type: String + */ + +$iota-global-breakpoint-separator: \@; + + +/** + * Global delimiter naming setting for Size, Push and Pull + * utilities. By default it is '/' (.u-1/2) and you can change + * it for example to 'of' so that the generated HTML class will be + * 'u-1of2'. + * + * Type: String + */ + +$iota-global-delimiter: \/; + + +@import 'node_modules/iotacss/settings/core'; diff --git a/src/scss/tools/_breakpoint.scss b/src/scss/tools/_breakpoint.scss new file mode 100644 index 0000000..bd51744 --- /dev/null +++ b/src/scss/tools/_breakpoint.scss @@ -0,0 +1 @@ +@import 'node_modules/iotacss/tools/breakpoint'; diff --git a/src/scss/tools/_core.scss b/src/scss/tools/_core.scss new file mode 100644 index 0000000..0eaff75 --- /dev/null +++ b/src/scss/tools/_core.scss @@ -0,0 +1 @@ +@import 'node_modules/iotacss/tools/core'; diff --git a/src/scss/tools/_ms.scss b/src/scss/tools/_ms.scss new file mode 100644 index 0000000..fcd1c84 --- /dev/null +++ b/src/scss/tools/_ms.scss @@ -0,0 +1,29 @@ +/** + * The base value the scale starts at. + * + * Number + */ + +$iota-tools-ms-base: 15px; + + +/** + * The ratio the scale is built on + * + * Unitless Number + */ + +$iota-tools-ms-ratio: 1.2; + + +/** + * Length of scale ( right part of the decimal + * point ) ms will be rounded to. + * + * Unitless Number + */ + +$iota-tools-ms-scale: 3; + + +@import 'node_modules/iotacss/tools/ms'; diff --git a/src/scss/tools/_rtl.scss b/src/scss/tools/_rtl.scss new file mode 100644 index 0000000..d5994ba --- /dev/null +++ b/src/scss/tools/_rtl.scss @@ -0,0 +1 @@ +@import 'node_modules/iotacss/tools/rtl'; diff --git a/src/scss/tools/_type.scss b/src/scss/tools/_type.scss new file mode 100644 index 0000000..3b12f4c --- /dev/null +++ b/src/scss/tools/_type.scss @@ -0,0 +1 @@ +@import 'node_modules/iotacss/tools/type'; diff --git a/src/scss/utilities/_align-items.scss b/src/scss/utilities/_align-items.scss new file mode 100644 index 0000000..f74be1c --- /dev/null +++ b/src/scss/utilities/_align-items.scss @@ -0,0 +1,31 @@ +/** + * Enable / Disable breakpoint specific classes + * + * Type: Boolean + */ + +$iota-utils-align-items-res: false; + + +/** + * Override breakpoints map only for align utility + * + * Type: Type: Map + */ + +$iota-utils-align-items-breakpoints: $iota-global-breakpoints; + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-align-items-namespace : 'ai-'; +$iota-utils-align-items-start-name : 'start'; +$iota-utils-align-items-end-name : 'end'; +$iota-utils-align-items-center-name : 'center'; + + +@import 'node_modules/iotacss/utilities/align-items'; diff --git a/src/scss/utilities/_align.scss b/src/scss/utilities/_align.scss new file mode 100644 index 0000000..631e839 --- /dev/null +++ b/src/scss/utilities/_align.scss @@ -0,0 +1,32 @@ +/** + * Enable / Disable breakpoint specific classes + * + * Type: Boolean + */ + +$iota-utils-align-res: false; + + +/** + * Override breakpoints map only for align utility + * + * Type: Type: Map + */ + +$iota-utils-align-breakpoints: $iota-global-breakpoints; + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-align-namespace : 'align-'; +$iota-utils-align-top-name : 'top'; +$iota-utils-align-bottom-name : 'bottom'; +$iota-utils-align-middle-name : 'middle'; +$iota-utils-align-baseline-name : 'baseline'; + + +@import 'node_modules/iotacss/utilities/align'; diff --git a/src/scss/utilities/_bgcolor.scss b/src/scss/utilities/_bgcolor.scss new file mode 100644 index 0000000..015e36f --- /dev/null +++ b/src/scss/utilities/_bgcolor.scss @@ -0,0 +1,19 @@ +/** + * Background color names + * + * Type: Map + */ + +$iota-utils-bgcolor-names: (); + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-bgcolor-namespace: 'bgcolor-'; + + +@import 'node_modules/iotacss/utilities/bgcolor'; diff --git a/src/scss/utilities/_clearfix.scss b/src/scss/utilities/_clearfix.scss new file mode 100644 index 0000000..5aaa021 --- /dev/null +++ b/src/scss/utilities/_clearfix.scss @@ -0,0 +1,10 @@ +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-clearfix-namespace: 'cf'; + + +@import 'node_modules/iotacss/utilities/clearfix'; diff --git a/src/scss/utilities/_color.scss b/src/scss/utilities/_color.scss new file mode 100644 index 0000000..467a63b --- /dev/null +++ b/src/scss/utilities/_color.scss @@ -0,0 +1,19 @@ +/** + * Color names + * + * Type: Map + */ + +$iota-utils-color-names: (); + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-color-namespace: 'color-'; + + +@import 'node_modules/iotacss/utilities/color'; diff --git a/src/scss/utilities/_display.scss b/src/scss/utilities/_display.scss new file mode 100644 index 0000000..ef16830 --- /dev/null +++ b/src/scss/utilities/_display.scss @@ -0,0 +1,33 @@ +/** + * Enables / Disables breakpoint specific classes + * + * Type: Boolean + */ + +$iota-utils-display-res: false; + + +/** + * Breakpoints map. Overrides the breakpoints map only + * for display utility. + * + * Type: Map + */ + +$iota-utils-display-breakpoints: $iota-global-breakpoints; + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-display-namespace : ''; +$iota-utils-display-block-name : 'block'; +$iota-utils-display-hidden-name : 'hidden'; +$iota-utils-display-inline-name : 'inline'; +$iota-utils-display-inline-block-name : 'inline-block'; + + +@import 'node_modules/iotacss/utilities/display'; diff --git a/src/scss/utilities/_flex-direction.scss b/src/scss/utilities/_flex-direction.scss new file mode 100644 index 0000000..620e15c --- /dev/null +++ b/src/scss/utilities/_flex-direction.scss @@ -0,0 +1,32 @@ +/** + * Enable / Disable breakpoint specific classes + * + * Type: Boolean + */ + +$iota-utils-flex-direction-res: false; + + +/** + * Override breakpoints map only for align utility + * + * Type: Type: Map + */ + +$iota-utils-flex-direction-breakpoints: $iota-global-breakpoints; + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-flex-direction-namespace : 'fd-'; +$iota-utils-flex-direction-row-name : 'row'; +$iota-utils-flex-direction-row-reverse-name : 'rowrev'; +$iota-utils-flex-direction-column-name : 'col'; +$iota-utils-flex-direction-column-reverse-name : 'colrev'; + + +@import 'node_modules/iotacss/utilities/flex-direction'; diff --git a/src/scss/utilities/_float.scss b/src/scss/utilities/_float.scss new file mode 100644 index 0000000..ca02761 --- /dev/null +++ b/src/scss/utilities/_float.scss @@ -0,0 +1,32 @@ +/** + * Enables / Disables breakpoint specific classes + * + * Type: Boolean + */ + +$iota-utils-float-res: false; + + +/** + * Breakpoints map. Overrides the breakpoints map only + * for float utility. + * + * Type: Map + */ + +$iota-utils-float-breakpoints: $iota-global-breakpoints; + + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-float-namespace : 'float-'; +$iota-utils-float-left-name : 'left'; +$iota-utils-float-right-name : 'right'; + + +@import 'node_modules/iotacss/utilities/float'; diff --git a/src/scss/utilities/_justify-content.scss b/src/scss/utilities/_justify-content.scss new file mode 100644 index 0000000..5dee6e8 --- /dev/null +++ b/src/scss/utilities/_justify-content.scss @@ -0,0 +1,31 @@ +/** + * Enable / Disable breakpoint specific classes + * + * Type: Boolean + */ + +$iota-utils-justify-content-res: false; + + +/** + * Override breakpoints map only for align utility + * + * Type: Type: Map + */ + +$iota-utils-justify-content-breakpoints: $iota-global-breakpoints; + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-justify-content-namespace : 'jc-'; +$iota-utils-justify-content-start-name : 'start'; +$iota-utils-justify-content-end-name : 'end'; +$iota-utils-justify-content-center-name : 'center'; + + +@import 'node_modules/iotacss/utilities/justify-content'; diff --git a/src/scss/utilities/_margin.scss b/src/scss/utilities/_margin.scss new file mode 100644 index 0000000..4e08dc4 --- /dev/null +++ b/src/scss/utilities/_margin.scss @@ -0,0 +1,54 @@ +/** + * Margin default gutter. Use a number for a simple size + * and a map for responsive. + * + * Type: Number / Map + */ + +$iota-utils-margin-default: $iota-global-gutter-default; + + +/** + * Margin extra gutters. + * + * Type: Map + */ + +$iota-utils-margin-extra: (); + + +/** + * Enables / Disables responsive classes + * + * Type: Boolean + */ + +$iota-utils-margin-res: false; + + +/** + * Breakpoints map. Overrides the breakpoints map only + * for margin utility. + * + * Type: Map + */ + +$iota-utils-margin-breakpoints: $iota-global-breakpoints; + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-margin-namespace : 'm'; +$iota-utils-margin-top-name : 't'; +$iota-utils-margin-right-name : 'r'; +$iota-utils-margin-bottom-name : 'b'; +$iota-utils-margin-left-name : 'l'; +$iota-utils-margin-vertical-name : 'v'; +$iota-utils-margin-horizontal-name : 'h'; + + +@import 'node_modules/iotacss/utilities/margin'; diff --git a/src/scss/utilities/_opacity.scss b/src/scss/utilities/_opacity.scss new file mode 100644 index 0000000..a01d95d --- /dev/null +++ b/src/scss/utilities/_opacity.scss @@ -0,0 +1,19 @@ +/** + * Opacity sizes + * + * Type: Map + */ + +$iota-utils-opacity-sizes: (); + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-opacity-namespace: 'opacity-'; + + +@import 'node_modules/iotacss/utilities/opacity'; diff --git a/src/scss/utilities/_padding.scss b/src/scss/utilities/_padding.scss new file mode 100644 index 0000000..dc85f53 --- /dev/null +++ b/src/scss/utilities/_padding.scss @@ -0,0 +1,54 @@ +/** + * Padding default gutter. Use a number for a simple size + * and a map for responsive. + * + * Type: Number / Map + */ + +$iota-utils-padding-default: $iota-global-gutter-default; + + +/** + * Padding extra gutters. + * + * Type: Map + */ + +$iota-utils-padding-extra: (); + + +/** + * Enables / Disables responsive classes + * + * Type: Boolean + */ + +$iota-utils-padding-res: false; + + +/** + * Breakpoints map. Overrides the breakpoints map only + * for padding utility. + * + * Type: Map + */ + +$iota-utils-padding-breakpoints: $iota-global-breakpoints; + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-padding-namespace : 'p'; +$iota-utils-padding-top-name : 't'; +$iota-utils-padding-right-name : 'r'; +$iota-utils-padding-bottom-name : 'b'; +$iota-utils-padding-left-name : 'l'; +$iota-utils-padding-vertical-name : 'v'; +$iota-utils-padding-horizontal-name : 'h'; + + +@import 'node_modules/iotacss/utilities/padding'; diff --git a/src/scss/utilities/_position.scss b/src/scss/utilities/_position.scss new file mode 100644 index 0000000..aff877d --- /dev/null +++ b/src/scss/utilities/_position.scss @@ -0,0 +1,33 @@ +/** + * Enable / Disable breakpoint specific classes + * + * Type: Boolean + */ + +$iota-utils-position-res: false; + + +/** + * Overrides breakpoints map only for position utility + * + * Type: Map + */ + +$iota-utils-position-breakpoints: $iota-global-breakpoints; + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-position-namespace : ''; +$iota-utils-position-absolute-name : 'absolute'; +$iota-utils-position-fixed-name : 'fixed'; +$iota-utils-position-relative-name : 'relative'; +$iota-utils-position-static-name : 'static'; +$iota-utils-position-sticky-name : 'sticky'; + + +@import 'node_modules/iotacss/utilities/position'; diff --git a/src/scss/utilities/_pull.scss b/src/scss/utilities/_pull.scss new file mode 100644 index 0000000..309db79 --- /dev/null +++ b/src/scss/utilities/_pull.scss @@ -0,0 +1,47 @@ +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-pull-namespace: 'pull-'; + + +/** + * Size delimiter. Defaults to \/. Ex: .u-pull-1/3 + * + * Type: String + */ + +$iota-utils-pull-delimiter: $iota-global-delimiter; + + +/** + * Columns to populate pull utility for + * + * Type: Unitless Number / List + */ + +$iota-utils-pull-columns: $iota-global-columns; + + +/** + * Enables / Disables breakpoint specific classes + * + * Type: Boolean + */ + +$iota-utils-pull-res: false; + + +/** + * Breakpoints map. Allows you to create breakpoints only + * for the pull responsive utility. + * + * Type: Map + */ + +$iota-utils-pull-breakpoints: $iota-global-breakpoints; + + +@import 'node_modules/iotacss/utilities/pull'; diff --git a/src/scss/utilities/_push.scss b/src/scss/utilities/_push.scss new file mode 100644 index 0000000..c7f41a4 --- /dev/null +++ b/src/scss/utilities/_push.scss @@ -0,0 +1,47 @@ +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-push-namespace: 'push-'; + + +/** + * Size delimiter. Defaults to \/. Ex: .u-push-1/3 + * + * Type: String + */ + +$iota-utils-push-delimiter: $iota-global-delimiter; + + +/** + * Columns to populate push utility for + * + * Type: Unitless Number / List + */ + +$iota-utils-push-columns: $iota-global-columns; + + +/** + * Enables / Disables breakpoint specific classes + * + * Type: Boolean + */ + +$iota-utils-push-res: false; + + +/** + * Breakpoints map. Allows you to create breakpoints only + * for the push responsive utility. + * + * Type: Map + */ + +$iota-utils-push-breakpoints: $iota-global-breakpoints; + + +@import 'node_modules/iotacss/utilities/push'; diff --git a/src/scss/utilities/_size.scss b/src/scss/utilities/_size.scss new file mode 100644 index 0000000..2f546f6 --- /dev/null +++ b/src/scss/utilities/_size.scss @@ -0,0 +1,47 @@ +/** + * Size utility delimiter. Default to \/. Ex: .u-1/3. + * + * Type: String + */ + +$iota-utils-size-delimiter: \/; + + +/** + * Size utility columns list + * + * Type: List + */ + +$iota-utils-size-columns: $iota-global-columns; + + +/** + * Enables / Disables breakpoint specific classes + * + * Type: Boolean + */ + +$iota-utils-size-res: false; + + +/** + * Breakpoints map. Overrides the breakpoints map only + * for margin utility. + * + * Type: Map + */ + +$iota-utils-size-breakpoints: $iota-global-breakpoints; + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-size-namespace: ''; + + +@import 'node_modules/iotacss/utilities/size'; diff --git a/src/scss/utilities/_text.scss b/src/scss/utilities/_text.scss new file mode 100644 index 0000000..a417f1b --- /dev/null +++ b/src/scss/utilities/_text.scss @@ -0,0 +1,31 @@ +/** + * Enables / Disables breakpoint specific classes + * + * Type: Boolean + */ + +$iota-utils-text-res: false; + + +/** + * Overrides breakpoints map only for position utility + * + * Type: Map + */ + +$iota-utils-text-breakpoints: $iota-global-breakpoints; + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-text-namespace : 'text-'; +$iota-utils-text-left-name : 'left'; +$iota-utils-text-right-name : 'right'; +$iota-utils-text-center-name : 'center'; + + +@import 'node_modules/iotacss/utilities/text'; diff --git a/src/scss/utilities/_transform.scss b/src/scss/utilities/_transform.scss new file mode 100644 index 0000000..94ad183 --- /dev/null +++ b/src/scss/utilities/_transform.scss @@ -0,0 +1,32 @@ +/** + * Enables / Disables breakpoint specific classes + * + * Type: Boolean + */ + +$iota-utils-transform-res: false; + + +/** + * Breakpoints map. Overrides the breakpoints map only + * for margin utility. + * + * Type: Map + */ + +$iota-utils-transform-breakpoints: $iota-global-breakpoints; + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-transform-namespace : ''; +$iota-utils-transform-capitalize-name : 'capitalize'; +$iota-utils-transform-uppercase-name : 'uppercase'; +$iota-utils-transform-lowercase-name : 'lowercase'; + + +@import 'node_modules/iotacss/utilities/transform'; diff --git a/src/scss/utilities/_weight.scss b/src/scss/utilities/_weight.scss new file mode 100644 index 0000000..8785357 --- /dev/null +++ b/src/scss/utilities/_weight.scss @@ -0,0 +1,19 @@ +/** + * Weight sizes + * + * Type: Map + */ + +$iota-utils-weight-sizes: (); + + +/** + * Namespace classes + * + * Type: String + */ + +$iota-utils-weight-namespace: 'weight-'; + + +@import 'node_modules/iotacss/utilities/weight'; diff --git a/src/styles.css b/src/styles.css deleted file mode 100644 index 90d4ee0..0000000 --- a/src/styles.css +++ /dev/null @@ -1 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000..90d4ee0 --- /dev/null +++ b/src/styles.scss @@ -0,0 +1 @@ +/* You can add global styles to this file, and also import other style files */ diff --git a/yarn.lock b/yarn.lock index c0bf2f3..64a55aa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -96,7 +96,7 @@ dependencies: tslib "^1.9.0" -"@angular/cli@~6.0.1": +"@angular/cli@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-6.0.1.tgz#52c21451716be51716a413c5367b3f3d003f8447" dependencies: @@ -2852,6 +2852,10 @@ invert-kv@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6" +iotacss@^1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/iotacss/-/iotacss-1.6.0.tgz#3777e072287df87aa291ec9bc0389afff1840a5d" + ip@^1.1.0, ip@^1.1.5: version "1.1.5" resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a" -- cgit v1.2.3