diff options
Diffstat (limited to 'src/components/pickers/scss')
-rw-r--r-- | src/components/pickers/scss/_colors.scss | 28 | ||||
-rw-r--r-- | src/components/pickers/scss/_picker.scss | 105 | ||||
-rw-r--r-- | src/components/pickers/scss/client-picker.scss | 47 |
3 files changed, 180 insertions, 0 deletions
diff --git a/src/components/pickers/scss/_colors.scss b/src/components/pickers/scss/_colors.scss new file mode 100644 index 0000000..bf47f75 --- /dev/null +++ b/src/components/pickers/scss/_colors.scss @@ -0,0 +1,28 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma <vidhukant@vidhukant.xyz> + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +@import "../../../colors"; + +$primaryAccentColor: $primaryAccentColor; +$secondaryAccentColor: $secondaryAccentColor; + +$fgColor: $fgColor; +$fgColorAlt: $black; + +$inputBackgroundColor: $backgroundColor; + +$warningColor: $warningColor; diff --git a/src/components/pickers/scss/_picker.scss b/src/components/pickers/scss/_picker.scss new file mode 100644 index 0000000..625a1e3 --- /dev/null +++ b/src/components/pickers/scss/_picker.scss @@ -0,0 +1,105 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma <vidhukant@vidhukant.xyz> + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +@import "colors"; + +@mixin label { + label { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + max-width: 24rem; + width: 90%; + padding: 0.3rem 0.1rem; + border-bottom: 1px dotted $secondaryAccentColor; + + select,input { + padding: 0.2rem; + max-width: 13rem; + width: 100%; + box-sizing: border-box; + background-color: $inputBackgroundColor; + border: 1px solid $primaryAccentColor; + color: $fgColor; + border-radius: 4px; + outline: 0; + font-size: 0.8rem; + } + textarea { + background-color: $inputBackgroundColor; + color: $fgColor; + outline: 0; + border: 1px solid $primaryAccentColor; + border-radius: 4px; + box-sizing: border-box; + font-size: 0.8rem; + } + } +} + +@mixin picker-wrapper { + width: 100%; + margin: auto; + padding: 0; + margin: 0; + position: relative; + p.heading { + text-align: center; + font-weight: bold; + font-size: 1.1rem; + color: $primaryAccentColor; + } +} + +@mixin picker { + .picker { + padding-bottom: 2.5rem; + margin: auto; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: center; + min-width: 90%; + @include label; + + .buttons { + position: absolute; + display: flex; + justify-content: space-between; + width: 13.5rem; + input { + padding: 0.2rem 0; + width: 4rem; + background-color: $inputBackgroundColor; + border: 1px solid $primaryAccentColor; + color: $fgColor; + border-radius: 4px; + transition: background-color 0.4s, color 0.4s; + } + input:hover { + background-color: $primaryAccentColor; + color: $fgColorAlt; + } + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + } +} diff --git a/src/components/pickers/scss/client-picker.scss b/src/components/pickers/scss/client-picker.scss new file mode 100644 index 0000000..e1d3b13 --- /dev/null +++ b/src/components/pickers/scss/client-picker.scss @@ -0,0 +1,47 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma <vidhukant@vidhukant.xyz> + + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +@import "picker"; + + +.picker-wrapper { + @include picker-wrapper; + @include label; +} + +.client-picker { + display: flex; + justify-content: space-evenly; + .options { + width: 27rem; + } + .billing-address, + .shipping-address, + .contact-info { + p { margin: 0 } + max-width: 24rem; + margin: 0 1rem; + } + .contact-info { + .icon { + font-size: 0.9rem; + } + } + .multiline { + white-space: pre-line; + } +} |