Add new images and update styles for visualization components
This commit is contained in:
Nalvazhuthi
@@ -28,12 +28,14 @@
|
||||
.toggle-header-container {
|
||||
@include flex-center;
|
||||
padding: 6px 12px;
|
||||
|
||||
.toggle-header-item {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 4px 12px;
|
||||
border-radius: #{$border-radius-large};
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
@@ -46,6 +48,7 @@
|
||||
padding: 8px 10px;
|
||||
background: var(--background-color);
|
||||
z-index: 1;
|
||||
|
||||
.search-container {
|
||||
@include flex-center;
|
||||
width: 100%;
|
||||
@@ -83,11 +86,13 @@
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
@@ -96,9 +101,11 @@
|
||||
.kebab-menu-container {
|
||||
position: relative;
|
||||
@include flex-center;
|
||||
|
||||
.kebab-icon {
|
||||
@include flex-center;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
@@ -109,6 +116,7 @@
|
||||
z-index: 1;
|
||||
padding: 8px 4px;
|
||||
width: 170px;
|
||||
|
||||
.menu-item {
|
||||
margin: 2px 0;
|
||||
padding: 2px 4px;
|
||||
@@ -116,25 +124,31 @@
|
||||
border-radius: #{$border-radius-small};
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-secondary);
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
@include flex-center;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
|
||||
path {
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: var(--highlight-accent-color);
|
||||
color: var(--accent-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
@@ -144,6 +158,7 @@
|
||||
.project-dropdowm-container {
|
||||
position: relative;
|
||||
height: 32px;
|
||||
|
||||
.project-name {
|
||||
line-height: 32px;
|
||||
height: 100%;
|
||||
@@ -158,6 +173,7 @@
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.dropdown-header {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -180,14 +196,17 @@
|
||||
left: 0;
|
||||
top: 110%;
|
||||
padding: 4px;
|
||||
|
||||
.dropdown-search {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.option {
|
||||
padding: 2px 4px;
|
||||
cursor: pointer;
|
||||
flex-direction: row !important;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
&:hover {
|
||||
color: var(--accent-color);
|
||||
background-color: var(--highlight-accent-color);
|
||||
@@ -203,6 +222,7 @@
|
||||
.input.default {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
.dropdown {
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
@@ -210,6 +230,7 @@
|
||||
background: var(--highlight-accent-color);
|
||||
border-radius: #{$border-radius-small};
|
||||
padding: 1px 4px;
|
||||
|
||||
.active-option {
|
||||
color: var(--accent-color);
|
||||
font-size: var(--font-size-small);
|
||||
@@ -223,6 +244,7 @@ input {
|
||||
border-radius: #{$border-radius-small};
|
||||
border: 1px solid var(--border-color);
|
||||
outline: none;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border: 1px solid var(--accent-color);
|
||||
@@ -232,14 +254,17 @@ input {
|
||||
.eye-dropper-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
width: 60%;
|
||||
position: relative;
|
||||
@include flex-center;
|
||||
gap: 4px;
|
||||
|
||||
.eye-picker-button {
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
@@ -248,6 +273,7 @@ input {
|
||||
background: var(--background-color-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--accent-color);
|
||||
}
|
||||
@@ -264,6 +290,13 @@ input {
|
||||
border: 1px solid var(--border-color) !important;
|
||||
padding: 5px 10px;
|
||||
|
||||
.label {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 80%;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// font-size: 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
@@ -295,9 +328,11 @@ input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
.nested-dropdown {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@@ -306,7 +341,7 @@ input {
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-regular);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
@@ -324,11 +359,12 @@ input {
|
||||
justify-content: space-between;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-regular);
|
||||
color: var(--text-color);
|
||||
transition: background-color 0.3s ease;
|
||||
border-radius: #{$border-radius-small};
|
||||
.arrow-container{
|
||||
|
||||
.arrow-container {
|
||||
@include flex-center;
|
||||
}
|
||||
|
||||
@@ -342,7 +378,7 @@ input {
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 12px;
|
||||
font-size: var(--font-size-small);
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
@@ -429,6 +465,7 @@ input {
|
||||
outline: 3px solid var(--accent-color);
|
||||
outline-offset: -3px;
|
||||
transform: translateY(-5px);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1) translateY(-5px);
|
||||
}
|
||||
@@ -530,6 +567,7 @@ input {
|
||||
.labeled-button-container {
|
||||
@include flex-space-between;
|
||||
padding: 6px 12px;
|
||||
|
||||
button {
|
||||
padding: 2px 32px;
|
||||
border: none;
|
||||
@@ -538,6 +576,7 @@ input {
|
||||
background: var(--accent-color);
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
@@ -548,12 +587,15 @@ input {
|
||||
margin-bottom: 6px;
|
||||
padding: 6px 12px;
|
||||
@include flex-space-between;
|
||||
|
||||
.label {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.regularDropdown-container {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.default {
|
||||
width: 60%;
|
||||
}
|
||||
@@ -562,6 +604,7 @@ input {
|
||||
.multi-email-invite-input-container {
|
||||
@include flex-space-between;
|
||||
gap: 20px;
|
||||
|
||||
.multi-email-invite-input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -571,24 +614,29 @@ input {
|
||||
flex-wrap: wrap;
|
||||
max-height: 180px;
|
||||
overflow: auto;
|
||||
|
||||
input {
|
||||
border: none;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--text-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
.entered-emails {
|
||||
@include flex-center;
|
||||
gap: 2px;
|
||||
background: var(--background-color-gray);
|
||||
padding: 0 4px;
|
||||
border-radius: #{$border-radius-large};
|
||||
|
||||
span {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
border-radius: #{$border-radius-small};
|
||||
|
||||
&:hover {
|
||||
background: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
@@ -596,13 +644,15 @@ input {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.invite-button {
|
||||
padding: 4px 12px;
|
||||
border-radius: #{$border-radius-large};
|
||||
background: var(--accent-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.multi-email-invite-input.active {
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user