diff --git a/src/components/button/_button-input.hbs b/src/components/button/_button-input.hbs
index b04fbac9..47736549 100644
--- a/src/components/button/_button-input.hbs
+++ b/src/components/button/_button-input.hbs
@@ -4,7 +4,7 @@
{{else}}
type="button"
{{/if}}
- class="nsw-button nsw-button--{{style}}"
+ class="nsw-button nsw-button--{{style}}{{#if isFullWidth}} nsw-button--full-width{{/if}}"
{{#if isDisabled}}disabled{{/if}}
value="{{text}}"
>
diff --git a/src/components/button/_button-link.hbs b/src/components/button/_button-link.hbs
index 9bfb4192..3602d57d 100644
--- a/src/components/button/_button-link.hbs
+++ b/src/components/button/_button-link.hbs
@@ -1,3 +1,3 @@
-
+
{{text}}
diff --git a/src/components/button/_button.hbs b/src/components/button/_button.hbs
index c33b555d..37bc4a7d 100644
--- a/src/components/button/_button.hbs
+++ b/src/components/button/_button.hbs
@@ -4,7 +4,7 @@
{{else}}
type="button"
{{/if}}
- class="nsw-button nsw-button--{{style}}"
+ class="nsw-button nsw-button--{{style}}{{#if isFullWidth}} nsw-button--full-width{{/if}}"
{{#if isDisabled}}disabled{{/if}}>
{{text}}
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 0ad1ce58..0d4c5404 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -49,3 +49,13 @@
margin-bottom: 0;
}
}
+
+.nsw-button--full-width {
+ display: block;
+ width: 100%;
+
+ @include breakpoint($desktop-breakpoint) {
+ display: inline-block;
+ width: auto;
+ }
+}
diff --git a/src/components/button/index.hbs b/src/components/button/index.hbs
index f512dfb1..f74a633b 100644
--- a/src/components/button/index.hbs
+++ b/src/components/button/index.hbs
@@ -19,24 +19,24 @@ title: Buttons
{{>_button-input type="reset" style="primary" text="Input Reset"}}
-
Highlight
- {{>_button-link url="#" style="highlight" text="Link"}}
- {{>_button type="button" style="highlight" text="Button"}}
- {{>_button type="submit" style="highlight" text="Submit Button"}}
- {{>_button type="reset" style="highlight" text="Reset Button"}}
- {{>_button-input type="button" style="highlight" text="Input"}}
- {{>_button-input type="submit" style="highlight" text="Input Submit"}}
- {{>_button-input type="reset" style="highlight" text="Input Reset"}}
+ Secondary
+ {{>_button-link url="#" style="secondary" text="Link"}}
+ {{>_button type="button" style="secondary" text="Button"}}
+ {{>_button type="submit" style="secondary" text="Submit Button"}}
+ {{>_button type="reset" style="secondary" text="Reset Button"}}
+ {{>_button-input type="button" style="secondary" text="Input"}}
+ {{>_button-input type="submit" style="secondary" text="Input Submit"}}
+ {{>_button-input type="reset" style="secondary" text="Input Reset"}}
-
Outline
- {{>_button-link url="#" style="outline" text="Link"}}
- {{>_button type="button" style="outline" text="Button"}}
- {{>_button type="submit" style="outline" text="Submit Button"}}
- {{>_button type="reset" style="outline" text="Reset Button"}}
- {{>_button-input type="button" style="outline" text="Input"}}
- {{>_button-input type="submit" style="outline" text="Input Submit"}}
- {{>_button-input type="reset" style="outline" text="Input Reset"}}
+ Danger
+ {{>_button-link url="#" style="danger" text="Link"}}
+ {{>_button type="button" style="danger" text="Button"}}
+ {{>_button type="submit" style="danger" text="Submit Button"}}
+ {{>_button type="reset" style="danger" text="Reset Button"}}
+ {{>_button-input type="button" style="danger" text="Input"}}
+ {{>_button-input type="submit" style="danger" text="Input Submit"}}
+ {{>_button-input type="reset" style="danger" text="Input Reset"}}
@@ -70,7 +70,7 @@ title: Buttons
Disabled
-
Note: Its not possible to disable links, a class of .disable should only be applied to buttons and inputs
+
Note: It is not possible to disable links, therefore attribute "disabled" should only be applied to buttons and inputs.
{{>_button type="button" style="primary" text="Button" isDisabled=true}}
{{>_button type="submit" style="primary" text="Submit Button" isDisabled=true}}
{{>_button type="reset" style="primary" text="Reset Button" isDisabled=true}}
@@ -78,6 +78,17 @@ title: Buttons
{{>_button-input type="submit" style="primary" text="Input Submit" isDisabled=true}}
{{>_button-input type="reset" style="primary" text="Input Reset" isDisabled=true}}
+
+
Full width
+
Note: Full width buttons will stretch to 100% on mobile but will revert back to usual behaviour on desktop.
+ {{>_button-link url="#" style="primary" text="Link" isFullWidth=true}}
+ {{>_button type="button" style="primary" text="Button" isFullWidth=true}}
+ {{>_button type="submit" style="primary" text="Submit Button" isFullWidth=true}}
+ {{>_button type="reset" style="primary" text="Reset Button" isFullWidth=true}}
+ {{>_button-input type="button" style="primary" text="Input" isFullWidth=true}}
+ {{>_button-input type="submit" style="primary" text="Input Submit" isFullWidth=true}}
+ {{>_button-input type="reset" style="primary" text="Input Reset" isFullWidth=true}}
+
diff --git a/src/global/scss/settings/_settings.scss b/src/global/scss/settings/_settings.scss
index 762136af..91af9e3b 100644
--- a/src/global/scss/settings/_settings.scss
+++ b/src/global/scss/settings/_settings.scss
@@ -118,6 +118,7 @@ $light10: #f4f4f7 !default;
$white: #ffffff !default;
// Utility colors
+$danger: #d7153a !default;
$info: $nsw-secondary-blue !default;
$info-background: #eaedf4 !default;
$success: #00a908 !default;
@@ -246,13 +247,21 @@ $button-variations: (
border: $nsw-primary-blue,
border-hover: lighten($nsw-primary-blue, 5.88)
),
- highlight: (
+ secondary: (
+ text-color: $dark80,
+ text-color-hover: $white,
+ background: $white,
+ background-hover: $nsw-primary-blue,
+ border: $nsw-primary-blue,
+ border-hover: $nsw-primary-blue
+ ),
+ danger: (
text-color: $white,
text-color-hover: $white,
- background: $nsw-primary-highlight,
- background-hover: lighten($nsw-primary-highlight, 5.88),
- border: $nsw-primary-highlight,
- border-hover: lighten($nsw-primary-highlight, 5.88)
+ background: $danger,
+ background-hover: lighten($danger, 5.88),
+ border: $danger,
+ border-hover: lighten($danger, 5.88)
),
outline: (
text-color: $dark80,
@@ -262,6 +271,14 @@ $button-variations: (
border: $nsw-primary-blue,
border-hover: $nsw-primary-blue
),
+ highlight: (
+ text-color: $white,
+ text-color-hover: $white,
+ background: $nsw-primary-highlight,
+ background-hover: lighten($nsw-primary-highlight, 5.88),
+ border: $nsw-primary-highlight,
+ border-hover: lighten($nsw-primary-highlight, 5.88)
+ ),
white: (
text-color: $dark80,
text-color-hover: $dark80,