From 97c978fd1d7f86fb7ccf44a999f0ef3f17a2c1a0 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Mon, 28 Aug 2023 15:48:24 +0300 Subject: [PATCH] edit-menu --- .../page-breadcrumbs.component.scss | 9 ++- .../_modules/pages/page/page.component.html | 12 +-- .../_modules/pages/page/page.component.scss | 11 ++- .../types/content/content-page.component.html | 8 +- .../sections/add/add-section.component.html | 2 +- .../sections/add/add-section.component.scss | 79 ++++++++++--------- src/assets/css/forms.scss | 2 +- src/assets/images/icons/add_circle_24.svg | 3 + .../images/icons/arrow_drop_down_24dp.svg | 9 +-- .../images/icons/chevron_right_24dp.svg | 6 +- 10 files changed, 75 insertions(+), 66 deletions(-) create mode 100644 src/assets/images/icons/add_circle_24.svg diff --git a/src/app/_modules/pages/page/breadcrumbs/page-breadcrumbs.component.scss b/src/app/_modules/pages/page/breadcrumbs/page-breadcrumbs.component.scss index 44d968d..7abaa65 100644 --- a/src/app/_modules/pages/page/breadcrumbs/page-breadcrumbs.component.scss +++ b/src/app/_modules/pages/page/breadcrumbs/page-breadcrumbs.component.scss @@ -10,11 +10,12 @@ list-style-type: none; margin-right: 22px; position: relative; - color: #86898E; + font-size: 20px; + font-style: normal; font-weight: 400; - font-size: 0.875rem; - line-height: 18px; + line-height: 16px; /* 160% */ text-wrap: none; + color: var(--blue-1); &::before { display: block; @@ -24,7 +25,7 @@ height: 20px; right: -22px; top: 0; - background: url("~src/assets/images/icons/chevron_right_20dp.svg") no-repeat center; + background: url("~src/assets/images/icons/chevron_right_24dp.svg") no-repeat center; } &:last-child { &::before { diff --git a/src/app/_modules/pages/page/page.component.html b/src/app/_modules/pages/page/page.component.html index 51b05a8..1a0eb75 100644 --- a/src/app/_modules/pages/page/page.component.html +++ b/src/app/_modules/pages/page/page.component.html @@ -7,15 +7,15 @@ -
+
-
-
-
Режим редактирования
-
+
+
Режим редактирования
+
+
-
+
diff --git a/src/app/_modules/pages/page/page.component.scss b/src/app/_modules/pages/page/page.component.scss index c06869d..fe0beec 100644 --- a/src/app/_modules/pages/page/page.component.scss +++ b/src/app/_modules/pages/page/page.component.scss @@ -2,6 +2,7 @@ .row { display: block; width: 100%; + border-bottom: 1px solid #C0C0C0; .page-header { display: flex; flex-direction: column; @@ -43,12 +44,18 @@ cursor: pointer; .label { margin-right: 8px; - font-size: 14px; - color: #86898E; + font-size: 20px; + color: #2D2D2D; } } } + .nav-info{ + display: flex; + justify-content: space-between; + + } + .holder { margin-bottom: 32px; } diff --git a/src/app/_modules/pages/page/types/content/content-page.component.html b/src/app/_modules/pages/page/types/content/content-page.component.html index 1fe6646..030abdc 100644 --- a/src/app/_modules/pages/page/types/content/content-page.component.html +++ b/src/app/_modules/pages/page/types/content/content-page.component.html @@ -1,8 +1,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 f293d57..d15eb2c 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 a88aee5..a8f1197 100644 --- a/src/app/_modules/pages/sections/add/add-section.component.scss +++ b/src/app/_modules/pages/sections/add/add-section.component.scss @@ -2,75 +2,80 @@ position: relative; height: 24px; margin-bottom: 24px; - &:before { - position: absolute; - left: 0; - top: 11px; - width: 100%; - height: 2px; - background-color: #CFD1D4; - content: ''; - z-index: 0; - } + display: inline-block; + margin-top: 40px; .toggle { position: relative; - width: 24px; - height: 24px; - margin: 0 auto; - background: var(--white) url("~src/assets/images/icons/add_24dp.svg") no-repeat center; + padding-left: 32px; + // background: var(--white) url("~src/assets/images/icons/add_24dp.svg") no-repeat center; cursor: pointer; z-index: 1; + &:before { + display: inline-block; + width: 24px; + height: 24px; + background: var(--white) url("~src/assets/images/icons/add_circle_24.svg") no-repeat center; + content: ''; + z-index: 0; + bottom: -2px; + position: absolute; + left: 0px; + } + &:after { + display: inline-block; + width: 24px; + height: 24px; + background: var(--white) url("~src/assets/images/icons/arrow_drop_down_24dp.svg") no-repeat center; + content: ''; + z-index: 0; + bottom: -2px; + position: absolute; + right: -28px; + } } .dropdown { display: none; width: 250px; - left: calc(50% - 126px); - top: calc(100% + 8px); + left: 48px; + top: 24px; z-index: 10; &.active { display: block; } - &:before { - width: 250px; - height: 24px; - position: absolute; - left: 0; - top: -20px; - background: url("~src/assets/images/triangle.png") no-repeat center; - content: ''; - } - .menu { display: flex; flex-direction: column; margin: 0; padding: 0; - border-radius: 8px; + border-radius: 12px; position: relative; z-index: 30; .type { display: flex; flex-direction: column; + &:first-child { + border-radius: 12px 12px 0 0; + } + &:last-child { + border-radius: 0 0 12px 12px; + a, span { + border-bottom: none; + } + } .row { display: flex; flex-direction: row; justify-content: space-between; - padding: 12px 16px; + padding: 12px 20px; border-bottom: #E0E0E0 solid 1px; column-gap: 12px; cursor: pointer; - &:first-child { - border-radius: 8px 8px 0 0; - } - &:last-child { - border-radius: 0 0 8px 8px; - a, span { - border-bottom: none; - } - } + color: #2D2D2D; + + &:hover { background-color: #f7f7f7; } diff --git a/src/assets/css/forms.scss b/src/assets/css/forms.scss index 34b631e..b4c012c 100644 --- a/src/assets/css/forms.scss +++ b/src/assets/css/forms.scss @@ -40,7 +40,7 @@ input, select, textarea { content: ''; } &.active { - background-color: #F9B417; + background-color:var(--blue-1); &:before { transform: translateX(20px); } diff --git a/src/assets/images/icons/add_circle_24.svg b/src/assets/images/icons/add_circle_24.svg new file mode 100644 index 0000000..8d8f255 --- /dev/null +++ b/src/assets/images/icons/add_circle_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/arrow_drop_down_24dp.svg b/src/assets/images/icons/arrow_drop_down_24dp.svg index afb8b8d..b422e3a 100644 --- a/src/assets/images/icons/arrow_drop_down_24dp.svg +++ b/src/assets/images/icons/arrow_drop_down_24dp.svg @@ -1,10 +1,3 @@ - - - - - - - - + diff --git a/src/assets/images/icons/chevron_right_24dp.svg b/src/assets/images/icons/chevron_right_24dp.svg index 3778e3c..4127cfa 100644 --- a/src/assets/images/icons/chevron_right_24dp.svg +++ b/src/assets/images/icons/chevron_right_24dp.svg @@ -1,3 +1,3 @@ - - - + + + \ No newline at end of file