You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by sb...@apache.org on 2017/05/15 10:25:37 UTC
[08/14] ignite git commit: IGNITE-5165 Add classes for new design
buttons and links.
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/ignite-5075
Commit: f038f63a8a67c23061014a5356cde93814d5b8d2
Parents: ed4a7a1
Author: Ilya Borisov <ib...@gridgain.com>
Authored: Mon May 15 10:31:27 2017 +0700
Committer: Andrey Novikov <an...@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