diff --git a/docs/demo/materials/02-atoms/icons.html b/docs/demo/materials/02-atoms/icons.html index 3a17d3f8..7b086d62 100644 --- a/docs/demo/materials/02-atoms/icons.html +++ b/docs/demo/materials/02-atoms/icons.html @@ -24,9 +24,8 @@ play search trash - msg-error - msg-info - msg-neutral - msg-success - msg-warning + error + info-large + success + warning diff --git a/docs/demo/materials/03-molecules/09-messages.html b/docs/demo/materials/03-molecules/09-messages.html index fb266b1a..c94a5581 100644 --- a/docs/demo/materials/03-molecules/09-messages.html +++ b/docs/demo/materials/03-molecules/09-messages.html @@ -6,22 +6,19 @@
-
- +
+
-

Info message

-

- Give some more information about what happened. Also, here's a link. Boo! + Give some more information about what happened. Also, here's a link. Boo!

-
- +
@@ -29,22 +26,19 @@

Info message

-
- +
+
-

Success message

-

- Give some more information about what happened. Also, here's a link. Boo! + Give some more information about what happened. Also, here's a link. Boo!

-
- +
@@ -52,22 +46,19 @@

Success message

-
- +
+
-

Warning message

-

- Give some more information about what happened. Also, here's a link. Boo! + Give some more information about what happened. Also, here's a link. Boo!

-
- +
@@ -76,22 +67,19 @@

Warning message

-
- +
+
-

Error message

-

- Give some more information about what happened. Also, here's a link. Boo! + Give some more information about what happened. Also, here's a link. Boo!

