diff options
author | Dennis Kobert <d-kobert@web.de> | 2019-06-12 21:51:39 +0200 |
---|---|---|
committer | Dennis Kobert <d-kobert@web.de> | 2019-06-12 21:51:39 +0200 |
commit | 9e9c1c822a64c0a65033b7eed07ea661a385cecc (patch) | |
tree | ee699d4e93bb4204f5f4e04cd14f6d77365b81b4 /WebInterface/src/style/partials/_btn.scss | |
parent | 304437b834e8c87687f68333ae67a13ee1377a73 (diff) | |
parent | 3a3d0fc3d4733f8908e23a03f860d76340479ec4 (diff) |
Merge remote-tracking branch 'origin/master'
Diffstat (limited to 'WebInterface/src/style/partials/_btn.scss')
-rw-r--r-- | WebInterface/src/style/partials/_btn.scss | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/WebInterface/src/style/partials/_btn.scss b/WebInterface/src/style/partials/_btn.scss new file mode 100644 index 0000000..cf5ee33 --- /dev/null +++ b/WebInterface/src/style/partials/_btn.scss @@ -0,0 +1,75 @@ +@import 'colors'; + +.btn { + border: none; + border-radius: 4px; + padding: 8px; + margin: 0; + font-size: 1rem; + font-family: 'Roboto Condensed', sans-serif; + font-weight: bold; + display: inline-block; + background-color: $secondary; + color: $secondary-text; + text-transform: uppercase; + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + cursor: pointer; + letter-spacing: 0.25rem; + + background-position: center; + transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease; + + &:hover { + background: $secondary-dark radial-gradient(circle, transparent 1%, $secondary-dark 1%) center/15000%; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + } + + &:active { + background-color: $secondary-light; + background-size: 100%; + box-shadow: 0 1px 3px rgba(0,0,0,0.12); + transition: background 0s, box-shadow 0s; + } + + &:disabled { + color: $secondary-text-disabled; + background: $secondary-disabled; + box-shadow: none; + transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease; + } +} + +.text-btn { + padding: 8px; + margin: 0; + font-size: 1rem; + font-family: 'Roboto Condensed', sans-serif; + font-weight: bold; + display: inline-block; + color: $secondary-text; + background-color: rgba(0, 0, 0, 0); + text-transform: uppercase; + box-shadow: none; + + background-position: center; + transition: background 800ms ease, box-shadow 100ms ease, color 200ms ease; + + &:hover { + background: $secondary-dark-transparent radial-gradient(circle, transparent 1%, $secondary-dark-transparent 1%) center/15000%; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + } + + &:active { + background-color: $secondary-light; + background-size: 100%; + box-shadow: none; + transition: background 0s, box-shadow 0s; + } + + &:disabled { + background: rgba(0,0,0,0); + color: $secondary-text-disabled; + box-shadow: none; + transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease; + } +} |