diff --git a/semantic/src/themes/tripwire/elements/button.overrides b/semantic/src/themes/tripwire/elements/button.overrides index 6ea2f76..748ddca 100644 --- a/semantic/src/themes/tripwire/elements/button.overrides +++ b/semantic/src/themes/tripwire/elements/button.overrides @@ -10,6 +10,10 @@ border-radius: 0px; } +.ui.button.primary { + border: none; +} + .ui.button:active, .ui.active.button:active { border-color: @blue; @@ -24,9 +28,8 @@ .ui.button:focus, .ui.button:hover { - border-color: @blue; - color: @blue; - background: @white; + border-color: @hoverBackgroundColor; + color: @white; } .ui.button:active { border-color: @blue; diff --git a/semantic/src/themes/tripwire/elements/button.variables b/semantic/src/themes/tripwire/elements/button.variables index 48e1f6a..0a69898 100644 --- a/semantic/src/themes/tripwire/elements/button.variables +++ b/semantic/src/themes/tripwire/elements/button.variables @@ -8,7 +8,7 @@ /* Button */ @verticalMargin: 0em; -@horizontalMargin: 0.5em; +@horizontalMargin: 0.8em; @backgroundColor: #E0E1E2; @backgroundImage: none; @background: @backgroundColor @backgroundImage; @@ -84,7 +84,7 @@ --------------------*/ /* Hovered */ -@hoverBackgroundColor: #CACBCD; +@hoverBackgroundColor: #999; @hoverBackgroundImage: @backgroundImage; @hoverBoxShadow: @boxShadow; @hoverColor: @hoveredTextColor; diff --git a/src/components/suir/button/Button.examples.md b/src/components/suir/button/Button.examples.md index 3e565e7..d0fde1c 100644 --- a/src/components/suir/button/Button.examples.md +++ b/src/components/suir/button/Button.examples.md @@ -3,18 +3,6 @@ const Button = require('semantic-ui-react').Button; -## Disabled Button - - const Button = require('semantic-ui-react').Button; - - -## Active Button - - const Button = require('semantic-ui-react').Button; - - ## Positive Button const Button = require('semantic-ui-react').Button; @@ -31,6 +19,54 @@ Negative +## Primary Button + + const Button = require('semantic-ui-react').Button; +
+ + + +
+ +## Secondary Button + + const Button = require('semantic-ui-react').Button; +
+ + + +
+ +## Disabled Button + + const Button = require('semantic-ui-react').Button; + + +## Active Button + + const Button = require('semantic-ui-react').Button; + + ## Icon Button const Button = require('semantic-ui-react').Button; diff --git a/yarn.lock b/yarn.lock index f318133..8630a9a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -382,7 +382,7 @@ async-each@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d" -async@2.1.4: +async@2.1.4, async@^2.0.1, async@^2.1.4: version "2.1.4" resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4" dependencies: @@ -396,12 +396,6 @@ async@^1.2.1, async@^1.3.0, async@^1.4.0, async@^1.4.2: version "1.5.2" resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" -async@^2.0.1, async@^2.1.4: - version "2.1.5" - resolved "https://registry.yarnpkg.com/async/-/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc" - dependencies: - lodash "^4.14.0" - async@~0.2.6: version "0.2.10" resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1" @@ -3874,7 +3868,7 @@ got@^6.7.1: unzip-response "^2.0.1" url-parse-lax "^1.0.0" -graceful-fs@4.1.11, graceful-fs@^4.1.11, graceful-fs@^4.1.9, graceful-fs@~4.1.11: +graceful-fs@4.1.11, graceful-fs@^4.1.11, graceful-fs@^4.1.4, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@~4.1.11: version "4.1.11" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658" @@ -3884,7 +3878,7 @@ graceful-fs@^3.0.0: dependencies: natives "^1.1.0" -graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6: +graceful-fs@^4.1.2: version "4.1.10" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.10.tgz#f2d720c22092f743228775c75e3612632501f131"