diff options
Diffstat (limited to 'src/components/editors/scss')
-rw-r--r-- | src/components/editors/scss/_editor.scss | 105 | ||||
-rw-r--r-- | src/components/editors/scss/address-editor.scss | 65 | ||||
-rw-r--r-- | src/components/editors/scss/client-editor.scss | 28 | ||||
-rw-r--r-- | src/components/editors/scss/colors.scss | 24 | ||||
-rw-r--r-- | src/components/editors/scss/contact-editor.scss | 51 | ||||
-rw-r--r-- | src/components/editors/scss/item-editor.scss | 76 |
6 files changed, 282 insertions, 67 deletions
diff --git a/src/components/editors/scss/_editor.scss b/src/components/editors/scss/_editor.scss new file mode 100644 index 0000000..1ca7067 --- /dev/null +++ b/src/components/editors/scss/_editor.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; + } + } +} + +.editor-wrapper { + width: 100%; + margin: auto; + padding: 0; + margin: 0; + position: relative; + p { + text-align: center; + font-weight: bold; + font-size: 1.7rem; + color: $primaryAccentColor; + } +} + +@mixin editor { + .editor { + 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/editors/scss/address-editor.scss b/src/components/editors/scss/address-editor.scss new file mode 100644 index 0000000..49b0a0a --- /dev/null +++ b/src/components/editors/scss/address-editor.scss @@ -0,0 +1,65 @@ +/* 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"; +@import "editor"; + +.address-editor { + min-height: 18rem; + .heading { + font-size: 1.1rem; + color: $primaryAccentColor; + font-weight: bold; + align: center; + } + + .checkbox-label { + border: none; + max-width: none; + justify-content: left; + input { + display: inline; + width: 1.4rem; + } + } + + .labels-wrapper { + @include label; + display: flex; + flex-direction: row; + justify-content: space-evenly; + + div { + width: 50%; + max-width: 20rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + input, textarea { + width: 100%; + max-width: none; + margin-top: 0.2rem; + } + textarea { + min-height: 6rem; + max-height: 6rem; + resize: none; + } + } + } +} diff --git a/src/components/editors/scss/client-editor.scss b/src/components/editors/scss/client-editor.scss new file mode 100644 index 0000000..52b7189 --- /dev/null +++ b/src/components/editors/scss/client-editor.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 "editor"; + +.client-editor { + max-width: 90%; + justify-content: space-around; + .top { + width: 100%; + display: flex; + justify-content: space-around; + } +} diff --git a/src/components/editors/scss/colors.scss b/src/components/editors/scss/colors.scss new file mode 100644 index 0000000..4e5b1c2 --- /dev/null +++ b/src/components/editors/scss/colors.scss @@ -0,0 +1,24 @@ +/* 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/>. + */ + +$primaryAccentColor: #bd93f9; +$secondaryAccentColor: #d0afff; + +$fgColor: white; +$fgColorAlt: black; + +$inputBackgroundColor: #00000000; diff --git a/src/components/editors/scss/contact-editor.scss b/src/components/editors/scss/contact-editor.scss new file mode 100644 index 0000000..61e0ceb --- /dev/null +++ b/src/components/editors/scss/contact-editor.scss @@ -0,0 +1,51 @@ +/* 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"; +@import "editor"; + +@include editor; +.contact-editor { + width: 90%; + max-width: 30rem; + min-height: 18rem; + + .heading { + font-size: 1.1rem; + color: $primaryAccentColor; + font-weight: bold; + text-align: center; + } + .labels-wrapper { + display: flex; + flex-direction: column; + align-items: center; + flex-wrap: wrap; + + label { + margin: 0.2rem 0; + textarea { + min-height: 3rem; + max-height: 3rem; + resize: none; + width: 100%; + max-width: 13rem; + margin-top: 0.2rem; + } + } + } +} diff --git a/src/components/editors/scss/item-editor.scss b/src/components/editors/scss/item-editor.scss index 968795a..8f60ec7 100644 --- a/src/components/editors/scss/item-editor.scss +++ b/src/components/editors/scss/item-editor.scss @@ -15,74 +15,16 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ -.editor-wrapper { - width: 100%; - margin: auto; - padding: 0; - margin: 0; - position: relative; - p { - text-align: center; - font-weight: bold; - font-size: 1.7rem; - color: #bd93f9; - } -} - -.editor { - padding-bottom: 2.5rem; - margin: auto; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - align-items: center; - min-width: 90%; +@import "editor"; - 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 #d0afff; - - select,input { - padding: 0.2rem; - max-width: 13rem; - width: 90%; - box-sizing: border-box; - background-color: #00000000; - border: 1px solid #bd93f9; - color: white; - border-radius: 4px; - outline: 0; - } +.editor-wrapper { + // hide up/down arrows from number input + input::-webkit-outer-spin-button, + input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; } - - .buttons { - position: absolute; - display: flex; - justify-content: space-between; - width: 13.5rem; - input { - padding: 0.2rem 0; - width: 4rem; - background-color: #00000000; - border: 1px solid #bd93f9; - color: white; - border-radius: 4px; - transition: background-color 0.4s, color 0.4s; - } - input:hover { - background-color: #bd93f9; - color: black; - } - bottom: 0; - left: 0; - right: 0; - margin: auto; + input[type=number] { + -moz-appearance: textfield; } } |