initial v0.8 pre-release
This commit is contained in:
Gani Georgiev
+27
-22
@@ -56,6 +56,7 @@
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.focus,
|
||||
&:focus-visible {
|
||||
&:after {
|
||||
color: var(--txtPrimaryColor);
|
||||
@@ -81,16 +82,20 @@
|
||||
background: var(--baseAlt1Color);
|
||||
}
|
||||
}
|
||||
&.drag-over {
|
||||
.accordion-header {
|
||||
background: var(--bodyColor);
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
@include shadowize();
|
||||
.accordion-header {
|
||||
color: var(--baseColor);
|
||||
box-shadow: 0px 0px 0px 1px var(--primaryColor);
|
||||
box-shadow: 0px 0px 0px 1px var(--baseAlt2Color);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
background: var(--primaryColor);
|
||||
background: var(--bodyColor);
|
||||
&.interactive{
|
||||
background: var(--primaryColor);
|
||||
background: var(--bodyColor);
|
||||
&:after {
|
||||
color: inherit;
|
||||
content: '\ea78';
|
||||
@@ -107,28 +112,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// wrapper
|
||||
.accordions {
|
||||
.accordion {
|
||||
border-radius: 0;
|
||||
margin: -1px 0 0;
|
||||
&.active {
|
||||
border-radius: var(--baseRadius);
|
||||
margin: var(--smSpacing) 0;
|
||||
+ .accordion {
|
||||
border-top-left-radius: var(--baseRadius);
|
||||
border-top-right-radius: var(--baseRadius);
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
border-top-left-radius: var(--baseRadius);
|
||||
border-top-right-radius: var(--baseRadius);
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom-left-radius: var(--baseRadius);
|
||||
border-bottom-right-radius: var(--baseRadius);
|
||||
}
|
||||
}
|
||||
& > .accordion.active,
|
||||
& > .accordion-wrapper > .accordion.active {
|
||||
margin: var(--smSpacing) 0;
|
||||
border-radius: var(--baseRadius);
|
||||
}
|
||||
& > .accordion:first-child,
|
||||
& > .accordion-wrapper:first-child > .accordion {
|
||||
margin-top: 0;
|
||||
border-top-left-radius: var(--baseRadius);
|
||||
border-top-right-radius: var(--baseRadius);
|
||||
}
|
||||
& > .accordion:last-child,
|
||||
& > .accordion-wrapper:last-child > .accordion {
|
||||
margin-bottom: 0;
|
||||
border-bottom-left-radius: var(--baseRadius);
|
||||
border-bottom-right-radius: var(--baseRadius);
|
||||
}
|
||||
}
|
||||
|
||||
+15
-3
@@ -122,7 +122,8 @@ blockquote {
|
||||
code {
|
||||
display: inline-block;
|
||||
font-family: var(--monospaceFontFamily);
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-size: var(--lgFontSize);
|
||||
line-height: 1.379rem;
|
||||
padding: 0px 4px;
|
||||
white-space: nowrap;
|
||||
@@ -165,6 +166,9 @@ hr {
|
||||
width: 100%;
|
||||
background: var(--baseAlt1Color);
|
||||
margin: var(--baseSpacing) 0;
|
||||
&.dark {
|
||||
background: var(--baseAlt2Color);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -341,6 +345,14 @@ a,
|
||||
@include shadowize();
|
||||
}
|
||||
|
||||
.sub-panel {
|
||||
@extend .content;
|
||||
background: var(--baseColor);
|
||||
border-radius: var(--baseRadius);
|
||||
padding: calc(var(--smSpacing) - 5px) var(--smSpacing);
|
||||
border: 1px solid var(--baseAlt1Color);
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
@extend %block;
|
||||
clear: both;
|
||||
@@ -676,7 +688,7 @@ a,
|
||||
.list {
|
||||
@extend %block;
|
||||
position: relative;
|
||||
border: 1px solid var(--baseAlt1Color);
|
||||
border: 1px solid var(--baseAlt2Color);
|
||||
border-radius: var(--baseRadius);
|
||||
.list-item {
|
||||
word-break: break-word;
|
||||
@@ -686,7 +698,7 @@ a,
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid var(--baseAlt1Color);
|
||||
border-bottom: 1px solid var(--baseAlt2Color);
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
.docs-sidebar {
|
||||
--itemsSpacing: 10px;
|
||||
--itemsHeight: 40px;
|
||||
|
||||
position: relative;
|
||||
min-width: 180px;
|
||||
max-width: 300px;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; // fallback
|
||||
overflow-y: overlay;
|
||||
background: var(--bodyColor);
|
||||
padding: var(--smSpacing) var(--xsSpacing);
|
||||
border-right: 1px solid var(--baseAlt1Color);
|
||||
|
||||
.sidebar-content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar-item {
|
||||
position: relative;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
justify-content: start;
|
||||
padding: 5px 15px;
|
||||
margin: 0 0 var(--itemsSpacing) 0;
|
||||
font-size: var(--lgFontSize);
|
||||
min-height: var(--itemsHeight);
|
||||
border-radius: var(--baseRadius);
|
||||
user-select: none;
|
||||
color: var(--txtHintColor);
|
||||
transition: background var(--baseAnimationSpeed),
|
||||
color var(--baseAnimationSpeed);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// states
|
||||
&:focus-visible,
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active {
|
||||
color: var(--txtPrimaryColor);
|
||||
background: var(--baseAlt1Color);
|
||||
}
|
||||
&:active {
|
||||
background: var(--baseAlt2Color);
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
}
|
||||
}
|
||||
|
||||
&.compact {
|
||||
.sidebar-item {
|
||||
--itemsSpacing: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.docs-content {
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: calc(var(--baseSpacing) - 3px) var(--baseSpacing);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.docs-content-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.docs-panel {
|
||||
width: 960px;
|
||||
height: 100%;
|
||||
.overlay-panel-section.panel-header {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.overlay-panel-section.panel-content {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.overlay-panel-section.panel-footer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.overlay-panel-section.panel-footer {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -9,7 +9,7 @@
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding: $spacing;
|
||||
margin: 10px 0 0;
|
||||
margin: 5px 0 0;
|
||||
width: auto;
|
||||
min-width: 140px;
|
||||
max-width: 450px;
|
||||
@@ -90,7 +90,7 @@
|
||||
&.dropdown-upside {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin: 0 0 10px;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
&.dropdown-left {
|
||||
right: auto;
|
||||
|
||||
+116
-21
@@ -1,3 +1,5 @@
|
||||
@use "sass:math";
|
||||
|
||||
button {
|
||||
outline: 0;
|
||||
border: 0;
|
||||
@@ -491,7 +493,7 @@ select {
|
||||
}
|
||||
}
|
||||
label ~ .form-field-addon {
|
||||
min-height: calc(var(--inputHeight) + var(--baseLineHeight));
|
||||
min-height: calc(26px + var(--inputHeight));
|
||||
}
|
||||
|
||||
// hints
|
||||
@@ -647,23 +649,44 @@ select {
|
||||
|
||||
// toggle
|
||||
&.form-field-toggle {
|
||||
$toggleWidth: 40px;
|
||||
$toggleHeight: 24px;
|
||||
$toggleSize: $toggleHeight - 8;
|
||||
$toggleOffset: ($toggleHeight - $toggleSize) * 0.5;
|
||||
@mixin toggleSize($toggleWidth: 40px, $toggleHeight: 24px) {
|
||||
$toggleSize: $toggleHeight - 8;
|
||||
$toggleOffset: ($toggleHeight - $toggleSize) * 0.5;
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
& ~ label {
|
||||
min-height: $toggleHeight;
|
||||
padding-left: $toggleWidth + 7px;
|
||||
&:empty {
|
||||
padding-left: $toggleWidth;
|
||||
}
|
||||
&:before {
|
||||
width: $toggleWidth;
|
||||
height: $toggleHeight;
|
||||
border-radius: $toggleHeight;
|
||||
}
|
||||
&:after {
|
||||
top: $toggleOffset;
|
||||
left: $toggleOffset;
|
||||
width: $toggleSize;
|
||||
height: $toggleSize;
|
||||
border-radius: $toggleSize;
|
||||
}
|
||||
}
|
||||
&:checked ~ label {
|
||||
&:after {
|
||||
left: $toggleWidth - $toggleSize - $toggleOffset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
& ~ label {
|
||||
min-height: $toggleHeight;
|
||||
padding-left: $toggleWidth + 7px;
|
||||
&:empty {
|
||||
padding-left: $toggleWidth;
|
||||
}
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
width: $toggleWidth;
|
||||
height: $toggleHeight;
|
||||
border-radius: $toggleHeight;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
background: var(--baseAlt3Color);
|
||||
@@ -673,13 +696,8 @@ select {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: $toggleOffset;
|
||||
left: $toggleOffset;
|
||||
width: $toggleSize;
|
||||
height: $toggleSize;
|
||||
cursor: pointer;
|
||||
background: var(--baseColor);
|
||||
border-radius: $toggleSize;
|
||||
transition: left var(--activeAnimationSpeed),
|
||||
transform var(--activeAnimationSpeed),
|
||||
background var(--activeAnimationSpeed);
|
||||
@@ -707,11 +725,56 @@ select {
|
||||
background: var(--successColor);
|
||||
}
|
||||
&:after {
|
||||
left: $toggleWidth - $toggleSize - $toggleOffset;
|
||||
background: var(--baseColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include toggleSize(40px, 24px);
|
||||
|
||||
&.form-field-sm {
|
||||
@include toggleSize(32px, 20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-field-group {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
> .form-field {
|
||||
flex-grow: 1;
|
||||
border-left: 1px solid var(--baseAlt2Color);
|
||||
&:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
> label {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
> %input,
|
||||
> .select .selected-container {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
> label {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
> %input,
|
||||
> .select .selected-container {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@for $i from 12 through 1 {
|
||||
.form-field.col-#{$i} {
|
||||
width: math.div(100%, math.div(12, $i));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -942,8 +1005,39 @@ select {
|
||||
}
|
||||
}
|
||||
|
||||
.field-type-select .options-dropdown .options-list {
|
||||
max-height: 490px;
|
||||
.field-type-select {
|
||||
.options-dropdown {
|
||||
padding: 2px;
|
||||
.form-field.options-search {
|
||||
margin: 0;
|
||||
}
|
||||
.options-list {
|
||||
max-height: 490px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.dropdown-item {
|
||||
width: 50%;
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
padding-left: 12px; // visual align with the label
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid var(--baseAlt2Color);
|
||||
&:nth-child(2n) {
|
||||
border-left: 1px solid var(--baseAlt2Color);
|
||||
}
|
||||
&:nth-last-child(-n+2) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
&.selected {
|
||||
background: var(--baseAlt1Color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1017,6 +1111,7 @@ select {
|
||||
border-radius: var(--baseRadius);
|
||||
background: var(--baseColor);
|
||||
border: 0;
|
||||
z-index: 9999;
|
||||
padding: 0 3px;
|
||||
font-size: 0.92rem;
|
||||
ul {
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
row-gap: var(--smSpacing);
|
||||
font-size: 16px;
|
||||
font-size: var(--xlFontSize);
|
||||
color: var(--txtPrimaryColor);
|
||||
i {
|
||||
font-size: 24px;
|
||||
@@ -80,7 +80,6 @@
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow-x: overlay;
|
||||
.app-body {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
@@ -97,6 +96,8 @@
|
||||
// -------------------------------------------------------------------
|
||||
|
||||
.page-sidebar {
|
||||
--sidebarListItemMargin: 10px;
|
||||
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -174,11 +175,12 @@
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
margin: 10px 0;
|
||||
margin: var(--sidebarListItemMargin) 0;
|
||||
padding: 3px 10px;
|
||||
font-size: 16px;
|
||||
font-size: var(--xlFontSize);
|
||||
min-height: var(--btnHeight);
|
||||
min-width: 0;
|
||||
color: var(--txtHintColor);
|
||||
@@ -208,8 +210,14 @@
|
||||
transition-duration: var(--activeAnimationSpeed);
|
||||
}
|
||||
}
|
||||
.sidebar-content-compact .sidebar-list-item {
|
||||
--sidebarListItemMargin: 5px;
|
||||
}
|
||||
|
||||
// responsive
|
||||
@media screen and (max-height: 600px) {
|
||||
--sidebarListItemMargin: 5px;
|
||||
}
|
||||
@media screen and (max-width: 1100px) {
|
||||
--pageSidebarWidth: 190px;
|
||||
& > * {
|
||||
@@ -332,8 +340,11 @@
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* fallback */
|
||||
overflow-y: auto; // fallback
|
||||
overflow-y: overlay;
|
||||
.overlay-active & {
|
||||
overflow-y: hidden; // prevent double scrollbar
|
||||
}
|
||||
&.full-page {
|
||||
background: var(--baseColor);
|
||||
}
|
||||
|
||||
@@ -41,10 +41,6 @@
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
hr {
|
||||
background: var(--baseAlt2Color);
|
||||
}
|
||||
|
||||
// header
|
||||
.panel-header {
|
||||
position: relative;
|
||||
@@ -105,7 +101,7 @@
|
||||
margin-right: -10px;
|
||||
}
|
||||
.tabs-header {
|
||||
margin-bottom: -23px;
|
||||
margin-bottom: -24px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -182,6 +178,23 @@
|
||||
border-bottom: 1px solid var(--baseAlt1Color);
|
||||
.tabs-header {
|
||||
border-bottom: 0;
|
||||
.tab-item {
|
||||
border: 1px solid transparent;
|
||||
border-bottom: 0;
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background: var(--baseAlt1Color);
|
||||
}
|
||||
&:after {
|
||||
content: none;
|
||||
display: none;;
|
||||
}
|
||||
}
|
||||
.tab-item.active {
|
||||
background: var(--baseColor);
|
||||
border-color: var(--baseAlt1Color);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.panel-header ~ .panel-content {
|
||||
|
||||
+27
-3
@@ -1,17 +1,20 @@
|
||||
table {
|
||||
--entranceAnimationSpeed: 0.3s;
|
||||
|
||||
border-collapse: separate;
|
||||
min-width: 100%;
|
||||
transition: opacity var(--baseAnimationSpeed);
|
||||
.form-field {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
}
|
||||
td, th {
|
||||
outline: 0;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding: 10px;
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid var(--baseAlt2Color);
|
||||
&:first-child {
|
||||
padding-left: 20px;
|
||||
@@ -150,7 +153,8 @@ table {
|
||||
}
|
||||
|
||||
// field name specific columns
|
||||
td.col-field-id {
|
||||
td.col-field-id,
|
||||
td.col-field-username {
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -205,6 +209,11 @@ table {
|
||||
}
|
||||
|
||||
// states
|
||||
&.table-animate {
|
||||
tr {
|
||||
animation: entranceTop var(--entranceAnimationSpeed);
|
||||
}
|
||||
}
|
||||
&.table-loading {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
@@ -214,7 +223,6 @@ table {
|
||||
.table-wrapper {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
overflow-x: auto;
|
||||
max-width: calc(100% + 2*var(--baseSpacing));
|
||||
margin-left: calc(var(--baseSpacing) * -1);
|
||||
margin-right: calc(var(--baseSpacing) * -1);
|
||||
@@ -230,6 +238,7 @@ table {
|
||||
}
|
||||
}
|
||||
td, th {
|
||||
position: relative;
|
||||
&:first-child {
|
||||
padding-left: calc(var(--baseSpacing) + 3px);
|
||||
}
|
||||
@@ -243,6 +252,7 @@ table {
|
||||
.col-type-action {
|
||||
position: sticky;
|
||||
z-index: 99;
|
||||
transition: box-shadow var(--baseAnimationSpeed);
|
||||
}
|
||||
.bulk-select-col {
|
||||
left: 0px;
|
||||
@@ -258,4 +268,18 @@ table {
|
||||
th.col-type-action {
|
||||
background: var(--bodyColor);
|
||||
}
|
||||
|
||||
// scrolling styles
|
||||
&.scrollable {
|
||||
.bulk-select-col {
|
||||
box-shadow: 3px 0px 5px 0px var(--shadowColor);
|
||||
}
|
||||
.col-type-action {
|
||||
box-shadow: -3px 0px 5px 0px var(--shadowColor);
|
||||
}
|
||||
&.scroll-start .bulk-select-col,
|
||||
&.scroll-end .col-type-action {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
$tabHeaderAnimationSpeed: 0.25s;
|
||||
$tabContentAnimationSpeed: 0.3s;
|
||||
$tabHeaderAnimationSpeed: 0.2s;
|
||||
$tabContentAnimationSpeed: 0.2s;
|
||||
|
||||
@keyframes tabChange {
|
||||
0% {
|
||||
|
||||
@@ -19,18 +19,10 @@
|
||||
transition: opacity var(--baseAnimationSpeed),
|
||||
visibility var(--baseAnimationSpeed),
|
||||
transform var(--baseAnimationSpeed);
|
||||
transform: translateY(2px);
|
||||
transform: scale(0.98);
|
||||
white-space: pre-line;
|
||||
@include hide();
|
||||
|
||||
// positions
|
||||
&.left {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
&.right {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
// styles
|
||||
&.code {
|
||||
font-family: monospace;
|
||||
|
||||
@@ -26,9 +26,9 @@
|
||||
--warningColor: #ff8e3c;
|
||||
--warningAltColor: #ffe7d6;
|
||||
|
||||
--overlayColor: rgba(65, 82, 105, 0.25);
|
||||
--overlayColor: rgba(65, 80, 105, 0.25);
|
||||
--tooltipColor: rgba(0, 0, 0, 0.85);
|
||||
--shadowColor: rgba(0, 0, 0, 0.05);
|
||||
--shadowColor: rgba(0, 0, 0, 0.06);
|
||||
|
||||
--baseFontSize: 14.5px;
|
||||
--xsFontSize: 12px;
|
||||
|
||||
@@ -37,3 +37,5 @@
|
||||
@import 'bulkbar';
|
||||
|
||||
@import 'flatpickr';
|
||||
|
||||
@import 'docs_panel';
|
||||
|
||||
Reference in New Issue
Block a user