diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css index fd8f9d3ab6..4be2e0fa02 100644 --- a/dist/framework-with-theme.css +++ b/dist/framework-with-theme.css @@ -188,13 +188,79 @@ a.list-item:hover, a.list-item:focus { .button { color: #222222; border-radius: 2px; - padding: 10px 10px; } + border-width: 1px; + border-style: solid; + padding: 10px 15px; } .button-default { background-color: white; - border: 1px solid #dddddd; } + border-color: #dddddd; } + .button-default:hover { + background-color: white; } .button-default:active { - background-color: #eeeeee; } + background-color: #e6e6e6; } + +.button-secondary { + background-color: whitesmoke; + border-color: #cccccc; } + .button-secondary:hover { + background-color: white; } + .button-secondary:active { + background-color: gainsboro; } + +.button-primary { + color: white; + background-color: #6999e9; + border-color: #5981c5; } + .button-primary:hover { + background-color: #95b7f0; } + .button-primary:active { + background-color: #3d7be2; } + +.button-info { + color: white; + background-color: #60d2e6; + border-color: #51b3c4; } + .button-info:hover { + background-color: #8cdeed; } + .button-info:active { + background-color: #34c6df; } + +.button-success { + color: white; + background-color: #89c163; + border-color: #71a052; } + .button-success:hover { + background-color: #a5d087; } + .button-success:active { + background-color: #6fac45; } + +.button-warning { + color: white; + background-color: #f0b840; + border-color: #cf9a29; } + .button-warning:hover { + background-color: #f4ca6f; } + .button-warning:active { + background-color: #eba612; } + +.button-danger { + color: white; + background-color: #de5645; + border-color: #bc4435; } + .button-danger:hover { + background-color: #e67d70; } + .button-danger:active { + background-color: #cc3724; } + +.button-dark { + color: white; + background-color: #444444; + border-color: #111111; } + .button-dark:hover { + background-color: #5e5e5e; } + .button-dark:active { + background-color: #2b2b2b; } .list-divider { background-color: whitesmoke; diff --git a/example/buttons.html b/example/buttons.html index c06904a18a..63a8ccc4bb 100644 --- a/example/buttons.html +++ b/example/buttons.html @@ -1,29 +1,48 @@ - - - Buttons + + Example + + + + + + + + + + + + + + + + + + + + + + + -
- - Previous - +

Willkommen!

- -
+

- Grid -

-

- List View -

-

- Home + Default + Secondary + Primary + Info + Success + Warning + Danger + Dark

diff --git a/scss/framework-structure.scss b/scss/framework-structure.scss index dafb8e75d5..92266556f2 100755 --- a/scss/framework-structure.scss +++ b/scss/framework-structure.scss @@ -4,6 +4,8 @@ // Components @import "framework/structure/variables", + "framework/structure/mixins", + "framework/structure/base", "framework/structure/bar", "framework/structure/button", diff --git a/scss/framework/structure/_mixins.scss b/scss/framework/structure/_mixins.scss new file mode 100644 index 0000000000..9c12fc9e2b --- /dev/null +++ b/scss/framework/structure/_mixins.scss @@ -0,0 +1,12 @@ +@mixin button-style($bgColor, $borderColor) { + background-color: $bgColor; + border-color: $borderColor; + + // Give desktop users something to play with + &:hover { + background-color: lighten($bgColor, 10%); + } + &:active { + background-color: darken($bgColor, 10%); + } +} diff --git a/scss/framework/theme/default/_button.scss b/scss/framework/theme/default/_button.scss index 974637b272..164985d357 100644 --- a/scss/framework/theme/default/_button.scss +++ b/scss/framework/theme/default/_button.scss @@ -1,15 +1,39 @@ - .button { color: $buttonColor; border-radius: $buttonBorderRadius; + border-width: $buttonBorderWidth; + border-style: solid; padding: $buttonPadding; + } .button-default { - background-color: $buttonDefaultBackground; - border: $buttonBorderWidth solid $buttonDefaultBorder; - - &:active { - background-color: $buttonDefaultBackgroundActive; - } -} \ No newline at end of file + @include button-style($buttonDefaultBackground, $buttonDefaultBorder); +} +.button-secondary { + @include button-style($buttonSecondaryBackground, $buttonSecondaryBorder); +} +.button-primary { + color: $lightColor; + @include button-style($buttonPrimaryBackground, $buttonPrimaryBorder); +} +.button-info { + color: $lightColor; + @include button-style($buttonInfoBackground, $buttonInfoBorder); +} +.button-success { + color: $lightColor; + @include button-style($buttonSuccessBackground, $buttonSuccessBorder); +} +.button-warning { + color: $lightColor; + @include button-style($buttonWarningBackground, $buttonWarningBorder); +} +.button-danger { + color: $lightColor; + @include button-style($buttonDangerBackground, $buttonDangerBorder); +} +.button-dark { + color: $lightColor; + @include button-style($buttonDarkBackground, $buttonDarkBorder); +} diff --git a/scss/framework/theme/default/_variables.scss b/scss/framework/theme/default/_variables.scss index b95b4acf86..23d21922c0 100644 --- a/scss/framework/theme/default/_variables.scss +++ b/scss/framework/theme/default/_variables.scss @@ -5,7 +5,7 @@ $darkColor: #333; // // Buttons $buttonColor: #222; -$buttonPadding: 10px 10px; +$buttonPadding: 10px 15px; $buttonBorderRadius: 2px; $buttonBorderWidth: 1px; @@ -13,6 +13,35 @@ $buttonDefaultBackground: #fff; $buttonDefaultBackgroundActive: #eee; $buttonDefaultBorder: #ddd; +$buttonSecondaryBackground: #f5f5f5; +$buttonSecondaryBackgroundActive: #eee; +$buttonSecondaryBorder: #ccc; + +$buttonPrimaryBackground: #6999e9; +$buttonPrimaryBackgroundActive: #eee; +$buttonPrimaryBorder: #5981c5; + +$buttonInfoBackground: #60d2e6; +$buttonInfoBackgroundActive: #eee; +$buttonInfoBorder: #51b3c4; + +$buttonSuccessBackground: #89c163; +$buttonSuccessBackgroundActive: #eee; +$buttonSuccessBorder: #71a052; + +$buttonWarningBackground: #f0b840; +$buttonWarningBackgroundActive: #eee; +$buttonWarningBorder: #cf9a29; + + +$buttonDangerBackground: #de5645; +$buttonDangerBackgroundActive: #eee; +$buttonDangerBorder: #bc4435; + +$buttonDarkBackground: #444; +$buttonDarkBackgroundActive: #eee; +$buttonDarkBorder: #111; + // // Bars