Repository: ignite Updated Branches: refs/heads/master ed4a7a131 -> f038f63a8
IGNITE-5165 Add classes for new design buttons and links. Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/f038f63a Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/f038f63a Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/f038f63a Branch: refs/heads/master Commit: f038f63a8a67c23061014a5356cde93814d5b8d2 Parents: ed4a7a1 Author: Ilya Borisov <ibori...@gridgain.com> Authored: Mon May 15 10:31:27 2017 +0700 Committer: Andrey Novikov <anovi...@gridgain.com> Committed: Mon May 15 10:31:27 2017 +0700 ---------------------------------------------------------------------- .../components/web-console-header/style.scss | 9 - .../frontend/app/primitives/btn/index.scss | 235 +++++++++++++++++++ .../frontend/public/stylesheets/variables.scss | 4 + .../frontend/views/includes/header-right.pug | 4 +- 4 files changed, 241 insertions(+), 11 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/f038f63a/modules/web-console/frontend/app/components/web-console-header/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/web-console-header/style.scss b/modules/web-console/frontend/app/components/web-console-header/style.scss index 5e382c8..78ff5f1 100644 --- a/modules/web-console/frontend/app/components/web-console-header/style.scss +++ b/modules/web-console/frontend/app/components/web-console-header/style.scss @@ -107,15 +107,6 @@ web-console-header { &:nth-last-child(2) { margin-right: $nav-item-margin; } - - .btn-demo { - padding: 8px 10px; - font-size: $font-size-base; - line-height: 18px; - border-radius: 4px; - - margin-right: 0; - } } .wch-revert-identity { http://git-wip-us.apache.org/repos/asf/ignite/blob/f038f63a/modules/web-console/frontend/app/primitives/btn/index.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/primitives/btn/index.scss b/modules/web-console/frontend/app/primitives/btn/index.scss index ec62df4..7905927 100644 --- a/modules/web-console/frontend/app/primitives/btn/index.scss +++ b/modules/web-console/frontend/app/primitives/btn/index.scss @@ -15,6 +15,9 @@ * limitations under the License. */ +@import "./../../../public/stylesheets/variables.scss"; + +// TODO IGNITE-5165 Remove and replace with btn-ignite in templates. .btn.btn--stroke { min-width: 36px; height: 36px; @@ -54,4 +57,236 @@ outline: none; } +} + +@mixin active-focus-shadows( + $focus: (0 0 5px #095d9a, 0 0 5px #095d9a), + $active: (inset 0 1px 3px 0 rgba(0, 0, 0, 0.5)) +) { + &.focus, &:focus { + box-shadow: $focus; + } + + &.active, &:active { + box-shadow: $active; + } + + &:active, &.active { + &:focus, &.focus { + &:not([disabled]) { + box-shadow: $focus, $active; + } + } + } +} + +.btn-ignite { + $content-padding: 12px; + $icon-margin: 8px; + + min-height: 36px; + display: inline-flex; + flex-direction: row; + justify-content: center; + align-items: center; + box-sizing: border-box; + margin: 0; + padding: 0 $content-padding; + + border: none; + border-radius: 4px; + text-align: center; + outline: none; + font-family: Roboto, sans-serif; + font-size: 14px; + line-height: 16px; + text-decoration: none; + + .icon { + &, &-right, &-left { + height: 16px; + } + + &-right { + margin-left: $icon-margin; + } + + &-left { + margin-right: $icon-margin; + } + } + + // Icon tweaks + .icon.fa-caret-down { + margin: 0 -3px; + } + + .fa { + line-height: inherit !important; + font-size: 16px; + } +} + +.btn-ignite--primary { + $accent-color: $ignite-brand-primary; + $text-color: white; + + background-color: $accent-color; + color: white; + + &:hover, &.hover, + &:active, &.active { + &:not([disabled]) { + color: white; + background-color: change-color($accent-color, $lightness: 41%); + } + } + + @include active-focus-shadows(); + + &[disabled] { + color: transparentize($text-color, 0.5); + background-color: change-color($accent-color, $lightness: 77%); + } +} + +.btn-ignite--primary-outline { + $accent-color: $ignite-brand-primary; + $hover-color: change-color($accent-color, $lightness: 36%); + $disabled-color: #c5c5c5; + + border: 1px solid $accent-color; + background: white; + color: $accent-color; + + &:hover, &.hover, + &:active, &.active { + &:not([disabled]) { + color: $hover-color; + border-color: $hover-color; + } + } + + @include active-focus-shadows($active: inset 0 1px 3px 0 $hover-color); + + &[disabled] { + color: $disabled-color; + border-color: $disabled-color; + } +} + +.btn-ignite--success { + $accent-color: $ignite-brand-success; + $text-color: white; + + background-color: $accent-color; + color: white; + + &:hover, &.hover, + &:active, &.active { + &:not([disabled]) { + color: white; + background-color: change-color($accent-color, $lightness: 26%); + } + } + + @include active-focus-shadows(); + + &[disabled] { + color: transparentize($text-color, 0.5); + background-color: change-color($accent-color, $saturation: 57%, $lightness: 68%); + } +} + +.btn-ignite--link-success { + $accent-color: $ignite-brand-success; + + background: transparent; + color: $accent-color; + text-decoration: underline; + + &:hover, &.hover, + &:active, &.active { + &:not([disabled]) { + color: change-color($accent-color, $lightness: 26%); + } + } + + @include active-focus-shadows($active: ()); + + &[disabled] { + color: change-color($accent-color, $saturation: 57%, $lightness: 68%); + } +} + +.btn-ignite--secondary { + background-color: white; + color: #424242; + border: 1px solid #dedede; + + &:hover, &.hover, + &:active, &.active { + &:not([disabled]) { + border-color: #c5c5c5; + background-color: #eeeeee; + } + } + + @include active-focus-shadows(); + + &[disabled] { + opacity: 0.5; + } +} + +.btn-ignite-group { + display: inline-flex; + + .btn-ignite:not(:first-of-type):not(:last-of-type) { + border-radius: 0; + } + + .btn-ignite:not(:last-of-type) { + border-right-width: 1px; + border-right-style: solid; + } + + .btn-ignite:first-of-type:not(:only-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .btn-ignite:last-of-type:not(:only-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .btn-ignite.btn-ignite--primary { + $line-color: $ignite-brand-primary; + border-right-color: change-color($line-color, $lightness: 41%); + } +} + +@mixin ignite-link($color, $color-hover) { + color: $color; + + &:hover, &.hover, + &:focus, &.focus { + color: $color-hover; + text-decoration: none; + } +} + +.link-primary { + @include ignite-link( + $color: $ignite-brand-primary, + $color-hover: change-color($ignite-brand-primary, $lightness: 41%) + ); +} + +.link-success { + @include ignite-link( + $color: $ignite-brand-success, + $color-hover: change-color($ignite-brand-success, $lightness: 26%) + ); } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/f038f63a/modules/web-console/frontend/public/stylesheets/variables.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/public/stylesheets/variables.scss b/modules/web-console/frontend/public/stylesheets/variables.scss index 9c77436..d75438f 100644 --- a/modules/web-console/frontend/public/stylesheets/variables.scss +++ b/modules/web-console/frontend/public/stylesheets/variables.scss @@ -28,3 +28,7 @@ $ignite-background-color: #fff; $ignite-new-background-color: #f9f9f9; $ignite-header-color: #555; $ignite-invalid-color: $brand-primary; + +// Color palette +$ignite-brand-primary: #ee2b27; // Red +$ignite-brand-success: #0067b9; // Blue \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/f038f63a/modules/web-console/frontend/views/includes/header-right.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/views/includes/header-right.pug b/modules/web-console/frontend/views/includes/header-right.pug index e8aeb01..62227e9 100644 --- a/modules/web-console/frontend/views/includes/header-right.pug +++ b/modules/web-console/frontend/views/includes/header-right.pug @@ -15,11 +15,11 @@ limitations under the License. .wch-demo-toggle(ng-controller='demoController') - button.btn.btn-info.btn-demo( + button.btn-ignite.btn-ignite--success( ng-if='IgniteDemoMode' ng-click='closeDemo()' ) Close Demo - button.btn.btn-info.btn-demo( + button.btn-ignite.btn-ignite--success( ng-if='!IgniteDemoMode' ng-click='startDemo()' ) Start Demo
