Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pages tree fix

master
Boris Voropaev 2023-12-18 15:14:30 +03:00
parent 8a745e9f07
commit 1344166fa4
5 changed files with 413 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
src/app/_modules/form-fields/types/relation/form-field-relation.component.scss
View File

@ -1,199 +0,0 @@
.combobox {
position: relative;
font-family: "PT Sans";
border: solid 1px var(--second-dis);
border-radius: 12px;
font-size: 20px;
color: var(--second-act);
padding: 8px 12px 8px 16px;
background: no-repeat left 16px center / 173px 19px url('~src/assets/images/icons/placeholder.svg');
&:hover{
border-color: var(--second);
outline: none;
}
&.active {
border-color: var(--prime);
outline: none;
}
&:disabled{
border-color: #EDEDED;
outline: none;
}
.toggle {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 24px;
font-size: 20px;
box-sizing: border-box;
cursor: pointer;
.caption {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
background-color: #ffffff;
p {
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
&.faded {
font-size: 0.875rem;
color: #7f7f7f;
}
}
}
.filter {
display: none;
width: 100%;
input {
width: 100%;
padding: 8px 0;
border: 0;
}
}
&:after {
display: block;
width: 24px;
height: 20px;
margin-left: auto;
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 {
display: none;
position: absolute;
top: calc(100% + 1px);
left: -1px;
width: calc(100% + 2px);
margin-bottom: 50px;
background-color: #ffffff;
border: #dfdfdf solid 1px;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px 0;
overflow: hidden;
z-index: 100;
ul {
padding: 0;
margin: 0;
max-height: 280px;
overflow: auto;
-webkit-overflow-scrolling: touch;
.empty {
padding: 10px 16px;
background-color: #f7f7f7;
color: #7f7f7f;
.add {
display: block;
color: #2c86cd;
cursor: pointer;
}
}
li {
.title {
padding: 10px 16px;
border-bottom: #dfdfdf solid 1px;
cursor: pointer;
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
padding: 0;
&.faded {
font-size: 0.875rem;
color: #7f7f7f;
}
}
&:hover {
background-color: #f7f7f7;
}
&.selected {
background-color: #e3eff9;
}
}
}
}
}
&.active {
.toggle {
.caption {
display: none;
}
.filter {
display: block;
}
&::after {
transform: rotateZ(180deg);
}
}
.dropdown {
display: block;
}
}
}
.values {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.item {
display: flex;
flex-direction: row;
align-items: center;
padding: 4px 8px 4px 12px;
margin: 8px 8px 0 0;
background-color: #E3EFF9;
border-radius: 16px;
.name {
padding-right: 8px;
font-size: 0.875rem;
line-height: 20px;
p {
margin: 0;
}
.faded {
color: #7f7f7f;
}
}
.remove {
width: 16px;
height: 16px;
padding: 0;
margin: auto;
border: none;
//background: transparent url('~src/assets/images/icons/close_16dp.svg') 50% 50% no-repeat;
cursor: pointer;
}
}
}

203
src/assets/css/_forms.scss
View File

@ -376,4 +376,205 @@ auth-page, auth-modal{
}
}
}
}
.combobox {
position: relative;
font-family: "PT Sans";
border: solid 1px var(--second-dis);
border-radius: 12px;
font-size: 20px;
color: var(--second-act);
padding: 8px 12px 8px 16px;
background: no-repeat left 16px center / 173px 19px url('~src/assets/images/icons/placeholder.svg');
&:hover{
border-color: var(--second);
outline: none;
}
&.active {
border-color: var(--prime);
outline: none;
}
&:disabled{
border-color: #EDEDED;
outline: none;
}
.toggle {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 24px;
font-size: 20px;
box-sizing: border-box;
cursor: pointer;
.caption {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
background-color: #ffffff;
p {
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
&.faded {
font-size: 0.875rem;
color: #7f7f7f;
}
}
}
.filter {
display: none;
width: 100%;
input {
width: 100%;
padding: 8px 0;
border: 0;
}
}
&:after {
display: block;
width: 24px;
height: 20px;
margin-left: auto;
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 {
display: none;
position: absolute;
top: calc(100% + 1px);
left: -1px;
width: calc(100% + 2px);
margin-bottom: 50px;
background-color: #ffffff;
border: #dfdfdf solid 1px;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px 0;
overflow: hidden;
z-index: 100;
ul {
padding: 0;
margin: 0;
max-height: 280px;
overflow: auto;
-webkit-overflow-scrolling: touch;
.empty {
padding: 10px 16px;
background-color: #f7f7f7;
color: #7f7f7f;
.add {
display: block;
color: #2c86cd;
cursor: pointer;
}
}
li {
.title {
padding: 10px 16px;
border-bottom: #dfdfdf solid 1px;
cursor: pointer;
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
padding: 0;
&.faded {
font-size: 0.875rem;
color: #7f7f7f;
}
}
&:hover {
background-color: #f7f7f7;
}
&.selected {
background-color: #e3eff9;
}
}
}
}
}
&.active {
.toggle {
.caption {
display: none;
}
.filter {
display: block;
}
&::after {
transform: rotateZ(180deg);
}
}
.dropdown {
display: block;
}
}
}
.values {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.item {
display: flex;
flex-direction: row;
align-items: center;
padding: 4px 8px 4px 12px;
margin: 8px 8px 0 0;
background-color: #E3EFF9;
border-radius: 16px;
.name {
padding-right: 8px;
font-size: 0.875rem;
line-height: 20px;
p {
margin: 0;
}
.faded {
color: #7f7f7f;
}
}
.remove {
width: 16px;
height: 16px;
padding: 0;
margin: auto;
border: none;
//background: transparent url('~src/assets/images/icons/close_16dp.svg') 50% 50% no-repeat;
cursor: pointer;
}
}
}

4
src/vniigaz-v2/css/_admin.scss
View File

@ -104,10 +104,11 @@ pages-tree{
flex-direction: row;
align-items: center;
border-bottom: solid var(--second-dis) 1px;
height: 64px;
.left {
cursor: pointer;
width: 24px;
flex-shrink: 0;
}
.mid {
flex-grow: 1;
@ -140,6 +141,7 @@ pages-tree{
display: flex;
flex-direction: column;
height: 100%;
padding: 20px 0;
a {
color: var(--dadk);
&:nth-child(2){

207
src/vniigaz-v2/css/_basics.scss
View File

@ -468,4 +468,209 @@ modal{
border-top: 1px solid var(--second-dis);
}
}
}
}
.combobox {
position: relative;
font-family: "PT Sans";
border: solid 1px var(--second-dis);
border-radius: 12px;
font-size: 20px;
color: var(--second-act);
padding: 8px 12px 8px 16px;
background: no-repeat left 16px center / 140px 16px url('~src/assets/images/icons/placeholder.svg');
&:hover{
border-color: var(--second);
outline: none;
}
&.active {
border-color: var(--prime);
outline: none;
}
&:disabled{
border-color: #EDEDED;
outline: none;
}
.toggle {
font-family: PT Sans;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 24px;
font-size: 20px;
box-sizing: border-box;
cursor: pointer;
.caption {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
background-color: #ffffff;
p {
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
&.faded {
color: #7f7f7f;
}
}
}
.filter {
display: none;
width: 100%;
input {
width: 100%;
padding: 8px 0;
border: 0;
}
}
&:after {
display: block;
width: 24px;
height: 20px;
margin-left: auto;
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 {
display: none;
position: absolute;
top: calc(100% + 1px);
left: -1px;
width: calc(100% + 2px);
margin-bottom: 50px;
background-color: #ffffff;
border: #dfdfdf solid 1px;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px 0;
overflow: hidden;
z-index: 100;
ul {
padding: 0;
margin: 0;
max-height: 280px;
overflow: auto;
-webkit-overflow-scrolling: touch;
.empty {
padding: 10px 16px;
background-color: #f7f7f7;
color: #7f7f7f;
.add {
display: block;
color: #2c86cd;
cursor: pointer;
}
}
li {
.title {
padding: 8px 16px;
border-bottom: #dfdfdf solid 1px;
margin: 0 !important;
cursor: pointer;
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
padding: 0;
font-size: 16px;
&.faded {
color: #7f7f7f;
}
}
&:hover {
background-color: #f7f7f7;
}
&.selected {
background-color: #e3eff9;
}
}
}
}
}
&.active {
.toggle {
.caption {
display: none;
}
.filter {
display: block;
}
&::after {
transform: rotateZ(180deg);
}
}
.dropdown {
display: block;
}
}
}
.values {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
.item {
display: flex;
flex-direction: row;
align-items: center;
padding: 4px 8px 4px 12px;
margin: 8px 8px 0 0;
background-color: #E3EFF9;
border-radius: 16px;
.name {
padding-right: 8px;
line-height: 20px;
p {
margin: 0;
}
.faded {
color: #7f7f7f;
}
}
.remove {
width: 16px;
height: 16px;
padding: 0;
margin: auto;
border: none;
//background: transparent url('~src/assets/images/icons/close_16dp.svg') 50% 50% no-repeat;
cursor: pointer;
}
}
}

3
src/vniigaz-v2/css/_slider.scss
View File

@ -149,9 +149,10 @@
font-weight: 400;
line-height: 24px;
}
input, .combobox{
input{
height: 40px;
}
}
}
}