mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-23 17:08:34 +00:00
Fixed Filter button active state issue (#7663)
* Fixed Filter button active state issue * Fixed icon size changes in active state issue
This commit is contained in:
Syed Abdul Rahman
GitHub
parent
a13ad5a6a9
commit
05b861ab29
1 changed files with 70 additions and 52 deletions
|
|
@ -12,6 +12,7 @@
|
|||
@import "./ui-operations.scss";
|
||||
@import 'react-loading-skeleton/dist/skeleton.css';
|
||||
@import './table-component.scss';
|
||||
|
||||
/* ibm-plex-sans-100 - latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
|
|
@ -269,7 +270,8 @@ button {
|
|||
.emoji-mart-scroll+.emoji-mart-bar {
|
||||
display: none;
|
||||
}
|
||||
.accordion-item{
|
||||
|
||||
.accordion-item {
|
||||
border: solid var(--slate5);
|
||||
border-width: 0px 0px 1px 0px;
|
||||
}
|
||||
|
|
@ -301,6 +303,7 @@ button {
|
|||
|
||||
.accordion-body {
|
||||
padding: 6px 16px 20px 16px !important;
|
||||
|
||||
.form-label {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
|
|
@ -327,7 +330,7 @@ button {
|
|||
|
||||
.resizer-select,
|
||||
.resizer-active {
|
||||
border: solid 1px $primary !important;
|
||||
border: solid 1px $primary !important;
|
||||
|
||||
.top-right,
|
||||
.top-left,
|
||||
|
|
@ -827,7 +830,7 @@ button {
|
|||
|
||||
.list-group.list-group-transparent.dark .all-apps-link,
|
||||
.list-group-item-action.dark.active {
|
||||
background-color: $dark-background !important;
|
||||
background-color: $dark-background !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1559,7 +1562,7 @@ button {
|
|||
.select-search-dark input {
|
||||
width: 224px !important;
|
||||
height: 32px !important;
|
||||
border-radius: $border-radius !important;
|
||||
border-radius: $border-radius !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1570,7 +1573,7 @@ button {
|
|||
.select-search__value input,
|
||||
.select-search-dark input {
|
||||
height: 32px !important;
|
||||
border-radius: $border-radius !important;
|
||||
border-radius: $border-radius !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1631,7 +1634,7 @@ button {
|
|||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: $border-radius !important;
|
||||
border-radius: $border-radius !important;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -1971,6 +1974,7 @@ button {
|
|||
text-align: center;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
// jet-table-footer is common class used in other components other than table
|
||||
.jet-table-footer {
|
||||
.table-footer {
|
||||
|
|
@ -2904,12 +2908,14 @@ input:focus-visible {
|
|||
width: 210px !important; //adjusted with padding
|
||||
box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08) !important;
|
||||
color: var(--slate12);
|
||||
|
||||
.flexbox-fix:nth-child(3) {
|
||||
div:nth-child(1) {
|
||||
input{
|
||||
input {
|
||||
width: 100% !important;
|
||||
}
|
||||
label{
|
||||
|
||||
label {
|
||||
color: var(--slate12) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -3085,6 +3091,7 @@ input:focus-visible {
|
|||
.DateRangePickerInput__withBorder {
|
||||
border: 1px solid #1f2936;
|
||||
}
|
||||
|
||||
.main .canvas-container .canvas-area {
|
||||
background: #2f3c4c;
|
||||
}
|
||||
|
|
@ -3673,7 +3680,7 @@ input[type="text"] {
|
|||
|
||||
.nav-tabs .nav-link.active {
|
||||
font-weight: 400 !important;
|
||||
color: $primary !important;
|
||||
color: $primary !important;
|
||||
}
|
||||
|
||||
.empty {
|
||||
|
|
@ -4199,7 +4206,7 @@ input[type="text"] {
|
|||
|
||||
.tabs-inspector.dark {
|
||||
.nav-link.active {
|
||||
border-bottom: 1px solid $primary !important;
|
||||
border-bottom: 1px solid $primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4448,7 +4455,7 @@ input[type="text"] {
|
|||
}
|
||||
|
||||
input {
|
||||
border-radius: $border-radius !important;
|
||||
border-radius: $border-radius !important;
|
||||
padding-left: 1.75rem !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -4617,8 +4624,8 @@ input[type="text"] {
|
|||
}
|
||||
|
||||
.modal-content.home-modal-component.dark {
|
||||
background-color: $bg-dark-light !important;
|
||||
color: $white !important;
|
||||
background-color: $bg-dark-light !important;
|
||||
color: $white !important;
|
||||
|
||||
.modal-title {
|
||||
color: $white !important;
|
||||
|
|
@ -4651,22 +4658,22 @@ input[type="text"] {
|
|||
}
|
||||
|
||||
.form-control {
|
||||
border-color: $border-grey-dark !important;
|
||||
border-color: $border-grey-dark !important;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: $bg-dark-light !important;
|
||||
background-color: $bg-dark-light !important;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
background-color: $bg-dark !important;
|
||||
color: $white !important;
|
||||
border-color: $border-grey-dark !important;
|
||||
background-color: $bg-dark !important;
|
||||
color: $white !important;
|
||||
border-color: $border-grey-dark !important;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: $white !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4977,7 +4984,7 @@ div#driver-page-overlay {
|
|||
}
|
||||
|
||||
.dark-theme-walkthrough#driver-popover-item {
|
||||
background-color: $bg-dark-light !important;
|
||||
background-color: $bg-dark-light !important;
|
||||
border-color: rgba(101, 109, 119, 0.16) !important;
|
||||
|
||||
.driver-popover-title {
|
||||
|
|
@ -4985,7 +4992,7 @@ div#driver-page-overlay {
|
|||
}
|
||||
|
||||
.driver-popover-tip {
|
||||
border-color: transparent transparent transparent $bg-dark-light !important;
|
||||
border-color: transparent transparent transparent $bg-dark-light !important;
|
||||
}
|
||||
|
||||
.driver-popover-description {
|
||||
|
|
@ -5017,7 +5024,7 @@ div#driver-page-overlay {
|
|||
|
||||
.driver-next-btn,
|
||||
.driver-prev-btn {
|
||||
color: $primary !important;
|
||||
color: $primary !important;
|
||||
}
|
||||
|
||||
.driver-disabled {
|
||||
|
|
@ -5141,7 +5148,7 @@ div#driver-page-overlay {
|
|||
}
|
||||
|
||||
.fx-canvas {
|
||||
background:var(--slate4);
|
||||
background: var(--slate4);
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
height: 32px;
|
||||
|
|
@ -5153,7 +5160,7 @@ div#driver-page-overlay {
|
|||
align-items: center;
|
||||
|
||||
div {
|
||||
background:var(--slate4) !important;
|
||||
background: var(--slate4) !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -5161,6 +5168,7 @@ div#driver-page-overlay {
|
|||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.org-name {
|
||||
color: var(--slate12) !important;
|
||||
font-size: 12px;
|
||||
|
|
@ -5489,7 +5497,7 @@ div#driver-page-overlay {
|
|||
}
|
||||
|
||||
.selected-node {
|
||||
border-color: $primary-light !important;
|
||||
border-color: $primary-light !important;
|
||||
}
|
||||
|
||||
.json-tree-icon-container .selected-node>svg:first-child {
|
||||
|
|
@ -5580,7 +5588,7 @@ div#driver-page-overlay {
|
|||
}
|
||||
|
||||
.selected-node {
|
||||
border-color: $primary-light !important;
|
||||
border-color: $primary-light !important;
|
||||
}
|
||||
|
||||
.selected-node .group-object-container .badge {
|
||||
|
|
@ -5898,7 +5906,7 @@ div#driver-page-overlay {
|
|||
|
||||
//Kanban board
|
||||
.kanban-container.dark-themed {
|
||||
background-color: $bg-dark-light !important;
|
||||
background-color: $bg-dark-light !important;
|
||||
|
||||
.kanban-column {
|
||||
.card-header {
|
||||
|
|
@ -5944,7 +5952,7 @@ div#driver-page-overlay {
|
|||
}
|
||||
|
||||
.dnd-card.card.card-dark {
|
||||
background-color: $bg-dark !important;
|
||||
background-color: $bg-dark !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -7182,7 +7190,7 @@ tbody {
|
|||
}
|
||||
|
||||
.application-brand {
|
||||
a{
|
||||
a {
|
||||
height: 48px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -7940,8 +7948,9 @@ tbody {
|
|||
width: 240px;
|
||||
height: 28px;
|
||||
flex-direction: row;
|
||||
div{
|
||||
a{
|
||||
|
||||
div {
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -8786,7 +8795,7 @@ tbody {
|
|||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
padding: 4px 16px !important;
|
||||
//padding: 4px 16px !important;
|
||||
width: 100% !important;
|
||||
height: 28px !important;
|
||||
background: var(--grass2) !important;
|
||||
|
|
@ -8799,7 +8808,7 @@ tbody {
|
|||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
padding: 4px 16px !important;
|
||||
//padding: 4px 16px !important;
|
||||
width: 100% !important;
|
||||
height: 28px !important;
|
||||
border-radius: 6px !important;
|
||||
|
|
@ -10226,7 +10235,7 @@ tbody {
|
|||
border-radius: 6px !important;
|
||||
margin-bottom: 4px !important;
|
||||
color: var(--slate12) !important;
|
||||
transition:none;
|
||||
transition: none;
|
||||
|
||||
|
||||
&:hover {
|
||||
|
|
@ -10250,13 +10259,15 @@ tbody {
|
|||
box-shadow: 0 0 0 1000px var(--base) inset !important;
|
||||
-webkit-text-fill-color: var(--slate12) !important;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1000px var(--slate1) inset !important;
|
||||
-webkit-text-fill-color: var(--slate12) !important;}
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1000px var(--slate1) inset !important;
|
||||
-webkit-text-fill-color: var(--slate12) !important;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 1000px var(--indigo2) inset !important;
|
||||
-webkit-text-fill-color: var(--slate12) !important;}
|
||||
-webkit-text-fill-color: var(--slate12) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -11822,14 +11833,17 @@ tbody {
|
|||
width: 170px !important;
|
||||
}
|
||||
}
|
||||
.custom-gap-8{
|
||||
|
||||
.custom-gap-8 {
|
||||
gap: 8px;
|
||||
}
|
||||
.color-slate-11{
|
||||
|
||||
.color-slate-11 {
|
||||
color: var(--slate11) !important;
|
||||
}
|
||||
.custom-gap-6{
|
||||
gap:6px
|
||||
|
||||
.custom-gap-6 {
|
||||
gap: 6px
|
||||
}
|
||||
|
||||
// ToolJet Database buttons
|
||||
|
|
@ -11839,22 +11853,26 @@ tbody {
|
|||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.custom-gap-2{
|
||||
gap:2px
|
||||
.custom-gap-2 {
|
||||
gap: 2px
|
||||
}
|
||||
.custom-gap-4{
|
||||
|
||||
.custom-gap-4 {
|
||||
gap: 4px;
|
||||
}
|
||||
.text-black-000{
|
||||
|
||||
.text-black-000 {
|
||||
color: var(--text-black-000) !important;
|
||||
}
|
||||
.custom-gap-12{
|
||||
gap:12px
|
||||
|
||||
.custom-gap-12 {
|
||||
gap: 12px
|
||||
}
|
||||
#inspector-tabpane-properties{
|
||||
|
||||
#inspector-tabpane-properties {
|
||||
.accordion {
|
||||
.accordion-item:last-child{
|
||||
.accordion-item:last-child {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue