diff --git a/alerts.html b/alerts.html new file mode 100644 index 0000000..f69ce3f --- /dev/null +++ b/alerts.html @@ -0,0 +1,123 @@ + + + + Quodo 2 + + + + + + + + + + +
+
+
+
+
+ +

Application UI library

 + +
+
+

Checkers

+
Main pageComponentsAlerts +
+
+

Default alerts

+

They are useful in form messages feedback, for example

+

Hey, there is a problem here!

+

Yeah, we do it!

+

Something wrong, try to wait a bit...

+

Nothing special, just in case

+

Inverted

+

Just borders, light variation

+

Hey, there is a problem here!

+

Yeah, we do it!

+

Something wrong, try to wait a bit...

+

Nothing special, just in case

+

Faded version

+

Soft as silk

+

Hey, there is a problem here!

+

Yeah, we do it!

+

Something wrong, try to wait a bit...

+

Nothing special, just in case

+
+
 The code
+
 Colorable
+
+
+
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/components.html b/components.html index dc7abf6..6b930e5 100644 --- a/components.html +++ b/components.html @@ -50,6 +50,7 @@

Components

Colors
Typography
+
Alerts
diff --git a/config.codekit b/config.codekit index 5b8eba8..a276b2e 100644 --- a/config.codekit +++ b/config.codekit @@ -2,6 +2,15 @@ "CodeKitInfo": "This is a CodeKit 2.x project configuration file. It is designed to sync project settings across multiple machines. MODIFYING THE CONTENTS OF THIS FILE IS A POOR LIFE DECISION. If you do so, you will likely cause CodeKit to crash. This file is not useful unless accompanied by the project that created it in CodeKit 2. This file is not backwards-compatible with CodeKit 1.x. For more information, see: http:\/\/incident57.com\/codekit", "creatorBuild": "18493", "files": { + "\/alerts.html": { + "fileType": 8192, + "ignore": 1, + "ignoreWasSetByUser": 0, + "inputAbbreviatedPath": "\/alerts.html", + "outputAbbreviatedPath": "No Output Path", + "outputPathIsOutsideProject": 0, + "outputPathIsSetByUser": 0 + }, "\/api.html": { "fileType": 8192, "ignore": 1, @@ -375,6 +384,17 @@ "outputPathIsSetByUser": 0, "outputStyle": 0 }, + "\/jade\/alerts.jade": { + "compileDebug": 1, + "fileType": 512, + "ignore": 0, + "ignoreWasSetByUser": 0, + "inputAbbreviatedPath": "\/jade\/alerts.jade", + "outputAbbreviatedPath": "\/alerts.html", + "outputPathIsOutsideProject": 0, + "outputPathIsSetByUser": 0, + "outputStyle": 0 + }, "\/jade\/api.jade": { "compileDebug": 1, "fileType": 512, @@ -1228,6 +1248,22 @@ "shouldRunBless": 0, "useLibsass": false }, + "\/sass\/components\/alert.sass": { + "createSourceMap": 0, + "debugStyle": 0, + "decimalPrecision": 10, + "fileType": 2, + "ignore": 1, + "ignoreWasSetByUser": 0, + "inputAbbreviatedPath": "\/sass\/components\/alert.sass", + "outputAbbreviatedPath": "\/css\/alert.css", + "outputPathIsOutsideProject": 0, + "outputPathIsSetByUser": 0, + "outputStyle": 0, + "shouldRunAutoprefixer": 1, + "shouldRunBless": 0, + "useLibsass": false + }, "\/sass\/components\/box.sass": { "createSourceMap": 1, "debugStyle": 0, diff --git a/css/screen.css b/css/screen.css index 23e31c2..804a32f 100644 --- a/css/screen.css +++ b/css/screen.css @@ -4400,9 +4400,9 @@ table { padding: 0.5em 20px; background-color: #ccd1d8; } .popup .window .messages .message.error { - background-color: #e95546; } + background-color: #fc6d58; } .popup .window .messages .message.success { - background-color: #34bc9d; } + background-color: #46cfb0; } .popup .window .content { padding: 20px 20px; } .popup .window .content p:last-child { @@ -4617,20 +4617,20 @@ textarea, input[type="password"].error, textarea.error, .select.error { - border-color: #e95546; } + border-color: #fc6d58; } input[type="text"].error:hover, input[type="email"].error:hover, input[type="password"].error:hover, textarea.error:hover, .select.error:hover { - border-color: #c63223; } + border-color: #d94a35; } input[type="text"].error:focus, input[type="email"].error:focus, input[type="password"].error:focus, textarea.error:focus, .select.error:focus { - border-color: #e95546; - box-shadow: inset 0 0 0 1px #e95546; } + border-color: #fc6d58; + box-shadow: inset 0 0 0 1px #fc6d58; } input[type="checkbox"] { visibility: hidden; @@ -4673,9 +4673,9 @@ input[type="checkbox"] { input[type="checkbox"] + label:hover:before { border-color: #c3c6ca; } input[type="checkbox"].error + label:before { - border-color: #e95546; } + border-color: #fc6d58; } input[type="checkbox"].error + label:hover:before { - border-color: #c63223; } + border-color: #d94a35; } input[type="checkbox"]:checked + label:before { border-color: #4fc2e5; box-shadow: inset 0 0 0 1px #4fc2e5; } @@ -4771,6 +4771,36 @@ input[type="radio"] { font-family: "Asap", sans-serif; font-size: 16px; } +.alert { + background-color: #e6e9ed; + padding: 0.5em 20px; + border-radius: 5px; } + .alert.error { + background-color: #fc6d58; + color: #fff; } + .alert.success { + background-color: #46cfb0; + color: #fff; } + .alert.attention { + background-color: #ffcd69; + color: #fff; } + .alert.invert { + background-color: transparent; + box-shadow: inset 0 0 0 1px #ccd1d8; } + .alert.invert.error { + color: #fc6d58; + box-shadow: inset 0 0 0 1px #fc6d58; } + .alert.invert.success { + color: #46cfb0; + box-shadow: inset 0 0 0 1px #46cfb0; } + .alert.invert.attention { + color: #ebb955; + box-shadow: inset 0 0 0 1px #ebb955; } + .alert.fade.error, .alert.fade.success { + opacity: 0.55; } + .alert.fade.attention { + opacity: 0.75; } + .logo { font-size: 30px; font-weight: bold; diff --git a/forms.html b/forms.html index a6715f3..5d2dd3b 100644 --- a/forms.html +++ b/forms.html @@ -28,174 +28,186 @@

Forms

Default form

There's nothing to say

-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
-
- +
+
+ +
+
+ +
+
+ +
-
-
-
-
- - -
-
-
-
- -
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+
+ + +
+
+
+
+ +
+
+
-
+

 The code

Horizontal form

Another kind — horizontal mode

-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
-
- +
+
+ +
+
+ +
+
+ +
-
-
-
-
- -
-
- - - - -
-
-
-
- - -
-
-
-
- -
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+ + + + +
+
+
+
+ + +
+
+
+
+ +
+
+
-
+

 The code

Errors

This sample shows how inputs can be marked as a wrong

-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
-
- +
+
+ +
+
+ +
+
+ +
-
-
-
-
- -
-
- - - - -
-
-
-
- - -
-
-
-
- -
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+ + + + +
+
+
+
+ + +
+
+
+
+ +
+
+
-
+

 The code
diff --git a/jade/alerts.jade b/jade/alerts.jade new file mode 100644 index 0000000..7c93d32 --- /dev/null +++ b/jade/alerts.jade @@ -0,0 +1,43 @@ +extends _layout + +block content + - var section = 'checkers' + .grid + .col-6 + include ./partials/leftcol.jade + + .col-18 + h1 Checkers + + +breadcrumbs([ + ['components', 'Components'], + ['alerts', 'Alerts'] + ]) + + h2 Default alerts + p They are useful in form messages feedback, for example + + p.alert.error Hey, there is a problem here! + p.alert.success Yeah, we do it! + p.alert.attention Something wrong, try to wait a bit... + p.alert Nothing special, just in case + + h2 Inverted + p Just borders, light variation + + p.alert.invert.error Hey, there is a problem here! + p.alert.invert.success Yeah, we do it! + p.alert.invert.attention Something wrong, try to wait a bit... + p.alert.invert Nothing special, just in case + + h2 Faded version + p Soft as silk + + p.alert.fade.error Hey, there is a problem here! + p.alert.fade.success Yeah, we do it! + p.alert.fade.attention Something wrong, try to wait a bit... + p.alert.fade Nothing special, just in case + + .grid + include partials/code + include partials/colorable \ No newline at end of file diff --git a/jade/components.jade b/jade/components.jade index fea8a62..a15256d 100644 --- a/jade/components.jade +++ b/jade/components.jade @@ -104,4 +104,10 @@ block content a.item(href="typography.html") span.icon.bevel.bg-cold-light i.fa.fa-font - span.text Typography \ No newline at end of file + span.text Typography + + .col-6 + a.item(href="alerts.html") + span.icon.bevel.bg-cold-light + i.fa.fa-exclamation-triangle + span.text Alerts \ No newline at end of file diff --git a/jade/forms.jade b/jade/forms.jade index 71ed79a..08fe83a 100644 --- a/jade/forms.jade +++ b/jade/forms.jade @@ -18,41 +18,43 @@ block content h2 Default form p There's nothing to say - form.form - .row - .label - label(for="name-1") Name - .input - input#name-1(type="text", tabindex="1") - - .row - .label - label(for="email-1") E-mail - .input - input#email-1(type="email", tabindex="2", placeholder="name@domain.com") - - .row - .label - label(for="realm-1") Realm - - .input - .select - select#realm-1(tabindex="3") - option North America - option South America - option Europe - option Asia - option Oceania - option South Africa - - .row - .input - input#remember-1(type="checkbox", tabindex="4") - label(for="remember-1") Remember me - - .row - .input - button.button.bevel.bg-cold-light(type="submit") Login + .grid + .col-12 + form.form + .row + .label + label(for="name-1") Name + .input + input#name-1(type="text", tabindex="1") + + .row + .label + label(for="email-1") E-mail + .input + input#email-1(type="email", tabindex="2", placeholder="name@domain.com") + + .row + .label + label(for="realm-1") Realm + + .input + .select + select#realm-1(tabindex="3") + option North America + option South America + option Europe + option Asia + option Oceania + option South Africa + + .row + .input + input#remember-1(type="checkbox", tabindex="4") + label(for="remember-1") Remember me + + .row + .input + button.button.w-100(type="submit") Login br .grid @@ -66,54 +68,56 @@ block content h2 Horizontal form p Another kind — horizontal mode - form.form.horizontal - .row - .label - label(for="name-2") Name - - .input - input#name-2(type="text", tabindex="11") - - .row - .label - label(for="email-2") E-mail - - .input - input#email-2(type="email", tabindex="12", placeholder="name@domain.com") - - .row - .label - label(for="realm-2") Realm - - .input - .select - select#realm-2(tabindex="13") - option North America - option South America - option Europe - option Asia - option Oceania - option South Africa - - .row - .label - label Gender - - .input - input#gender-2-1(type="radio", tabindex="15", name="gender-2", value="1", checked) - label(for="gender-2-1") Male - - input#gender-2-2(type="radio", tabindex="16", name="gender-2", value="2") - label(for="gender-2-2") Female - - .row - .input - input#remember-2(type="checkbox", tabindex="17") - label(for="remember-2") Remember me - - .row - .input - button.button.bevel.bg-cold-light(type="submit") Login + .grid + .col-12 + form.form.horizontal + .row + .label + label(for="name-2") Name + + .input + input#name-2(type="text", tabindex="11") + + .row + .label + label(for="email-2") E-mail + + .input + input#email-2(type="email", tabindex="12", placeholder="name@domain.com") + + .row + .label + label(for="realm-2") Realm + + .input + .select + select#realm-2(tabindex="13") + option North America + option South America + option Europe + option Asia + option Oceania + option South Africa + + .row + .label + label Gender + + .input + input#gender-2-1(type="radio", tabindex="15", name="gender-2", value="1", checked) + label(for="gender-2-1") Male + + input#gender-2-2(type="radio", tabindex="16", name="gender-2", value="2") + label(for="gender-2-2") Female + + .row + .input + input#remember-2(type="checkbox", tabindex="17") + label(for="remember-2") Remember me + + .row + .input + button.button.w-100(type="submit") Login br .grid @@ -126,54 +130,56 @@ block content h2 Errors p This sample shows how inputs can be marked as a wrong - form.form.horizontal - .row - .label - label(for="name-3") Name - - .input - input.error#name-3(type="text", tabindex="21") - - .row - .label - label(for="email-3") E-mail - - .input - input.error#email-3(type="email", tabindex="22", placeholder="name@domain.com") - - .row - .label - label(for="realm-3", tabindex="23") Realm - - .input - .select.error - select#realm-3(tabindex="24") - option North America - option South America - option Europe - option Asia - option Oceania - option South Africa - - .row - .label - label Gender - - .input - input#gender-3-1(type="radio", tabindex="25", name="gender-2", value="1", checked) - label(for="gender-3-1") Male - - input#gender-3-2(type="radio", tabindex="26", name="gender-2", value="2") - label(for="gender-3-2") Female - - .row - .input - input.error#remember-3(type="checkbox", tabindex="27") - label(for="remember-3") Remember me - - .row - .input - button.button.bevel.bg-cold-light(type="submit", disabled) Please, correct a wrong fields + .grid + .col-12 + form.form.horizontal + .row + .label + label(for="name-3") Name + + .input + input.error#name-3(type="text", tabindex="21") + + .row + .label + label(for="email-3") E-mail + + .input + input#email-3(type="email", tabindex="22", placeholder="name@domain.com") + + .row + .label + label(for="realm-3", tabindex="23") Realm + + .input + .select.error + select#realm-3(tabindex="24") + option North America + option South America + option Europe + option Asia + option Oceania + option South Africa + + .row + .label + label Gender + + .input + input#gender-3-1(type="radio", tabindex="25", name="gender-2", value="1", checked) + label(for="gender-3-1") Male + + input#gender-3-2(type="radio", tabindex="26", name="gender-2", value="2") + label(for="gender-3-2") Female + + .row + .input + input.error#remember-3(type="checkbox", tabindex="27") + label(for="remember-3") Remember me + + .row + .input + button.button.w-100(type="submit", disabled) Please, correct a wrong fields br .grid diff --git a/sass/common/vars.sass b/sass/common/vars.sass index 3e86608..0922165 100644 --- a/sass/common/vars.sass +++ b/sass/common/vars.sass @@ -61,7 +61,10 @@ $margin-vertical-space: 40px // Components colors $color-text-default: $color-dark-gray-dark -$color-error: $color-warm-dark + +$color-error: $color-heat-light +$color-success: $color-neutral-light +$color-attention: $color-warm-light $fill-component-color: $color-dark-gray-dark $fill-component-active-state: $color-cold-light @@ -83,9 +86,6 @@ $fill-component-active: rgba(255, 255, 255, .25) $color-faded-text: $color-dark-gray-light -$color-error: $color-heat-dark -$color-success: $color-neutral-dark - // Grid settings $grid-cols: 24 diff --git a/sass/components/alert.sass b/sass/components/alert.sass new file mode 100644 index 0000000..a925209 --- /dev/null +++ b/sass/components/alert.sass @@ -0,0 +1,40 @@ +.alert + background-color: $color-light-gray-dark + padding: .5em $padding-component-side + border-radius: $border-radius + + &.error + background-color: $color-error + color: #fff + + &.success + background-color: $color-success + color: #fff + + &.attention + background-color: $color-attention + color: #fff + + &.invert + background-color: transparent + box-shadow: inset 0 0 0 1px $color-medium-gray-light + + &.error + color: $color-error + box-shadow: inset 0 0 0 1px $color-error + + &.success + color: $color-success + box-shadow: inset 0 0 0 1px $color-success + + &.attention + color: $color-attention - 20 + box-shadow: inset 0 0 0 1px $color-attention - 20 + + &.fade + &.error, + &.success + opacity: .55 + + &.attention + opacity: .75 \ No newline at end of file diff --git a/sass/components/form.sass b/sass/components/form.sass index ff8cac5..345fa88 100644 --- a/sass/components/form.sass +++ b/sass/components/form.sass @@ -94,7 +94,6 @@ textarea, border-color: $color-error box-shadow: inset 0 0 0 1px $color-error - input[type="checkbox"] $size: 18px visibility: hidden diff --git a/sass/screen.sass b/sass/screen.sass index 406746f..3e5a501 100644 --- a/sass/screen.sass +++ b/sass/screen.sass @@ -32,6 +32,7 @@ @import components/breadcrumbs @import components/tabs @import components/form +@import components/alert @import demo @import code \ No newline at end of file