diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css index 5305bbcf22..e6e3536282 100644 --- a/dist/framework-with-theme.css +++ b/dist/framework-with-theme.css @@ -23,9 +23,12 @@ a { margin: 0; } .button { - color: #333333; - border-radius: 2px; } + color: #222222; + border-radius: 2px; + padding: 10px 10px; } .button-default { - background-color: #fff; + background-color: white; border: 1px solid #dddddd; } + .button-default:active { + background-color: #eeeeee; } diff --git a/example/index.html b/example/index.html index 65150d084f..b22e2ef6d9 100644 --- a/example/index.html +++ b/example/index.html @@ -1,8 +1,7 @@ - - +
diff --git a/scss/framework/theme/default/_button.scss b/scss/framework/theme/default/_button.scss index 293f8e52e4..974637b272 100644 --- a/scss/framework/theme/default/_button.scss +++ b/scss/framework/theme/default/_button.scss @@ -1,9 +1,15 @@ + .button { - color: #333333; - border-radius: 2px; + color: $buttonColor; + border-radius: $buttonBorderRadius; + padding: $buttonPadding; } .button-default { - background-color: #fff; - border: 1px solid #ddd; + background-color: $buttonDefaultBackground; + border: $buttonBorderWidth solid $buttonDefaultBorder; + + &:active { + background-color: $buttonDefaultBackgroundActive; + } } \ No newline at end of file diff --git a/scss/framework/theme/default/_variables.scss b/scss/framework/theme/default/_variables.scss index e69de29bb2..555ef99a97 100644 --- a/scss/framework/theme/default/_variables.scss +++ b/scss/framework/theme/default/_variables.scss @@ -0,0 +1,10 @@ +// Buttons +$buttonColor: #222; +$buttonPadding: 10px 10px; +$buttonBorderRadius: 2px; +$buttonBorderWidth: 1px; + +$buttonDefaultBackground: #fff; +$buttonDefaultBackgroundActive: #eee; +$buttonDefaultBorder: #ddd; +