langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add buttons_mixins.scss for sharing SCSS across components

Browse Source
This commit is contained in:
Henrik Giesel 2021-04-14 15:45:14 +02:00
parent 00d8d869f4
commit 443cef6b15
4 changed files with 28 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ts/editor-toolbar/LabelButton.svelte
View File

@ -32,27 +32,25 @@
</script> </script>
<style lang="scss"> <style lang="scss">
@use "ts/sass/button_mixins" as button;
button { button {
display: inline-block; display: inline-block;
vertical-align: middle; padding: 0 calc(var(--toolbar-size) / 3);
width: auto;
height: var(--toolbar-size);
font-size: calc(var(--toolbar-size) / 2.3); font-size: calc(var(--toolbar-size) / 2.3);
padding: 0 calc(var(--toolbar-size) / 3); width: auto;
height: var(--toolbar-size);
border-radius: 0; border-radius: 0;
border-color: var(--faint-border); border-color: var(--faint-border);
&:focus { &:hover {
box-shadow: 0 0 calc(var(--toolbar-size) / 2.5) box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5); calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
} }
&[disabled] { @include button.disabled {
opacity: 0.4;
cursor: not-allowed;
border-color: var(--faint-border); border-color: var(--faint-border);
} }
} }

10
ts/editor-toolbar/SquareButton.svelte
View File

@ -29,6 +29,8 @@
</script> </script>
<style lang="scss"> <style lang="scss">
@use "ts/sass/button_mixins" as button;
button { button {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
@ -36,7 +38,8 @@
background-color: white; background-color: white;
&:hover { &:hover {
background-color: #eee; box-shadow: 0 0 calc(var(--toolbar-size) / 2.5)
calc(var(--toolbar-size) / 7.5) rgb(255 255 255 / 0.5);
} }
&:active, &:active,
@ -51,10 +54,7 @@
border-color: var(--border); border-color: var(--border);
} }
&[disabled] { @include button.disabled {
opacity: 0.4;
cursor: not-allowed;
&:hover { &:hover {
background-color: white; background-color: white;
} }

8
ts/sass/BUILD.bazel
View File

@ -44,6 +44,14 @@ sass_library(
visibility = ["//visibility:public"], visibility = ["//visibility:public"],
) )
sass_library(
name = "button_mixins_lib",
srcs = [
"button_mixins.scss",
],
visibility = ["//visibility:public"],
)
# qt package extracts colours from source file # qt package extracts colours from source file
exports_files( exports_files(
["_vars.scss"], ["_vars.scss"],

8
ts/sass/button_mixins.scss Normal file
View File

@ -0,0 +1,8 @@
@mixin disabled {
&[disabled] {
opacity: 0.4;
cursor: not-allowed;
@content;
}
}