style(home): polish pill and filter hover effects across workspaces, filter menu, rule chips, and options
This commit is contained in:
@@ -228,17 +228,26 @@ input[type="search"]::-webkit-search-results-decoration,
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
transition: background-color .15s cubic-bezier(0.4,0,0.2,1), border-color .15s cubic-bezier(0.4,0,0.2,1);
|
transition: background-color .15s cubic-bezier(0.4,0,0.2,1), border-color .15s cubic-bezier(0.4,0,0.2,1), color .15s ease, box-shadow .15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .workspace-pills > a:hover {
|
.application-body .workspace-pills > a:hover {
|
||||||
background: #fff;
|
background: #f1f4fe;
|
||||||
border-color: #ececec;
|
border-color: #dbe4ff;
|
||||||
|
color: #050841;
|
||||||
|
box-shadow: 0 1px 3px rgba(61, 93, 246, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .workspace-pills > a.active {
|
.application-body .workspace-pills > a.active {
|
||||||
background: #DBE4FF;
|
background: #DBE4FF;
|
||||||
border-color: #DBE4FF;
|
border-color: #DBE4FF;
|
||||||
|
color: #111a49;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-body .workspace-pills > a.active:hover {
|
||||||
|
background: #cbd8ff;
|
||||||
|
border-color: #cbd8ff;
|
||||||
|
color: #050841;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .workspace-pills > a small {
|
.application-body .workspace-pills > a small {
|
||||||
@@ -246,6 +255,11 @@ input[type="search"]::-webkit-search-results-decoration,
|
|||||||
color: #a5a9c1;
|
color: #a5a9c1;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
transition: color .15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-body .workspace-pills > a:hover small {
|
||||||
|
color: #8b93a7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .workspace-pills > a .workspace-pill-icon {
|
.application-body .workspace-pills > a .workspace-pill-icon {
|
||||||
@@ -321,18 +335,26 @@ input[type="search"]::-webkit-search-results-decoration,
|
|||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
|
transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease, border-color 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .workspace-filter-btn:hover {
|
.application-body .workspace-filter-btn:hover {
|
||||||
background: rgba(5, 8, 65, 0.04);
|
background: #f1f4fe;
|
||||||
|
border-color: #dbe4ff;
|
||||||
|
color: #3d5df6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .workspace-filter-btn.active {
|
.application-body .workspace-filter-btn.active {
|
||||||
background: #edf2ff;
|
background: #edf2ff;
|
||||||
color: #3d5df6;
|
color: #3d5df6;
|
||||||
border-color: #dbe4ff;
|
border-color: #dbe4ff;
|
||||||
font-weight: 400;
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-body .workspace-filter-btn.active:hover {
|
||||||
|
background: #dbe4ff;
|
||||||
|
border-color: #c4d4ff;
|
||||||
|
color: #2b4cd6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .workspace-filter-menu-popover {
|
.application-body .workspace-filter-menu-popover {
|
||||||
@@ -381,11 +403,16 @@ input[type="search"]::-webkit-search-results-decoration,
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.12s ease;
|
transition: background-color 0.12s ease, color 0.12s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .filter-menu-item:hover {
|
.application-body .filter-menu-item:hover {
|
||||||
background: #f8faff;
|
background: #f1f4fe;
|
||||||
|
color: #3d5df6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-body .filter-menu-item:hover .filter-item-plus {
|
||||||
|
color: #3d5df6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .filter-menu-item.active {
|
.application-body .filter-menu-item.active {
|
||||||
@@ -418,6 +445,7 @@ input[type="search"]::-webkit-search-results-decoration,
|
|||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
color: #a5a9c1;
|
color: #a5a9c1;
|
||||||
|
transition: color 0.12s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .filter-item-plus svg {
|
.application-body .filter-item-plus svg {
|
||||||
@@ -440,6 +468,12 @@ input[type="search"]::-webkit-search-results-decoration,
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
|
transition: color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-body .filter-clear-all-btn:hover:not(:disabled) {
|
||||||
|
color: #1e3bb8;
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .filter-clear-all-btn:disabled {
|
.application-body .filter-clear-all-btn:disabled {
|
||||||
@@ -483,8 +517,14 @@ input[type="search"]::-webkit-search-results-decoration,
|
|||||||
transition: all 0.15s ease;
|
transition: all 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.application-body .filter-rule-chip:hover {
|
||||||
|
border-color: #2b4cd6;
|
||||||
|
box-shadow: 0 2px 6px rgba(61, 93, 246, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
.application-body .filter-rule-chip.open {
|
.application-body .filter-rule-chip.open {
|
||||||
background: #edf2ff;
|
background: #edf2ff;
|
||||||
|
border-color: #3d5df6;
|
||||||
box-shadow: 0 0 0 2px rgba(61, 93, 246, 0.18);
|
box-shadow: 0 0 0 2px rgba(61, 93, 246, 0.18);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -501,6 +541,15 @@ input[type="search"]::-webkit-search-results-decoration,
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: background-color 0.12s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-body .filter-rule-chip-main:hover {
|
||||||
|
background: #f4f7fe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-body .filter-rule-chip.open .filter-rule-chip-main:hover {
|
||||||
|
background: #e2ebff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .filter-chip-icon {
|
.application-body .filter-chip-icon {
|
||||||
@@ -545,11 +594,16 @@ input[type="search"]::-webkit-search-results-decoration,
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
color: #3d5df6;
|
color: #3d5df6;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.12s ease;
|
transition: background-color 0.12s ease, color 0.12s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .filter-rule-chip-close:hover {
|
.application-body .filter-rule-chip-close:hover {
|
||||||
background: rgba(61, 93, 246, 0.08);
|
background: #edf2ff;
|
||||||
|
color: #1e3bb8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.application-body .filter-rule-chip.open .filter-rule-chip-close:hover {
|
||||||
|
background: #dbe4ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .filter-rule-chip-close svg {
|
.application-body .filter-rule-chip-close svg {
|
||||||
@@ -621,11 +675,12 @@ input[type="search"]::-webkit-search-results-decoration,
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.12s ease;
|
transition: background-color 0.12s ease, color 0.12s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .filter-chip-option-label:hover {
|
.application-body .filter-chip-option-label:hover {
|
||||||
background: #f8faff;
|
background: #f1f4fe;
|
||||||
|
color: #3d5df6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.application-body .filter-chip-option-label input[type="checkbox"] {
|
.application-body .filter-chip-option-label input[type="checkbox"] {
|
||||||
|
|||||||
Reference in New Issue
Block a user