mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-01 18:37:31 +00:00
08d5cc9390
* initial commit * fix * Fixes * Fix dropping widget width while dragging * Fix group selection in form * fix when dropping a component, shadow is coming on top of component manager. * improve performace on useGroupedTargetsScrollHandler * Fix * Revamp pages in editor and viewer * bug fixes * merge base * fix conflicts * fix conflicts * bug fixes * bug fixes * fix: pages icon and layout for right sidebar * fix: styling for pages menu * fix base styling * merge base * bug fixes * bug fixes * fix top styling of nav bar * add border to canvas * bug fixes * bug fixes * update reference * bug fix --------- Co-authored-by: Nakul Nagargade <nakul@tooljet.com>
543 lines
No EOL
8.9 KiB
SCSS
543 lines
No EOL
8.9 KiB
SCSS
$base-border-radius: 6px;
|
|
$btn-bg: #FFFFFF;
|
|
$btn-color: #11181C;
|
|
|
|
$btn-dark-bg: #121212;
|
|
$btn-dark-color: #FFFFFF;
|
|
|
|
|
|
|
|
@mixin button($bg, $color) {
|
|
background-color: $bg;
|
|
color: $color;
|
|
border-radius: $base-border-radius;
|
|
border: none;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease-in-out;
|
|
|
|
&:hover {
|
|
@if $bg !=none {
|
|
background-color: darken($bg, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.base-button {
|
|
@include button($btn-bg, $btn-color);
|
|
|
|
& {
|
|
border-radius: $base-border-radius;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 4px 16px;
|
|
border: 1px solid #D7DBDF;
|
|
|
|
}
|
|
}
|
|
|
|
.base-button.dark {
|
|
background: $btn-dark-bg;
|
|
color: $btn-dark-color;
|
|
border-color: #11181C;
|
|
|
|
&:hover {
|
|
background: lighten($btn-dark-bg, 10%);
|
|
border-color: #D7DBDF !important;
|
|
}
|
|
|
|
img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
|
|
.unstyled-button {
|
|
@include button(none, inherit);
|
|
|
|
& {
|
|
border: none;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
|
|
.unstyled-button.dark {
|
|
color: #FFFFFF;
|
|
|
|
img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
|
|
|
|
.page-handle-button-container {
|
|
border-radius: $base-border-radius;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: left;
|
|
align-items: center;
|
|
padding: 6px 8px;
|
|
border: 1px solid #D7DBDF;
|
|
height: 32px;
|
|
|
|
img {
|
|
position: absolute;
|
|
right: 0 !important;
|
|
margin-right: 1.5rem !important;
|
|
filter: invert(38%) sepia(85%) saturate(5221%) hue-rotate(217deg) brightness(91%) contrast(90%);
|
|
}
|
|
}
|
|
|
|
.popover-dark-themed .page-handle-button-container {
|
|
border-color: #697177;
|
|
|
|
img {
|
|
filter: invert(95%) sepia(38%) saturate(4716%) hue-rotate(180deg) brightness(113%) contrast(102%);
|
|
}
|
|
}
|
|
|
|
.leftsidebar-panel-header {
|
|
padding: 12px 16px 0px 16px;
|
|
|
|
|
|
.panel-header-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.add-new-page {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
}
|
|
|
|
.panel-search-container {
|
|
padding: 12px 0px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.page-selector-panel-body {
|
|
border-right: 1px solid #DFE3E6;
|
|
padding-left:16px;
|
|
padding-right:16px;
|
|
|
|
&.dark-theme {
|
|
border-right: 1px solid var(--slate7);
|
|
}
|
|
|
|
.page-handler {
|
|
width: 100% !important;
|
|
padding: 0;
|
|
// margin-bottom: 9px;
|
|
font-weight: 500;
|
|
|
|
.card {
|
|
background: none;
|
|
}
|
|
|
|
.option-icon {
|
|
width: 25px;
|
|
background: var(--slate1);
|
|
height: 25px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--slate7);
|
|
padding: 0px;
|
|
visibility: unset !important;
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
.card,
|
|
.card-body {
|
|
|
|
.page-name {
|
|
color: var(--slate12);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.card.active {
|
|
background: var(--slate5);
|
|
gap: 0px;
|
|
}
|
|
|
|
.card.non-active-page {
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.card:hover {
|
|
background: var(--slate4);
|
|
}
|
|
|
|
.card:focus {
|
|
border-radius: 6px;
|
|
background: var(--slate1, #FBFCFD);
|
|
/* Focus rings/Gray/light */
|
|
box-shadow: 0px 0px 0px 4px #DFE3E6;
|
|
}
|
|
|
|
.page-name-input {
|
|
height: 32px;
|
|
margin-bottom: 0px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.left-sidebar-page-selector.dark {
|
|
background: #1F2936 !important;
|
|
|
|
.clear-icon {
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
|
|
#page-handler-menu.global-settings {
|
|
min-height: 124px;
|
|
padding: 6px;
|
|
}
|
|
|
|
#page-handler-menu {
|
|
border-radius: 4px;
|
|
width: 238px;
|
|
margin-top: 0.2rem !important;
|
|
margin-left: 0.5rem !important;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--slate3, #F1F3F5);
|
|
box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
|
|
background-color: var(--base);
|
|
|
|
.popover-body {
|
|
padding: 16px 6px 0px 6px;
|
|
height: 100%;
|
|
color: var(--slate12);
|
|
|
|
|
|
.card-body {
|
|
padding: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.field {
|
|
font-weight: 500;
|
|
font-size: 0.7rem;
|
|
|
|
&:hover {
|
|
color: #919eab;
|
|
}
|
|
|
|
&__danger {
|
|
color: #ff6666;
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-permission-btn {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 5px;
|
|
cursor: pointer !important;
|
|
pointer-events: unset !important;
|
|
|
|
&.disabled {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
svg {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notification-dot {
|
|
position: absolute;
|
|
top: -4px;
|
|
right: -4px;
|
|
width: 14px;
|
|
height: 14px;
|
|
background-color: var(--indigo9);
|
|
border-radius: 50%;
|
|
border: 3px solid var(--base);
|
|
}
|
|
|
|
.query-manager-sort-filter-popup {
|
|
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03) !important;
|
|
}
|
|
|
|
.page-icons {
|
|
position: relative;
|
|
left: 1rem;
|
|
|
|
img {
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
|
|
.delete-folder-modal {
|
|
&.dark-theme {
|
|
.delete-all-button {
|
|
&:hover {
|
|
background: #fff;
|
|
box-shadow: none;
|
|
border: 1px solid rgb(77, 114, 250);
|
|
}
|
|
}
|
|
}
|
|
|
|
.delete-all-button {
|
|
margin: 0;
|
|
border-radius: 6px;
|
|
border: 1px solid#CCD1D5;
|
|
background: #FFF;
|
|
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.10);
|
|
padding: 5px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
|
|
&:hover {
|
|
background: rgba(172, 178, 185, 0.30);
|
|
box-shadow: none;
|
|
|
|
}
|
|
|
|
span {
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
line-height: 18px;
|
|
/* 150% */
|
|
}
|
|
|
|
&.danger {
|
|
border-radius: 6px;
|
|
background: #D72D39;
|
|
border: none;
|
|
|
|
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.10);
|
|
|
|
span {
|
|
color: #fff;
|
|
}
|
|
|
|
&:hover {
|
|
border: none;
|
|
background: #B5121D;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.modal-dialog {
|
|
width: 408px;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 16px 0;
|
|
font-size: 12px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.modal-content {
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 0;
|
|
min-height: unset;
|
|
border: none;
|
|
background-color: transparent;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.modal-footer {
|
|
margin: 0;
|
|
padding: 0;
|
|
justify-content: unset;
|
|
gap: 8px;
|
|
}
|
|
}
|
|
|
|
.page-handler-alert {
|
|
background-color: var(--slate2) !important;
|
|
border: 1px solid var(--slate5) !important;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.copilot-alert {
|
|
background-color: var(--slate2) !important;
|
|
border: 1px solid var(--slate5) !important;
|
|
}
|
|
|
|
.page-handle-edit-container {
|
|
height: 60px;
|
|
width: 100%;
|
|
|
|
.input-group {
|
|
height: 42px;
|
|
padding: 2px;
|
|
|
|
}
|
|
|
|
|
|
input {
|
|
background-color: var(--base);
|
|
color: var(--slate12);
|
|
|
|
&:focus {
|
|
background-color: var(--base);
|
|
}
|
|
}
|
|
|
|
.input-group-text {
|
|
border: none;
|
|
background: none;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.page-handler-input {
|
|
border-radius: $base-border-radius !important;
|
|
}
|
|
}
|
|
|
|
.page-handle-edit-modal.theme-dark {
|
|
background: none !important;
|
|
|
|
.input-group-text {
|
|
border: none !important;
|
|
background: none !important;
|
|
;
|
|
}
|
|
}
|
|
|
|
|
|
.page-handle-tip {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.delete-btn.field__danger {
|
|
img {
|
|
filter: invert(37%) sepia(50%) saturate(2105%) hue-rotate(342deg) brightness(93%) contrast(93%);
|
|
}
|
|
}
|
|
|
|
.clear-icon {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.secondary-text {
|
|
color: #687076;
|
|
}
|
|
|
|
|
|
.DragHandle {
|
|
display: flex;
|
|
width: 12px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
touch-action: none;
|
|
cursor: grab !important;
|
|
border-radius: 5px;
|
|
border: none;
|
|
outline: none;
|
|
appearance: none;
|
|
background-color: transparent;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.DragHandle svg {
|
|
flex: 0 0 auto;
|
|
margin: auto;
|
|
height: 100%;
|
|
overflow: visible;
|
|
fill: #919eab;
|
|
}
|
|
|
|
|
|
#popover-change-scope {
|
|
border: 1px solid rgba(101, 109, 119, 0.16);
|
|
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.25);
|
|
background: var(--base) !important;
|
|
}
|
|
|
|
.tj-badge {
|
|
background: #F0F4FF;
|
|
color: #3E63DD;
|
|
font-family: 'Inter', sans-serif;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
#page-handler-menu.global-settings {
|
|
background-color: var(--base);
|
|
border: none;
|
|
|
|
.popover-body {
|
|
color: var(--slate12);
|
|
}
|
|
|
|
}
|
|
|
|
#inspector-tabpane-properties .code-hinter textarea {
|
|
border: 0;
|
|
overflow: hidden;
|
|
max-height: 22.5px;
|
|
}
|
|
|
|
// Style for Chart component
|
|
.widget-chart {
|
|
.js-plotly-plot {
|
|
border-radius: inherit;
|
|
|
|
.plot-container {
|
|
border-radius: inherit;
|
|
|
|
.svg-container {
|
|
border-radius: inherit;
|
|
|
|
.main-svg {
|
|
border-radius: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//[Container-widget]Show scrollbar only on hover
|
|
.widget-type-container {
|
|
overflow: hidden auto;
|
|
scrollbar-width: none;
|
|
|
|
&:hover {
|
|
scrollbar-width: auto;
|
|
}
|
|
} |