diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-08-16 08:23:58 +0200 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2018-08-16 08:23:58 +0200 |
commit | 36b9a168810bc4b5997a653b3e91fa2c717b5063 (patch) | |
tree | 29750b3167b5e03f6ef7dd1717c4ab9f977aee5f /css/Properties | |
parent | 82ecf80ffeb3cbe9a59f8df961e4406fa282e71d (diff) |
Grid fixes and title update
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'css/Properties')
-rw-r--r-- | css/Properties/Properties.scss | 99 | ||||
-rw-r--r-- | css/Properties/PropertyTitle.scss | 33 |
2 files changed, 132 insertions, 0 deletions
diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss new file mode 100644 index 00000000..bddf8edf --- /dev/null +++ b/css/Properties/Properties.scss @@ -0,0 +1,99 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> + * + * @author John Molakvoæ <skjnldsv@protonmail.com> + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero 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 Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + * + */ + +.property { + @include generate-grid-span(1); + display: flex; + flex-wrap: wrap; + flex-direction: column; + position: relative; + width: $grid-column-width; + margin-bottom: $grid-height-unit; + + &__delete { + position: absolute; + top: 0; + right: 0; + width: $grid-height-unit; + height: $grid-height-unit; + margin: 0; + border: 0; + background-color: transparent; + opacity: .5; + display: none; + &:hover, + a:active, + a:focus { + opacity: .7; + } + } + + &:hover &__delete, + a:active &__delete, + a:focus &__delete { + display: block; + } + + // property row + &__row { + display: flex; + align-items: center; + padding-right: 44px; + height: $grid-height-unit; + position: relative; + + input { + flex: 1 1; + } + + } + + // label or multiselect + &__label, + &__label.multiselect { + margin: $grid-input-margin; + margin: $grid-input-margin 5px $grid-input-margin 0; + height: $grid-input-height-with-margin; + padding: $grid-input-padding 0; + width: 120px; + opacity: .7; + + &, + .multiselect__input::placeholder { + text-align: right; + } + + &:not(.multiselect) { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + overflow-x: hidden; + } + + &.multiselect { + &:hover, + &:focus { + opacity: 1; + } + } + } +} diff --git a/css/Properties/PropertyTitle.scss b/css/Properties/PropertyTitle.scss new file mode 100644 index 00000000..c70ba855 --- /dev/null +++ b/css/Properties/PropertyTitle.scss @@ -0,0 +1,33 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> + * + * @author John Molakvoæ <skjnldsv@protonmail.com> + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero 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 Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + * + */ + +.property__title { + display: flex; + align-items: center; + margin: 0; + opacity: 0.6; + user-select: none; + + .property__title--icon { + background-origin: center right; + } +}
\ No newline at end of file |