From d6eacbf3ea1ec16f3e7b44599eca380444bc2c3c Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Tue, 29 Aug 2023 15:34:44 +0300 Subject: [PATCH] Form Styling CSS --- .../single/field-html-single.component.scss | 8 + .../image/form-field-image.component.scss | 17 +- .../field-image-multiple.component.html | 6 +- .../form-field-relation.component.scss | 40 +++- .../form/slider/slider-form.component.html | 4 +- .../sections/add/add-section.component.html | 2 +- .../sections/add/add-section.component.scss | 9 +- src/assets/css/basics.scss | 1 + src/assets/css/buttons.scss | 211 +++++++++++------- src/assets/css/forms.scss | 20 +- src/assets/css/slider.scss | 35 +-- .../{add_cirle_24.svg => add_circle_24.svg} | 0 .../icons/arrow_drop_down_dark_24dp.svg | 3 + src/assets/images/icons/close_24dp.svg | 2 +- src/assets/images/icons/trash_grey_24dp.svg | 2 +- src/environments/environment.ts | 2 +- src/styles.scss | 14 +- 17 files changed, 238 insertions(+), 138 deletions(-) rename src/assets/images/icons/{add_cirle_24.svg => add_circle_24.svg} (100%) create mode 100644 src/assets/images/icons/arrow_drop_down_dark_24dp.svg diff --git a/src/app/_modules/form-fields/types/html/single/field-html-single.component.scss b/src/app/_modules/form-fields/types/html/single/field-html-single.component.scss index e69de29..e8ad2c9 100644 --- a/src/app/_modules/form-fields/types/html/single/field-html-single.component.scss +++ b/src/app/_modules/form-fields/types/html/single/field-html-single.component.scss @@ -0,0 +1,8 @@ +:host::ng-deep editor{ + border-radius: 12px; + border: solid 1px #C0C0C0; + font-family: "PT Sans"; + .tox-tinymce{ + border:none; + } +} \ No newline at end of file diff --git a/src/app/_modules/form-fields/types/image/form-field-image.component.scss b/src/app/_modules/form-fields/types/image/form-field-image.component.scss index d3a9c02..aeaedbd 100644 --- a/src/app/_modules/form-fields/types/image/form-field-image.component.scss +++ b/src/app/_modules/form-fields/types/image/form-field-image.component.scss @@ -3,7 +3,7 @@ display: flex; height: 100px; padding: 16px; - border: var(--orange-2) dashed 1px; + border: var(--blue-1) dashed 1px; border-radius: 4px; overflow: hidden; &.hover { @@ -62,7 +62,7 @@ .item { display: flex; flex-direction: row; - align-items: center; + align-items: start; .preview { width: 80px; height: 80px; @@ -75,17 +75,8 @@ object-fit: cover; } } - .remove { - margin-left: 8px; - flex-shrink: 0; - width: 20px; - height: 20px; - background: transparent url("~src/assets/images/icons/close_20dp.svg") 50% 50% no-repeat; - opacity: 0.5; - content: ''; - &:hover { - opacity: 1; - } + .trash { + margin-left: 10px; } } } diff --git a/src/app/_modules/form-fields/types/image/multiple/field-image-multiple.component.html b/src/app/_modules/form-fields/types/image/multiple/field-image-multiple.component.html index e863abe..23e8cd9 100644 --- a/src/app/_modules/form-fields/types/image/multiple/field-image-multiple.component.html +++ b/src/app/_modules/form-fields/types/image/multiple/field-image-multiple.component.html @@ -1,6 +1,8 @@
-

Перетащите сюда или выберите файл в формате JPEG или PNG общим объемом не более 10 Мбайт.

+

Перетащите сюда или выберите файл + +

Загружается файл {{upload.file?.name}}
@@ -9,6 +11,6 @@
- +
diff --git a/src/app/_modules/form-fields/types/relation/form-field-relation.component.scss b/src/app/_modules/form-fields/types/relation/form-field-relation.component.scss index 26d50e9..b9ff238 100644 --- a/src/app/_modules/form-fields/types/relation/form-field-relation.component.scss +++ b/src/app/_modules/form-fields/types/relation/form-field-relation.component.scss @@ -1,16 +1,33 @@ .combobox { position: relative; - border: solid 1px var(--grey-3); - border-radius: var(--radius-1); + font-family: "PT Sans"; + border: solid 1px #C0C0C0; + border-radius: 12px; + font-size: 20px; + color: var(--dark-1); + padding: 8px 12px 8px 16px; + + &:hover{ + border-color: #6C6C6C; + outline: none; + } + &.active { + border-color: #0070BA; + outline: none; + + } + &:disabled{ + border-color: #EDEDED; + outline: none; + } .toggle { display: flex; flex-direction: row; align-items: center; width: 100%; - height: 40px; - padding: 0 12px 0 16px; - font-size: 1rem; + height: 24px; + font-size: 20px; box-sizing: border-box; cursor: pointer; .caption { @@ -37,15 +54,26 @@ } } + + &:after { display: block; width: 24px; height: 20px; margin-left: auto; - background: url('~src/assets/images/icons/arrow_drop_down_24dp.svg') 50% 50% no-repeat; + background: url('~src/assets/images/icons/arrow_drop_down_grey_24dp.svg') 50% 50% no-repeat; content: ""; transition: transform 0.2s; } + + &:hover:after { + background: url('~src/assets/images/icons/arrow_drop_down_dark_24dp.svg') 50% 50% no-repeat; + } + + } + + &.active .toggle:after { + background: url('~src/assets/images/icons/arrow_drop_down_24dp.svg') 50% 50% no-repeat; } .dropdown { diff --git a/src/app/_modules/objects/form/slider/slider-form.component.html b/src/app/_modules/objects/form/slider/slider-form.component.html index 4ae9acb..20dc990 100644 --- a/src/app/_modules/objects/form/slider/slider-form.component.html +++ b/src/app/_modules/objects/form/slider/slider-form.component.html @@ -22,8 +22,8 @@
* Поля, обязательные для заполнения
- - + +
diff --git a/src/app/_modules/pages/sections/add/add-section.component.html b/src/app/_modules/pages/sections/add/add-section.component.html index 4013871..70b7cff 100644 --- a/src/app/_modules/pages/sections/add/add-section.component.html +++ b/src/app/_modules/pages/sections/add/add-section.component.html @@ -1,5 +1,5 @@
-
Добавить элемент
+
Добавить элемент
diff --git a/src/app/_modules/pages/sections/add/add-section.component.scss b/src/app/_modules/pages/sections/add/add-section.component.scss index 4ca1caf..aab8d5c 100644 --- a/src/app/_modules/pages/sections/add/add-section.component.scss +++ b/src/app/_modules/pages/sections/add/add-section.component.scss @@ -8,6 +8,7 @@ .toggle { position: relative; padding-left: 32px; + color: var(--blue-1); // background: var(--white) url("~src/assets/images/icons/add_24dp.svg") no-repeat center; cursor: pointer; z-index: 1; @@ -15,13 +16,16 @@ display: inline-block; width: 24px; height: 24px; - background: var(--white) url("~src/assets/images/icons/add_circle_24.svg") no-repeat center; + background: var(--white) url("~src/assets/images/icons/add_cirle_24.svg") no-repeat center; content: ''; z-index: 0; bottom: -2px; position: absolute; left: 0px; } + &.active::after{ + transform: rotate(180deg); + } &:after { display: inline-block; width: 24px; @@ -32,6 +36,9 @@ bottom: -2px; position: absolute; right: -28px; + transform: rotate(0deg); + transition: transform .3s; + } } diff --git a/src/assets/css/basics.scss b/src/assets/css/basics.scss index 10e73a4..d993fb8 100644 --- a/src/assets/css/basics.scss +++ b/src/assets/css/basics.scss @@ -49,6 +49,7 @@ h1 { a { text-decoration: none; color: var(--blue-1); + cursor: pointer; &:hover{ color: var(--blue-3); }; diff --git a/src/assets/css/buttons.scss b/src/assets/css/buttons.scss index 27604db..dd8ebe6 100644 --- a/src/assets/css/buttons.scss +++ b/src/assets/css/buttons.scss @@ -30,6 +30,51 @@ button { border: 1px solid #A1CAE5; background: #A1CAE5; } + + &.outline{ + background:#FFF; + color: #0070BA; + &:hover{ + border: 1px solid #005799; + color: #005799; + } + + &:active{ + border: 1px solid #004077; + color: #004077; + } + + &[disabled] { + border: 1px solid #A1CAE5; + color: #A1CAE5; + } + } + + &.clear{ + padding: 0; + justify-content: center; + align-items: center; + gap: 10px; + cursor: pointer; + border-radius: 0; + border: none; + background-color: transparent; + color: var(--dark-1); + font-family: PT Sans Narrow; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 133.333% */ + letter-spacing: 100%; + } + + &.trash::after { + content: ""; + width: 24px; + height: 24px; + background: url('~src/assets/images/icons/trash_grey_24dp.svg') center no-repeat; + + } } // .inline-menu.default { @@ -51,88 +96,88 @@ button { // } // } -.btn { - color: #ffffff; - padding: 11px 24px; - background: var(--orange-2); - border: 1px solid var(--orange-2); - border-radius: 4px; - font-weight: 500; - font-size: 0.875rem; - line-height: 18px; - letter-spacing: 0.02em; - text-transform: uppercase; +// .btn { +// color: #ffffff; +// padding: 11px 24px; +// background: var(--orange-2); +// border: 1px solid var(--orange-2); +// border-radius: 4px; +// font-weight: 500; +// font-size: 0.875rem; +// line-height: 18px; +// letter-spacing: 0.02em; +// text-transform: uppercase; - &.with-icon { - display: flex; - flex-direction: row; - align-items: center; - padding: 8px 20px 8px 12px; - &:before { - display: block; - width: 24px; - height: 24px; - margin-right: 8px; - background: transparent none 50% 50% no-repeat; - content: ""; - } - &.add { - &:before { - //background-image: url('~src/assets/images/icons/add_circle_white_24dp.svg'); - } - } - } - &.small { - height: 28px; - padding: 4px 16px; - } - &.danger { - background-color: #db373a; - } - &.secondary { - background-color: var(--white); - color: var(--orange-2); - border: var(--orange-2) solid 1px; - &.danger { - border-color: #db373a; - color: #db373a; - } - } - &.icon { - width: 24px; - height: 24px; - padding: 0; - border-color: transparent; - background: transparent none 50% 50% no-repeat; - //&.reply {background-image: url('~src/assets/images/icons/add_comment_20dp.svg');} - //&.delete {background-image: url('~src/assets/images/icons/close_20dp.svg');} - &.trash {background-image: url('~src/assets/images/icons/delete_24dp.svg');} - &.edit {background-image: url('~src/assets/images/icons/edit_dark_24.svg');} - //&.chain {background-image: url('~src/assets/images/icons/linked_24dp.svg');} - &.checkbox { - display: flex; - width: 18px; - height: 18px; - border: solid 1px #7f7f7f; - border-radius: 2px; - &.checked,&.mixed { - background-color: #2c86cd; - border-color: #2c86cd; - } - &.checked { - //background-image: url('~src/assets/images/icons/checkbox_24dp.svg'); - } - &.mixed { - &:before { - display: block; - width: 12px; - height: 2px; - margin: auto; - background-color: #ffffff; - content: ""; - } - } - } - } -} +// &.with-icon { +// display: flex; +// flex-direction: row; +// align-items: center; +// padding: 8px 20px 8px 12px; +// &:before { +// display: block; +// width: 24px; +// height: 24px; +// margin-right: 8px; +// background: transparent none 50% 50% no-repeat; +// content: ""; +// } +// &.add { +// &:before { +// //background-image: url('~src/assets/images/icons/add_circle_white_24dp.svg'); +// } +// } +// } +// &.small { +// height: 28px; +// padding: 4px 16px; +// } +// &.danger { +// background-color: #db373a; +// } +// &.secondary { +// background-color: var(--white); +// color: var(--orange-2); +// border: var(--orange-2) solid 1px; +// &.danger { +// border-color: #db373a; +// color: #db373a; +// } +// } +// &.icon { +// width: 24px; +// height: 24px; +// padding: 0; +// border-color: transparent; +// background: transparent none 50% 50% no-repeat; +// //&.reply {background-image: url('~src/assets/images/icons/add_comment_20dp.svg');} +// //&.delete {background-image: url('~src/assets/images/icons/close_20dp.svg');} +// &.trash {background-image: url('~src/assets/images/icons/delete_24dp.svg');} +// &.edit {background-image: url('~src/assets/images/icons/edit_dark_24.svg');} +// //&.chain {background-image: url('~src/assets/images/icons/linked_24dp.svg');} +// &.checkbox { +// display: flex; +// width: 18px; +// height: 18px; +// border: solid 1px #7f7f7f; +// border-radius: 2px; +// &.checked,&.mixed { +// background-color: #2c86cd; +// border-color: #2c86cd; +// } +// &.checked { +// //background-image: url('~src/assets/images/icons/checkbox_24dp.svg'); +// } +// &.mixed { +// &:before { +// display: block; +// width: 12px; +// height: 2px; +// margin: auto; +// background-color: #ffffff; +// content: ""; +// } +// } +// } +// } +// } diff --git a/src/assets/css/forms.scss b/src/assets/css/forms.scss index b4c012c..ac9faeb 100644 --- a/src/assets/css/forms.scss +++ b/src/assets/css/forms.scss @@ -2,12 +2,22 @@ input, select, textarea { width: 100%; height: 40px; padding: 8px 16px; - border-radius: var(--radius-1); - border: solid 1px var(--grey-3); - font-family: "Open Sans"; - font-size: 1rem; + border-radius: 12px; + border: solid 1px #C0C0C0; + font-family: "PT Sans"; + font-size: 20px; + color: var(--dark-1); + &:hover{ + border-color: #6C6C6C; + outline: none; + } &:focus, &:focus-visible { - border-color: #111111; + border-color: #0070BA; + outline: none; + + } + &:disabled{ + border-color: #EDEDED; outline: none; } } diff --git a/src/assets/css/slider.scss b/src/assets/css/slider.scss index fb3d2b3..fc42591 100644 --- a/src/assets/css/slider.scss +++ b/src/assets/css/slider.scss @@ -5,7 +5,7 @@ display: flex; flex-direction: column; width: 100%; - max-width: 768px; + max-width: 720px; height: 100%; background-color: #ffffff; box-shadow: -3px 0 6px 0 rgba(0, 0, 0, 0.16); @@ -14,9 +14,8 @@ z-index: 110; .header { - padding: 24px; - border-bottom: 1px solid var(--grey-7); - background-color: #F7F8FA; + padding: 14px 24px; + border-bottom: 1px solid #C0C0C0; .title { display: flex; @@ -25,16 +24,22 @@ h2 { margin: 0; - font-weight: 400; - font-size: 1.5rem; - line-height: 30px; - color: #000000; + font-family: PT Sans Narrow; + font-size: 36px; + font-style: normal; + font-weight: 700; + line-height: 44px; /* 122.222% */ + letter-spacing: 0.36px; + color: var(--dark-1); } .close { width: 24px; height: 24px; margin-left: auto; + padding: 0; + border: none; + border-radius: 0; background: transparent url(/assets/images/icons/close_24dp.svg) 50% 50% no-repeat; } } @@ -106,7 +111,7 @@ .body { height: 100%; - padding: 24px; + padding: 32px 24px; flex-grow: 1; overflow: auto; -webkit-overflow-scrolling: touch; @@ -117,20 +122,20 @@ flex-direction: row; align-items: center; padding: 16px 24px; - background-color: #F7F8FA; - border-top: 1px solid var(--grey-7); + border-top: 1px solid #C0C0C0; .left { .reset { - color: #2c86cd; + color: #6C6C6C; cursor: pointer; } .notice { + font-family: PT Sans; + font-size: 16px; + font-style: normal; font-weight: 400; - font-size: 0.875rem; - line-height: 18px; - color: var(--grey-7); + line-height: 24px; /* 150% */ } } diff --git a/src/assets/images/icons/add_cirle_24.svg b/src/assets/images/icons/add_circle_24.svg similarity index 100% rename from src/assets/images/icons/add_cirle_24.svg rename to src/assets/images/icons/add_circle_24.svg diff --git a/src/assets/images/icons/arrow_drop_down_dark_24dp.svg b/src/assets/images/icons/arrow_drop_down_dark_24dp.svg new file mode 100644 index 0000000..964f94d --- /dev/null +++ b/src/assets/images/icons/arrow_drop_down_dark_24dp.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/close_24dp.svg b/src/assets/images/icons/close_24dp.svg index ea06c15..007e404 100644 --- a/src/assets/images/icons/close_24dp.svg +++ b/src/assets/images/icons/close_24dp.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/images/icons/trash_grey_24dp.svg b/src/assets/images/icons/trash_grey_24dp.svg index 610acde..ef8636d 100644 --- a/src/assets/images/icons/trash_grey_24dp.svg +++ b/src/assets/images/icons/trash_grey_24dp.svg @@ -1,5 +1,5 @@ + fill="#C0C0C0"/> diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 561dc7a..c8fa2b3 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -4,7 +4,7 @@ export const environment = { production: false, - apiUrl: 'http://api.faufcc.lc', + apiUrl: 'http://api.vniigazv2.lc', clientId: 2, clientSecret: 'SmnyQ492ZRhPX4tQKCg9VHyXK6dP1qrawnFhy8aM', }; diff --git a/src/styles.scss b/src/styles.scss index 3cea045..d60edc2 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -20,13 +20,13 @@ li { //list-style-image: url("~src/assets/images/icons/add_24dp.svg"); } -.btn { - font-weight: 500; - font-size: 0.875rem; - line-height: 1.125rem; - letter-spacing: 0.02em; - text-transform: uppercase; -} +// .btn { +// font-weight: 500; +// font-size: 0.875rem; +// line-height: 1.125rem; +// letter-spacing: 0.02em; +// text-transform: uppercase; +// } .menu { display: flex;