ignite-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From anovi...@apache.org
Subject ignite git commit: IGNITE-5165 Add classes for new design buttons and links.
Date Mon, 15 May 2017 03:31:42 GMT
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 <iborisov@gridgain.com>
Authored: Mon May 15 10:31:27 2017 +0700
Committer: Andrey Novikov <anovikov@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


Mime
View raw message