-
- +
diff --git a/npm-debug.log b/npm-debug.log new file mode 100644 index 00000000..a35e28f1 --- /dev/null +++ b/npm-debug.log @@ -0,0 +1,45 @@ +0 info it worked if it ends with ok +1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ] +2 info using npm@3.5.2 +3 info using node@v4.2.3 +4 verbose run-script [ 'prestart', 'start', 'poststart' ] +5 info lifecycle dress-code@1.1.1-alpha~prestart: dress-code@1.1.1-alpha +6 silly lifecycle dress-code@1.1.1-alpha~prestart: no script for prestart, continuing +7 info lifecycle dress-code@1.1.1-alpha~start: dress-code@1.1.1-alpha +8 verbose lifecycle dress-code@1.1.1-alpha~start: unsafe-perm in lifecycle true +9 verbose lifecycle dress-code@1.1.1-alpha~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/dgarcia/Projects/dress-code/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin +10 verbose lifecycle dress-code@1.1.1-alpha~start: CWD: /Users/dgarcia/Projects/dress-code +11 silly lifecycle dress-code@1.1.1-alpha~start: Args: [ '-c', 'gulp' ] +12 silly lifecycle dress-code@1.1.1-alpha~start: Returned: code: 1 signal: null +13 info lifecycle dress-code@1.1.1-alpha~start: Failed to exec start script +14 verbose stack Error: dress-code@1.1.1-alpha start: `gulp` +14 verbose stack Exit status 1 +14 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:232:16) +14 verbose stack at emitTwo (events.js:87:13) +14 verbose stack at EventEmitter.emit (events.js:172:7) +14 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14) +14 verbose stack at emitTwo (events.js:87:13) +14 verbose stack at ChildProcess.emit (events.js:172:7) +14 verbose stack at maybeClose (internal/child_process.js:818:16) +14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5) +15 verbose pkgid dress-code@1.1.1-alpha +16 verbose cwd /Users/dgarcia/Projects/dress-code +17 error Darwin 14.5.0 +18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" +19 error node v4.2.3 +20 error npm v3.5.2 +21 error code ELIFECYCLE +22 error dress-code@1.1.1-alpha start: `gulp` +22 error Exit status 1 +23 error Failed at the dress-code@1.1.1-alpha start script 'gulp'. +23 error Make sure you have the latest version of node.js and npm installed. +23 error If you do, this is most likely a problem with the dress-code package, +23 error not with npm itself. +23 error Tell the author that this fails on your system: +23 error gulp +23 error You can get information on how to open an issue for this project with: +23 error npm bugs dress-code +23 error Or if that isn't available, you can get their info via: +23 error npm owner ls dress-code +23 error There is likely additional logging output above. +24 verbose exit [ 1, true ] diff --git a/src/icons/error.svg b/src/icons/error.svg new file mode 100644 index 00000000..9bbc0548 --- /dev/null +++ b/src/icons/error.svg @@ -0,0 +1,12 @@ + + + + msg-error + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/icons/info-large.svg b/src/icons/info-large.svg new file mode 100644 index 00000000..5029cd07 --- /dev/null +++ b/src/icons/info-large.svg @@ -0,0 +1,12 @@ + + + + info-large + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/icons/msg-error.svg b/src/icons/msg-error.svg deleted file mode 100644 index d0c1e7c8..00000000 --- a/src/icons/msg-error.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - msg-error - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/src/icons/msg-info.svg b/src/icons/msg-info.svg deleted file mode 100644 index ab680da1..00000000 --- a/src/icons/msg-info.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - msg-info - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/src/icons/msg-neutral.svg b/src/icons/msg-neutral.svg deleted file mode 100644 index 8621e6f6..00000000 --- a/src/icons/msg-neutral.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - msg-neutral - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/src/icons/msg-success.svg b/src/icons/msg-success.svg deleted file mode 100644 index 0f067a7f..00000000 --- a/src/icons/msg-success.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - msg-success - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/src/icons/success.svg b/src/icons/success.svg new file mode 100644 index 00000000..49ff3f44 --- /dev/null +++ b/src/icons/success.svg @@ -0,0 +1,12 @@ + + + + success + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/icons/msg-warning.svg b/src/icons/warning.svg similarity index 76% rename from src/icons/msg-warning.svg rename to src/icons/warning.svg index 25e228e1..c45416a8 100644 --- a/src/icons/msg-warning.svg +++ b/src/icons/warning.svg @@ -1,12 +1,12 @@ - - - msg-warning + + + warning Created with Sketch. - - - + + + \ No newline at end of file diff --git a/src/styles/_generated/_icon.scss b/src/styles/_generated/_icon.scss index 4da2f5ea..3414ecea 100644 --- a/src/styles/_generated/_icon.scss +++ b/src/styles/_generated/_icon.scss @@ -43,63 +43,60 @@ @if $filename == cog { $char: "\E006"; } - @if $filename == eye { + @if $filename == error { $char: "\E007"; } - @if $filename == help { + @if $filename == eye { $char: "\E008"; } - @if $filename == history { + @if $filename == help { $char: "\E009"; } - @if $filename == info { + @if $filename == history { $char: "\E00A"; } - @if $filename == lock { + @if $filename == info-large { $char: "\E00B"; } - @if $filename == menu { + @if $filename == info { $char: "\E00C"; } - @if $filename == more { + @if $filename == lock { $char: "\E00D"; } - @if $filename == msg-error { + @if $filename == menu { $char: "\E00E"; } - @if $filename == msg-info { + @if $filename == more { $char: "\E00F"; } - @if $filename == msg-neutral { + @if $filename == pencil { $char: "\E010"; } - @if $filename == msg-success { + @if $filename == play { $char: "\E011"; } - @if $filename == msg-warning { + @if $filename == redo { $char: "\E012"; } - @if $filename == pencil { + @if $filename == search { $char: "\E013"; } - @if $filename == play { + @if $filename == success { $char: "\E014"; } - @if $filename == redo { + @if $filename == trash { $char: "\E015"; } - @if $filename == search { + @if $filename == undo { $char: "\E016"; } - @if $filename == trash { + @if $filename == user { $char: "\E017"; } - @if $filename == undo { + @if $filename == warning { $char: "\E018"; } - @if $filename == user { - $char: "\E019"; -} @return $char; } @@ -135,6 +132,11 @@ content: dc-icon-char(cog); } } +@mixin dc-icon--error { + &:before { + content: dc-icon-char(error); + } +} @mixin dc-icon--eye { &:before { content: dc-icon-char(eye); @@ -150,6 +152,11 @@ content: dc-icon-char(history); } } +@mixin dc-icon--info-large { + &:before { + content: dc-icon-char(info-large); + } +} @mixin dc-icon--info { &:before { content: dc-icon-char(info); @@ -170,31 +177,6 @@ content: dc-icon-char(more); } } -@mixin dc-icon--msg-error { - &:before { - content: dc-icon-char(msg-error); - } -} -@mixin dc-icon--msg-info { - &:before { - content: dc-icon-char(msg-info); - } -} -@mixin dc-icon--msg-neutral { - &:before { - content: dc-icon-char(msg-neutral); - } -} -@mixin dc-icon--msg-success { - &:before { - content: dc-icon-char(msg-success); - } -} -@mixin dc-icon--msg-warning { - &:before { - content: dc-icon-char(msg-warning); - } -} @mixin dc-icon--pencil { &:before { content: dc-icon-char(pencil); @@ -215,6 +197,11 @@ content: dc-icon-char(search); } } +@mixin dc-icon--success { + &:before { + content: dc-icon-char(success); + } +} @mixin dc-icon--trash { &:before { content: dc-icon-char(trash); @@ -230,6 +217,11 @@ content: dc-icon-char(user); } } +@mixin dc-icon--warning { + &:before { + content: dc-icon-char(warning); + } +} @mixin dc-icon-generated-selectors { @@ -272,6 +264,10 @@ @include dc-icon--cog; } + .dc-icon--error { + @include dc-icon--error; + } + .dc-icon--eye { @include dc-icon--eye; } @@ -284,6 +280,10 @@ @include dc-icon--history; } + .dc-icon--info-large { + @include dc-icon--info-large; + } + .dc-icon--info { @include dc-icon--info; } @@ -300,26 +300,6 @@ @include dc-icon--more; } - .dc-icon--msg-error { - @include dc-icon--msg-error; - } - - .dc-icon--msg-info { - @include dc-icon--msg-info; - } - - .dc-icon--msg-neutral { - @include dc-icon--msg-neutral; - } - - .dc-icon--msg-success { - @include dc-icon--msg-success; - } - - .dc-icon--msg-warning { - @include dc-icon--msg-warning; - } - .dc-icon--pencil { @include dc-icon--pencil; } @@ -336,6 +316,10 @@ @include dc-icon--search; } + .dc-icon--success { + @include dc-icon--success; + } + .dc-icon--trash { @include dc-icon--trash; } @@ -348,5 +332,9 @@ @include dc-icon--user; } + .dc-icon--warning { + @include dc-icon--warning; + } + } diff --git a/src/styles/dress-code.scss b/src/styles/dress-code.scss index ee8b0c0d..fef08ece 100644 --- a/src/styles/dress-code.scss +++ b/src/styles/dress-code.scss @@ -63,8 +63,8 @@ @include dc-dialog-selectors; @include dc-dropdown-selectors; @include dc-input-group-selectors; - @include dc-msg-selectors; // !!! FIXME @controversial BEM + @include dc-msg-selectors; @include dc-search-form-selectors; // !!! FIXME @controversial BEM @include dc-toast-selectors; - @include dc-tooltip-selectors; // !!! FIXME @controversial BEM + @include dc-tooltip-selectors; } diff --git a/src/styles/molecules/_messages.scss b/src/styles/molecules/_messages.scss index 9c62dbe8..f5e1f1cf 100644 --- a/src/styles/molecules/_messages.scss +++ b/src/styles/molecules/_messages.scss @@ -11,7 +11,6 @@ color: $dc-blue20; font-size: $dc-font50; line-height: $dc-font100 + .2; - // transform: translateY(-100%); @include breakpoint($dc-medium-width) { padding: $dc-space100; @@ -21,25 +20,16 @@ @mixin dc-msg__inner { display: flex; flex: 0 1 auto; - // max-width: 600px; - // margin: 0 auto; align-items: center; } -@mixin dc-msg__icon { +@mixin dc-msg__icon-frame { min-width: 4rem; height: 4rem; @include breakpoint($dc-medium-width) { margin-right: $dc-space100; } - - // FIXME - @controversial BEM - .dc-icon { - padding: 0 1rem; - color: currentcolor; - line-height: 4rem; - } } @mixin dc-msg__bd { @@ -70,7 +60,6 @@ @mixin dc-msg__close { min-width: 4rem; - cursor: pointer; &:active { transform: scale(.9); @@ -79,92 +68,60 @@ @mixin dc-msg__close__icon { padding: 0 1.5rem; + color: currentColor; + line-height: 4rem; + cursor: pointer; + opacity: .5; + + &:hover { + opacity: .7; + } +} + +@mixin dc-msg__icon { + padding: 0 1rem; color: currentcolor; line-height: 4rem; + opacity: .8; + font-size: 2.6rem; } +// = INFO MESSAGE +// ----------------------------------------------------------------------------- @mixin dc-msg--info { border-color: darken($dc-blue70, 5%); background: rgba($dc-blue70, .5); color: $dc-blue20; - - // FIXME - @controversial BEM - .dc-icon--msg-info { - color: $dc-blue40; - font-size: 2.75rem; - } - - // FIXME - @controversial BEM - .dc-msg__close { - &:hover .dc-icon--close { - color: $dc-blue10; - } - } } +// = SUCCESS MESSAGE +// ----------------------------------------------------------------------------- + @mixin dc-msg--success { // scss-lint:disable ColorVariable border-color: #84e440; background: rgba(#e3ffc7, .95); // scss-lint:enable ColorVariable color: $dc-green20; - - // FIXME - @controversial BEM - .dc-msg__title { - color: $dc-green20; - } - - // FIXME - @controversial BEM - .dc-icon--msg-success { - color: $dc-green30; - font-size: 2.2rem; - } - - // FIXME - @controversial BEM - .dc-msg__close { - &:hover .dc-icon--close { - color: $dc-green10; - } - } } +// = ERROR MESSAGE +// ----------------------------------------------------------------------------- + @mixin dc-msg--error { border-color: darken($dc-red70, 5%); background: rgba(desaturate($dc-red70, 10%), .5); - color: $dc-red20; - - // FIXME - @controversial BEM - .dc-icon--msg-error { - color: $dc-red40; - font-size: 1.8rem; - } - - // FIXME - @controversial BEM - .dc-msg__close { - &:hover .dc-icon--close { - color: $dc-red10; - } - } + color: $dc-red30; } +// = WARNING MESSAGE +// ----------------------------------------------------------------------------- + @mixin dc-msg--warning { border-color: darken($dc-yellow70, 35%); background: rgba($dc-yellow70, .5); color: $dc-yellow20; - - // FIXME - @controversial BEM - .dc-icon--msg-warning { - color: $dc-yellow30; - font-size: 2.75rem; - } - - // FIXME - @controversial BEM - .dc-msg__close { - &:hover .dc-icon--close { - color: $dc-yellow10; - } - } } // = ANIMATION @@ -223,16 +180,16 @@ @include dc-msg__inner; } + .dc-msg__icon-frame { + @include dc-msg__icon-frame; + } + .dc-msg__icon { @include dc-msg__icon; } .dc-msg__bd { @include dc-msg__bd; - // FIXME - @controversial BEM - .dc-link:not(.dc-msg__bd__link) { - @include dc-msg__bd__link; - } } .dc-msg__bd__link { @@ -249,10 +206,6 @@ .dc-msg__close { @include dc-msg__close; - // FIXME @controversial BEM - .dc-icon--close:not(.dc-msg__close__icon) { - @include dc-msg__close__icon; - } } .dc-msg__close__icon {