mirror of
https://gitlab.com/bramw/baserow.git
synced 2025-04-10 23:50:12 +00:00
Merge branch 'stylelint-v14' into 'develop'
Bump stylelint See merge request baserow/baserow!2275
This commit is contained in:
Jonathan Adeline
commit
22f4fe88ed
166 changed files with 1038 additions and 776 deletions
enterprise/web-frontend/modules/baserow_enterprise
assets/scss/components
components/crudTable/fields
premium/web-frontend/modules/baserow_premium/assets/scss/components
web-frontend
.stylelintrc.stylelintrc.js
config
modules
builder/components
elements/components
settings
theme
core/assets/scss
abstracts
components
add.scssalert.scssapi_docs.scss
api_docs
api_token.scssarray_field.scssbadge_counter.scssbox.scssbuilder
add_element_card.scssadd_element_zone.scssdata_source_form.scsselement_preview.scss
button.scssbutton_floating.scssbutton_icon.scssbutton_text.scsselements
integration_settings.scssloading_spinner.scsspage_builder.scsspage_preview.scsspreview_navigation_bar_input.scssuser_source_settings.scsscard
choice_items.scsscolor_picker_context.scsscolor_select.scsscontext.scssdashboard.scssdata_table.scssdatepicker.scssdeactivated_label.scssdecorator
delete_section.scssdropdown.scssexpand_on_overflow_list.scssexpandable.scssfields
boolean.scssfile.scsslast_modified_by.scsslong_text.scssmultiple_collaborators.scssrating.scssrich_text.scss
file_field_modal.scssfilters.scssform.scssform_input.scssformula_field.scssformula_input_field.scssget_formula_component.scssgrid.scssgroup_bys.scssheader.scsshidings.scssimport_modal.scsslayout.scsslist.scssloading.scssmodal-progress.scss|
|
@ -46,6 +46,6 @@
|
|||
color: $color-neutral-500;
|
||||
}
|
||||
|
||||
.audit-log__clear_filters_button {
|
||||
.audit-log__clear-filters-button {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.long_text_field {
|
||||
.long-text-field {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.member-roles-tab__everyone_access_label {
|
||||
.member-roles-tab__everyone-access-label {
|
||||
color: $color-neutral-700;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.subject_sample_field-list__avatar {
|
||||
.subject-sample-field-list__avatar {
|
||||
border: 2px solid $white;
|
||||
float: left;
|
||||
margin-left: -10px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template functional>
|
||||
<div
|
||||
:class="[data.staticClass, data.class, 'long_text_field']"
|
||||
:class="[data.staticClass, data.class, 'long-text-field']"
|
||||
:title="props.row[props.column.key]"
|
||||
v-on="listeners"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<Avatar
|
||||
v-for="(sample, index) in props.row[props.column.key]"
|
||||
:key="index"
|
||||
class="subject_sample_field-list__avatar"
|
||||
class="subject-sample-field-list__avatar"
|
||||
rounded
|
||||
size="large"
|
||||
:initials="sample.subject_label | nameAbbreviation"
|
||||
|
|
|
|||
|
|
@ -16,4 +16,5 @@
|
|||
@import 'form_view_survey';
|
||||
@import 'views/calendar/all';
|
||||
@import 'active_users';
|
||||
@import 'rich_text_editor';
|
||||
@import 'row_edit_modal_comments_notification_mode';
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
resize: none;
|
||||
padding: 0 0;
|
||||
padding: 0;
|
||||
padding-right: 14px;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -50,11 +50,11 @@
|
|||
.form-view-survey__center-inner-2 {
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
padding: 0 0 40px 0;
|
||||
padding: 0 0 40px;
|
||||
}
|
||||
|
||||
.form-view__field-actions {
|
||||
padding: 0 20px 20px 20px;
|
||||
padding: 0 20px 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,209 @@
|
|||
.rich-text-editor--scrollbar-thin {
|
||||
/* scrollbar */
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: $color-neutral-500;
|
||||
background-clip: content-box;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-text-editor__content-blockquote,
|
||||
%rich-text-editor-content-blockquote {
|
||||
color: $color-neutral-700;
|
||||
border-left: 4px solid $color-neutral-300;
|
||||
}
|
||||
|
||||
.rich-text-editor__content {
|
||||
width: 100%;
|
||||
height: calc(100% - 15px);
|
||||
text-align: left;
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.tiptap.ProseMirror {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
h3: {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: revert;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@extend %rich-text-editor-content-blockquote;
|
||||
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 1rem;
|
||||
background-color: $color-neutral-100;
|
||||
border-radius: $rounded;
|
||||
}
|
||||
|
||||
ul[data-type='taskList'] {
|
||||
padding-inline-start: 5px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
> div {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
> label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rich-text-editor__content--comment {
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.rich-text-editor__mention {
|
||||
padding: 0 2px;
|
||||
background-color: rgba(6, 46, 71, 0.08);
|
||||
font-weight: 600;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
||||
.rich-text-editor__mention--current-user {
|
||||
color: $color-primary-700;
|
||||
background-color: $color-primary-100;
|
||||
}
|
||||
|
||||
.rich-text-editor__mention--user-gone {
|
||||
text-decoration: line-through;
|
||||
background-color: $color-error-100;
|
||||
}
|
||||
|
||||
.rich-text-editor__mention-dropdown {
|
||||
.dropdown__items {
|
||||
bottom: 1px;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.ProseMirror p.is-editor-empty:first-child::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: $color-neutral-500;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.rich-text-editor__floating-menu,
|
||||
.rich-text-editor__bubble-menu {
|
||||
@include elevation($elevation-medium);
|
||||
|
||||
background-color: white;
|
||||
padding: 4px;
|
||||
gap: 2px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid $palette-neutral-400;
|
||||
}
|
||||
|
||||
.rich-text-editor__bubble-menu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.rich-text-editor__floating-menu--expanded {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.rich-text-editor__floating-menu-button,
|
||||
.rich-text-editor__bubble-menu-button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 16px;
|
||||
background-color: white;
|
||||
border-radius: inherit;
|
||||
|
||||
& button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
color: $palette-neutral-900;
|
||||
background-color: inherit;
|
||||
border-radius: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& button:hover {
|
||||
background-color: $palette-neutral-50;
|
||||
}
|
||||
|
||||
& button.is-active {
|
||||
color: $palette-neutral-1300;
|
||||
background-color: $palette-neutral-200;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-text-editor__floating-menu--collapsed {
|
||||
padding: 0;
|
||||
|
||||
& button.is-active:not(:hover) {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.rich-text-editor__bubble-menu-button {
|
||||
i.iconoir-underline {
|
||||
font-size: 20px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
i.iconoir-strikethrough {
|
||||
font-size: 14px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin: 0 30px 0 30px;
|
||||
margin: 0 30px;
|
||||
height: 100%;
|
||||
border-top-left-radius: 6px;
|
||||
}
|
||||
|
|
@ -169,7 +169,7 @@
|
|||
|
||||
.rich-text-editor__content {
|
||||
border: 1px solid #9fa4ab;
|
||||
padding: 8px 12px 8px 12px;
|
||||
padding: 8px 12px;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
|
@ -212,7 +212,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.row_comments__comment-text-actions {
|
||||
.row-comments__comment-text-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:not(.calendar-card--disabled):not(.calendar-card--dragging):hover {
|
||||
&:not(.calendar-card--disabled, .calendar-card--dragging):hover {
|
||||
cursor: pointer;
|
||||
background-color: $color-neutral-100;
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
.calendar-card__content {
|
||||
display: flex;
|
||||
margin: 0 8px 0 8px;
|
||||
margin: 0 8px;
|
||||
gap: 6px;
|
||||
height: 24px;
|
||||
|
||||
|
|
|
|||
|
|
@ -19,8 +19,7 @@
|
|||
grid-template-columns: repeat(7, minmax(110px, 1fr));
|
||||
grid-template-rows: 32px;
|
||||
grid-auto-rows: minmax(38px, 1fr);
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
overflow: auto auto;
|
||||
position: relative;
|
||||
border-right: solid 1px $color-neutral-200;
|
||||
border-bottom: solid 1px $color-neutral-200;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@
|
|||
border-right: 1px solid $color-neutral-200;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
flex-flow: column wrap;
|
||||
align-content: flex-start;
|
||||
padding: 8px;
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
justify-content: center;
|
||||
|
||||
@include rounded($rounded);
|
||||
@include flex-align-items();
|
||||
@include flex-align-items;
|
||||
}
|
||||
|
||||
.conditional-color-value-provider-form__color-filter--empty {
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 24px 4px 0 4px;
|
||||
margin: 24px 4px 0;
|
||||
}
|
||||
|
||||
.conditional-color-value-provider-form__colors-header-title {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@
|
|||
flex-grow: 0;
|
||||
margin: 4px;
|
||||
|
||||
@include add-shadow-on-same-background();
|
||||
@include add-shadow-on-same-background;
|
||||
@include rounded($rounded-md);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 20px 20px 10px 20px;
|
||||
padding: 20px 20px 10px;
|
||||
}
|
||||
|
||||
.kanban-view__drag {
|
||||
|
|
@ -90,7 +90,6 @@
|
|||
|
||||
.kanban-view__option {
|
||||
@extend %ellipsis;
|
||||
|
||||
@include select-option-style(inline-block, false);
|
||||
}
|
||||
|
||||
|
|
@ -159,13 +158,11 @@
|
|||
|
||||
.kanban-view__stack--dragging & {
|
||||
// Must be kept in sync with the timeout of KanbanViewStack.vue::moved
|
||||
transition-duration: 0.1s;
|
||||
transition-timing-function: ease-out;
|
||||
transition-property: transform;
|
||||
transition-delay: 0s;
|
||||
transition: transform 0.1s ease-out 0s;
|
||||
}
|
||||
|
||||
&:not(.kanban-view__stack-card--disabled):not(
|
||||
&:not(
|
||||
.kanban-view__stack-card--disabled,
|
||||
.kanban-view__stack-card--dragging
|
||||
):hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -175,7 +172,7 @@
|
|||
}
|
||||
|
||||
.kanban-view__stack-foot {
|
||||
padding: 10px 20px 20px 20px;
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
|
||||
.kanban-view__add-stack {
|
||||
|
|
@ -188,7 +185,7 @@
|
|||
height: 28px;
|
||||
justify-content: center;
|
||||
|
||||
@include flex-align-items();
|
||||
@include flex-align-items;
|
||||
|
||||
line-height: 26px;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
{
|
||||
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
|
||||
"rules": {
|
||||
"at-rule-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignoreAtRules": [
|
||||
"/regex/",
|
||||
"function",
|
||||
"if",
|
||||
"each",
|
||||
"else",
|
||||
"include",
|
||||
"mixin",
|
||||
"return",
|
||||
"extend",
|
||||
"for"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
52
web-frontend/.stylelintrc.js
Normal file
52
web-frontend/.stylelintrc.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
module.exports = {
|
||||
overrides: [
|
||||
{
|
||||
files: ['**/*.scss'],
|
||||
customSyntax: 'postcss-scss',
|
||||
},
|
||||
],
|
||||
extends: ['stylelint-config-standard-scss'],
|
||||
plugins: ['stylelint-selector-bem-pattern'],
|
||||
rules: {
|
||||
'selector-class-pattern': [
|
||||
'^[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-]?[a-z0-9]+)*)?$',
|
||||
{
|
||||
resolveNestedSelectors: true,
|
||||
message: function expected(selectorValue) {
|
||||
return `Expected class selector "${selectorValue}" to match BEM CSS pattern https://en.bem.info/methodology/css. Selector validation tool: https://regexr.com/3apms`
|
||||
},
|
||||
},
|
||||
],
|
||||
'plugin/selector-bem-pattern': {
|
||||
componentName: '[A-Z]+',
|
||||
componentSelectors: {
|
||||
initial: '^\\.{componentName}(?:-[a-z]+)?$',
|
||||
combined: '^\\.combined-{componentName}-[a-z]+$',
|
||||
},
|
||||
utilitySelectors: '^\\.util-[a-z]+$',
|
||||
},
|
||||
'scss/dollar-variable-pattern': null,
|
||||
'scss/dollar-variable-empty-line-before': null,
|
||||
'at-rule-no-unknown': [
|
||||
true,
|
||||
{
|
||||
ignoreAtRules: [
|
||||
'/regex/',
|
||||
'function',
|
||||
'if',
|
||||
'each',
|
||||
'else',
|
||||
'include',
|
||||
'mixin',
|
||||
'return',
|
||||
'extend',
|
||||
'for',
|
||||
],
|
||||
},
|
||||
],
|
||||
'media-feature-range-notation': 'prefix',
|
||||
'color-function-notation': 'legacy',
|
||||
'scss/no-global-function-names': null,
|
||||
'alpha-value-notation': 'number',
|
||||
},
|
||||
}
|
||||
|
|
@ -33,6 +33,7 @@ export default function (
|
|||
const modules = baseModules.concat(additionalModules)
|
||||
return {
|
||||
modules,
|
||||
buildModules: ['@nuxtjs/stylelint-module'],
|
||||
sentry: {
|
||||
clientIntegrations: {
|
||||
Dedupe: {},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div :class="classes" class="image_element">
|
||||
<div :class="classes" class="image-element">
|
||||
<div
|
||||
class="image_element__img_wrapper"
|
||||
class="image-element__img-wrapper"
|
||||
:class="imageConstraintClass"
|
||||
:style="{
|
||||
'--max-width': styleMaxWidth,
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
}"
|
||||
>
|
||||
<img
|
||||
class="image_element__img"
|
||||
class="image-element__img"
|
||||
:alt="resolvedAltText || $t('imageElement.emptyState')"
|
||||
:src="imageSource"
|
||||
/>
|
||||
|
|
@ -55,13 +55,13 @@ export default {
|
|||
},
|
||||
imageConstraintClass() {
|
||||
return {
|
||||
'image_element__img_wrapper--cover':
|
||||
'image-element__img-wrapper--cover':
|
||||
this.element.style_image_constraint === 'cover',
|
||||
'image_element__img_wrapper--contain':
|
||||
'image-element__img-wrapper--contain':
|
||||
this.element.style_image_constraint === 'contain',
|
||||
'image_element__img_wrapper--full-width':
|
||||
'image-element__img-wrapper--full-width':
|
||||
this.element.style_image_constraint === 'full-width',
|
||||
'image_element__img_wrapper--max-height': this.element.styleMaxHeight,
|
||||
'image-element__img-wrapper--max-height': this.element.styleMaxHeight,
|
||||
}
|
||||
},
|
||||
imageSource() {
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ export default {
|
|||
return renderer.renderToken(tokens, idx, options)
|
||||
},
|
||||
image: (tokens, idx, options, env, renderer) => {
|
||||
tokens[idx].attrJoin('class', 'image_element__img')
|
||||
tokens[idx].attrJoin('class', 'image-element__img')
|
||||
return renderer.renderToken(tokens, idx, options)
|
||||
},
|
||||
paragraph_open: (tokens, idx, options, env, renderer) => {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div
|
||||
v-for="integration in integrations"
|
||||
:key="integration.id"
|
||||
class="integration_settings__integration"
|
||||
class="integration-settings__integration"
|
||||
>
|
||||
<Presentation
|
||||
:image="getIntegrationType(integration).image"
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
avatar-color="transparent"
|
||||
style="flex: 1"
|
||||
/>
|
||||
<div class="integration_settings__integration-actions">
|
||||
<div class="integration-settings__integration-actions">
|
||||
<ButtonIcon
|
||||
icon="iconoir-edit"
|
||||
@click="
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="theme_settings">
|
||||
<div class="theme-settings">
|
||||
<component
|
||||
:is="themeConfigBlock.component"
|
||||
v-for="themeConfigBlock in themeConfigBlocks"
|
||||
|
|
|
|||
|
|
@ -5,17 +5,17 @@
|
|||
:value="builder.theme[colorPickerPropertyName] || '#000000ff'"
|
||||
@input="colorPickerColorChanged"
|
||||
></ColorPickerContext>
|
||||
<div class="theme_settings__section margin-bottom-3">
|
||||
<div class="theme_settings__section-properties">
|
||||
<div class="theme-settings__section margin-bottom-3">
|
||||
<div class="theme-settings__section-properties">
|
||||
<a
|
||||
class="theme_settings__section-title"
|
||||
class="theme-settings__section-title"
|
||||
@click="toggleClosed('colors')"
|
||||
>
|
||||
{{ $t('mainThemeConfigBlock.colorsLabel') }}
|
||||
<i
|
||||
class="iconoir-nav-arrow-down theme_settings__section-title-icon"
|
||||
class="iconoir-nav-arrow-down theme-settings__section-title-icon"
|
||||
:class="{
|
||||
'theme_settings__section-title-icon': true,
|
||||
'theme-settings__section-title-icon': true,
|
||||
'iconoir-nav-arrow-down': !isClosed('colors'),
|
||||
'iconoir-nav-arrow-right': isClosed('colors'),
|
||||
}"
|
||||
|
|
@ -38,17 +38,17 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="theme_settings__section">
|
||||
<div class="theme_settings__section-properties">
|
||||
<div class="theme-settings__section">
|
||||
<div class="theme-settings__section-properties">
|
||||
<a
|
||||
class="theme_settings__section-title"
|
||||
class="theme-settings__section-title"
|
||||
@click="toggleClosed('typography')"
|
||||
>
|
||||
{{ $t('mainThemeConfigBlock.typography') }}
|
||||
<i
|
||||
class="iconoir-nav-arrow-down theme_settings__section-title-icon"
|
||||
class="iconoir-nav-arrow-down theme-settings__section-title-icon"
|
||||
:class="{
|
||||
'theme_settings__section-title-icon': true,
|
||||
'theme-settings__section-title-icon': true,
|
||||
'iconoir-nav-arrow-down': !isClosed('typography'),
|
||||
'iconoir-nav-arrow-right': isClosed('typography'),
|
||||
}"
|
||||
|
|
@ -60,9 +60,9 @@
|
|||
v-for="i in headings"
|
||||
v-show="!isClosed('typography')"
|
||||
:key="i"
|
||||
class="theme_settings__section"
|
||||
class="theme-settings__section"
|
||||
>
|
||||
<div class="theme_settings__section-properties">
|
||||
<div class="theme-settings__section-properties">
|
||||
<div class="control">
|
||||
<div class="control__label">
|
||||
{{ $t('mainThemeConfigBlock.headingLabel', { i }) }}
|
||||
|
|
@ -105,10 +105,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme_settings__section-preview">
|
||||
<div class="theme-settings__section-preview">
|
||||
<component
|
||||
:is="`h${i}`"
|
||||
class="margin-bottom-2 theme_settings__section-ellipsis"
|
||||
class="margin-bottom-2 theme-settings__section-ellipsis"
|
||||
:class="`ab-heading--h${i}`"
|
||||
:style="{
|
||||
[`--heading-h${i}--color`]: builder.theme[`heading_${i}_color`],
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '_alert';
|
||||
@import '_badge';
|
||||
@import '_loading-spinner';
|
||||
@import '_button';
|
||||
@import 'alert';
|
||||
@import 'badge';
|
||||
@import 'loading-spinner';
|
||||
@import 'button';
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
padding: 0 5px;
|
||||
background-color: $color-primary-100;
|
||||
color: $color-neutral-900;
|
||||
|
||||
@include fixed-height(22px, 13px);
|
||||
@include rounded($rounded);
|
||||
@include flex-align-items(4px, inline-flex);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
gap: 12px;
|
||||
box-shadow: 0 1px 2px 0 rgba(7, 8, 16, 0.1);
|
||||
z-index: $z-index-toasts;
|
||||
|
||||
@include rounded($rounded-md);
|
||||
@include elevation($elevation-low);
|
||||
}
|
||||
|
|
@ -124,7 +125,7 @@
|
|||
cursor: wait;
|
||||
user-select: none;
|
||||
|
||||
@include loading-spinner();
|
||||
@include loading-spinner;
|
||||
}
|
||||
|
||||
.alert__actions-button-text--normal {
|
||||
|
|
|
|||
|
|
@ -137,6 +137,7 @@
|
|||
font-size: 14px;
|
||||
padding: 3px 6px;
|
||||
background-color: $color-neutral-100;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
font-size: 14px;
|
||||
padding: 3px 6px;
|
||||
background-color: $color-neutral-100;
|
||||
|
||||
@include rounded($rounded);
|
||||
|
||||
&.api-docs__code--small {
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
.api-docs__example-type {
|
||||
width: 400px;
|
||||
margin-bottom: 20px;
|
||||
padding: 16px 16px 0 16px;
|
||||
padding: 16px 16px 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.api-docs__parameters {
|
||||
list-style: none;
|
||||
margin: 30px 0 0 0;
|
||||
margin: 30px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -47,6 +47,7 @@
|
|||
padding: 4px 6px;
|
||||
background-color: $color-success-500;
|
||||
color: $white;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
border: solid 1px $color-neutral-200;
|
||||
overflow: hidden;
|
||||
margin: 20px 0;
|
||||
|
||||
@include rounded($rounded-md);
|
||||
}
|
||||
|
||||
|
|
@ -76,6 +77,7 @@
|
|||
padding: 0 6px;
|
||||
margin-left: 6px;
|
||||
color: $color-neutral-900;
|
||||
|
||||
@include rounded($rounded);
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
padding: 0 5px;
|
||||
background-color: $color-neutral-100;
|
||||
display: flex;
|
||||
|
||||
@include rounded($rounded);
|
||||
|
||||
&:not(:last-child) {
|
||||
|
|
@ -30,6 +31,7 @@
|
|||
padding: 0 5px;
|
||||
background-color: $color-neutral-100;
|
||||
display: flex;
|
||||
|
||||
@include rounded($rounded);
|
||||
|
||||
&:not(:last-child) {
|
||||
|
|
@ -45,7 +47,7 @@
|
|||
|
||||
.array-field__single-select-option {
|
||||
white-space: nowrap;
|
||||
margin: 6px 4px 4px 4px;
|
||||
margin: 6px 4px 4px;
|
||||
overflow: unset;
|
||||
|
||||
@include select-option-style(flex, true);
|
||||
|
|
@ -80,14 +82,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
%array-field__file-border {
|
||||
%array-field-file-border {
|
||||
border: solid 1px $color-neutral-400;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
||||
.array-field__file-image {
|
||||
@extend %array-field__file-border;
|
||||
@extend %array-field-file-border;
|
||||
|
||||
display: block;
|
||||
width: auto;
|
||||
|
|
@ -95,7 +97,7 @@
|
|||
}
|
||||
|
||||
.array-field__file-icon {
|
||||
@extend %array-field__file-border;
|
||||
@extend %array-field-file-border;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
color: $white;
|
||||
line-height: 10px;
|
||||
text-align: center;
|
||||
|
||||
@include rounded($rounded-3xl);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.box {
|
||||
.box,
|
||||
%box {
|
||||
background-color: $white;
|
||||
padding: 32px 40px;
|
||||
|
||||
|
|
@ -25,14 +26,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.box__head-title {
|
||||
.box__head-title,
|
||||
%box-head-title {
|
||||
word-break: break-word;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.box__title {
|
||||
@extend .box__head-title;
|
||||
.box__title,
|
||||
%box-title {
|
||||
@extend %box-head-title;
|
||||
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
.add-element-card {
|
||||
border: solid $color-neutral-400 1px;
|
||||
padding: 10px 15px 10px 15px;
|
||||
padding: 10px 15px;
|
||||
width: 133px;
|
||||
cursor: pointer;
|
||||
|
||||
@include rounded($rounded-md);
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
height: 70px;
|
||||
border: dashed 2px $color-neutral-400;
|
||||
cursor: pointer;
|
||||
|
||||
@include rounded($rounded-md);
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.filters__value--formula-toggle--disabled {
|
||||
.filters__value-formula-toggle--disabled {
|
||||
color: $color-neutral-400;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@
|
|||
line-height: 20px;
|
||||
padding: 0 4px;
|
||||
white-space: nowrap;
|
||||
|
||||
@include rounded($rounded);
|
||||
|
||||
.element-preview--first-element & {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
white-space: nowrap;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
|
||||
@include rounded($rounded);
|
||||
|
||||
&--full-width {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@include flex-align-items(3px);
|
||||
|
||||
&.ab-form-group__label--small {
|
||||
|
|
|
|||
|
|
@ -12,32 +12,32 @@
|
|||
}
|
||||
|
||||
.ab-heading--h1 {
|
||||
color: var(--heading-h1--color, $black);
|
||||
font-size: var(--heading-h1--font-size, 30px);
|
||||
color: var(--heading-h1-color, $black);
|
||||
font-size: var(--heading-h1-font-size, 30px);
|
||||
}
|
||||
|
||||
.ab-heading--h2 {
|
||||
color: var(--heading-h2--color, $black);
|
||||
font-size: var(--heading-h2--font-size, 26px);
|
||||
color: var(--heading-h2-color, $black);
|
||||
font-size: var(--heading-h2-font-size, 26px);
|
||||
}
|
||||
|
||||
.ab-heading--h3 {
|
||||
color: var(--heading-h3--color, $black);
|
||||
font-size: var(--heading-h3--font-size, 22px);
|
||||
color: var(--heading-h3-color, $black);
|
||||
font-size: var(--heading-h3-font-size, 22px);
|
||||
}
|
||||
|
||||
.ab-heading--h4 {
|
||||
color: var(--heading-h4--color, $black);
|
||||
font-size: var(--heading-h4--font-size, 18px);
|
||||
color: var(--heading-h4-color, $black);
|
||||
font-size: var(--heading-h4-font-size, 18px);
|
||||
}
|
||||
|
||||
.ab-heading--h5 {
|
||||
color: var(--heading-h5--color, $black);
|
||||
font-size: var(--heading-h5--font-size, 14px);
|
||||
color: var(--heading-h5-color, $black);
|
||||
font-size: var(--heading-h5-font-size, 14px);
|
||||
}
|
||||
|
||||
.ab-heading--h6 {
|
||||
color: var(--heading-h6--color, $black);
|
||||
font-size: var(--heading-h6--font-size, 14px);
|
||||
color: var(--heading-h6-color, $black);
|
||||
font-size: var(--heading-h6-font-size, 14px);
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
.baserow-table__header-cell,
|
||||
.baserow-table__cell {
|
||||
padding: 12px 20px 10px 20px;
|
||||
padding: 12px 20px 10px;
|
||||
}
|
||||
|
||||
.baserow-table__header-cell {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.image_element {
|
||||
.image-element {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image_element__img_wrapper {
|
||||
.image-element__img-wrapper {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: var(--max-width, 100%);
|
||||
|
|
@ -23,33 +23,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
.image_element__img_wrapper--cover {
|
||||
.image-element__img-wrapper--cover {
|
||||
width: 100%;
|
||||
|
||||
& .image_element__img {
|
||||
& .image-element__img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.image_element__img_wrapper--contain {
|
||||
& .image_element__img {
|
||||
.image-element__img-wrapper--contain {
|
||||
& .image-element__img {
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.image_element__img_wrapper--full-width {
|
||||
& .image_element__img {
|
||||
.image-element__img-wrapper--full-width {
|
||||
& .image-element__img {
|
||||
object-fit: fill;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.image_element__img_wrapper--max-height {
|
||||
& .image_element__img {
|
||||
.image-element__img-wrapper--max-height {
|
||||
& .image-element__img {
|
||||
max-width: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.integration_settings__integration {
|
||||
.integration-settings__integration {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -6,12 +6,12 @@
|
|||
}
|
||||
|
||||
.integration-settings__loader {
|
||||
@include loading();
|
||||
@include loading;
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.integration_settings__integration-actions {
|
||||
.integration-settings__integration-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
|
||||
&::after {
|
||||
@include loading();
|
||||
@include loading;
|
||||
@include absolute(50%, 50%, auto, auto);
|
||||
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -46,10 +46,10 @@
|
|||
|
||||
.page-builder__preview-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
flex-flow: column nowrap;
|
||||
width: 26px;
|
||||
border: solid 1px $color-neutral-400;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
||||
|
|
@ -63,6 +63,7 @@
|
|||
line-height: 20px;
|
||||
padding: 0 4px;
|
||||
white-space: nowrap;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -55,5 +55,5 @@
|
|||
|
||||
.page-preview__empty {
|
||||
max-width: 400px;
|
||||
margin: 120px auto 120px auto;
|
||||
margin: 120px auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
width: 40px;
|
||||
padding: 0 3px;
|
||||
border: 1px solid transparent;
|
||||
|
||||
@include rounded($rounded);
|
||||
|
||||
&--invalid {
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
}
|
||||
|
||||
.user-source-settings__loader {
|
||||
@include loading();
|
||||
@include loading;
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.user-source_settings__user-source-actions {
|
||||
.user-source-settings__user-source-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@
|
|||
vertical-align: middle;
|
||||
|
||||
@include rounded($rounded-md);
|
||||
@include button-size(); // regular size
|
||||
@include button-style(); // primary style
|
||||
@include button-size; // regular size
|
||||
@include button-style; // primary style
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active:not(.button--loading):not([disabled]) {
|
||||
&:active:not(.button--loading, [disabled]) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -62,6 +62,7 @@
|
|||
|
||||
.button--secondary {
|
||||
border: 1px solid $palette-neutral-400;
|
||||
|
||||
@include button-style(
|
||||
$white,
|
||||
$palette-neutral-25,
|
||||
|
|
@ -73,6 +74,7 @@
|
|||
|
||||
.button--ghost {
|
||||
border: 1px solid rgba($white, 0.24);
|
||||
|
||||
@include button-style(transparent, rgba($white, 0.1), rgba($white, 0.15));
|
||||
}
|
||||
|
||||
|
|
@ -96,6 +98,7 @@
|
|||
|
||||
.button--tiny {
|
||||
font-size: 11px;
|
||||
|
||||
@include button-size(
|
||||
$button-tiny-height,
|
||||
$button-tiny-top-bottom-padding,
|
||||
|
|
@ -105,6 +108,7 @@
|
|||
|
||||
.button--small {
|
||||
font-size: 11px;
|
||||
|
||||
@include button-size(
|
||||
$button-small-height,
|
||||
$button-small-top-bottom-padding,
|
||||
|
|
@ -136,6 +140,7 @@
|
|||
.button--upload {
|
||||
border: 1px dashed $palette-neutral-400;
|
||||
box-shadow: none;
|
||||
|
||||
@include button-style(
|
||||
$palette-neutral-25,
|
||||
$white,
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@
|
|||
@include rounded($rounded-3xl);
|
||||
@include elevation($elevation-low);
|
||||
|
||||
&:hover:not(.button-floating--loading):not([disabled]) {
|
||||
&:hover:not(.button-floating--loading, [disabled]) {
|
||||
background: $palette-neutral-25;
|
||||
color: $palette-blue-600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active:not(.button-floating--loading):not([disabled]) {
|
||||
&:active:not(.button-floating--loading, [disabled]) {
|
||||
background: $palette-neutral-50;
|
||||
color: $palette-blue-700;
|
||||
box-shadow: none;
|
||||
|
|
@ -62,5 +62,6 @@
|
|||
|
||||
.button-floating--secondary {
|
||||
border: 1px solid $palette-neutral-200;
|
||||
|
||||
@include elevation($elevation-medium);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,14 +15,14 @@
|
|||
@include rounded($rounded-md);
|
||||
@include elevation($elevation-low);
|
||||
|
||||
&:hover:not(.button-icon--loading):not([disabled]) {
|
||||
&:hover:not(.button-icon--loading, [disabled]) {
|
||||
background: $palette-neutral-25;
|
||||
color: $palette-blue-600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active:not(.button-icon--loading):not([disabled]) {
|
||||
&:active:not(.button-icon--loading, [disabled]) {
|
||||
background: $palette-neutral-50;
|
||||
color: $palette-blue-700;
|
||||
box-shadow: none !important;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
color: $palette-neutral-500;
|
||||
}
|
||||
|
||||
&:hover:not(.button-text--loading):not([disabled]) {
|
||||
&:hover:not(.button-text--loading, [disabled]) {
|
||||
color: $palette-neutral-1300;
|
||||
}
|
||||
|
||||
|
|
@ -70,11 +70,11 @@
|
|||
color: $palette-neutral-500;
|
||||
}
|
||||
|
||||
.button-text:hover:not(.button-text--loading):not([disabled]) & {
|
||||
.button-text:hover:not(.button-text--loading, [disabled]) & {
|
||||
color: $palette-neutral-1300;
|
||||
}
|
||||
|
||||
.button-text:active:not(.button-text--loading):not([disabled]) & {
|
||||
.button-text:active:not(.button-text--loading, [disabled]) & {
|
||||
color: $palette-neutral-700;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
height: 22px + 15px;
|
||||
padding: 0 16px 15px 16px;
|
||||
padding: 0 16px 15px;
|
||||
overflow-x: scroll;
|
||||
|
||||
.array-field__boolean,
|
||||
|
|
|
|||
|
|
@ -10,13 +10,14 @@
|
|||
flex-wrap: nowrap;
|
||||
height: 22px + 15px;
|
||||
list-style: none;
|
||||
padding: 0 16px 15px 16px;
|
||||
padding: 0 16px 15px;
|
||||
margin: 0;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
%card-file__border {
|
||||
%card-file-border {
|
||||
border: solid 1px $color-neutral-400;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
||||
|
|
@ -31,7 +32,7 @@
|
|||
}
|
||||
|
||||
.card-file__image {
|
||||
@extend %card-file__border;
|
||||
@extend %card-file-border;
|
||||
|
||||
display: block;
|
||||
width: auto;
|
||||
|
|
@ -39,7 +40,7 @@
|
|||
}
|
||||
|
||||
.card-file__icon {
|
||||
@extend %card-file__border;
|
||||
@extend %card-file-border;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.card-link-row {
|
||||
padding: 0 5px;
|
||||
background-color: $color-primary-100;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
height: 22px + 15px;
|
||||
padding: 0 16px 15px 16px;
|
||||
padding: 0 16px 15px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
height: 30px + 15px;
|
||||
padding: 0 16px 15px 16px;
|
||||
padding: 0 16px 15px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
|
||||
.card-single-select-option {
|
||||
@extend %ellipsis;
|
||||
|
||||
@include select-option-style(inline-block);
|
||||
@include add-shadow-on-same-background();
|
||||
@include add-shadow-on-same-background;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0 0 -18px 0;
|
||||
margin: 0 0 -18px;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not(.disabled):not(.active):hover {
|
||||
&:not(.disabled, .active):hover {
|
||||
background-color: $color-neutral-100;
|
||||
color: $color-neutral-900;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,7 @@
|
|||
}
|
||||
|
||||
.color-picker-context__color-type {
|
||||
flex-basis: 70px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex: 0 0 70px;
|
||||
}
|
||||
|
||||
.color-picker-context__color-hex {
|
||||
|
|
@ -33,9 +31,7 @@
|
|||
}
|
||||
|
||||
.color-picker-context__color-opacity {
|
||||
flex-basis: 70px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex: 0 0 70px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,10 +15,11 @@
|
|||
position: relative;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
|
||||
@include rounded($rounded);
|
||||
|
||||
&:not(.active):hover {
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 0 2px rga(0, 0, 0, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.context {
|
||||
.context,
|
||||
%context {
|
||||
position: absolute;
|
||||
z-index: $z-index-context;
|
||||
white-space: nowrap;
|
||||
|
|
@ -31,8 +32,7 @@
|
|||
&.context--overflow-scroll {
|
||||
// This must be added for the v-auto-overflow-scroll to work. It will be overwritten
|
||||
// if the scrollable part has a lower height.
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden scroll;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
.context__menu-title {
|
||||
color: $palette-neutral-900;
|
||||
padding: 12px 8px 2px 8px;
|
||||
padding: 12px 8px 2px;
|
||||
line-height: 13px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
height: 17px;
|
||||
justify-content: center;
|
||||
|
||||
@include flex-align-items();
|
||||
@include flex-align-items;
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
.dashboard__sidebar-group {
|
||||
list-style: none;
|
||||
margin: 0 0 30px 0;
|
||||
margin: 0 0 30px;
|
||||
padding: 0;
|
||||
|
||||
li:not(:last-child) {
|
||||
|
|
@ -173,13 +173,14 @@
|
|||
content: '';
|
||||
background-color: $color-neutral-100;
|
||||
z-index: -1;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard__group-item-icon {
|
||||
@include flex-align-items();
|
||||
@include flex-align-items;
|
||||
@include rounded($rounded);
|
||||
|
||||
background-color: $color-primary-500;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 30px 0 20px 0;
|
||||
margin: 30px 0 20px;
|
||||
padding: 0 40px;
|
||||
color: $color-neutral-900;
|
||||
}
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
%data-table__table-cell-content {
|
||||
%data-table-table-cell-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
}
|
||||
|
||||
.data-table__table-cell-content {
|
||||
@extend %data-table__table-cell-content;
|
||||
@extend %data-table-table-cell-content;
|
||||
|
||||
height: 60px;
|
||||
font-size: 14px;
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
}
|
||||
|
||||
.data-table__table-cell-head {
|
||||
@extend %data-table__table-cell-content;
|
||||
@extend %data-table-table-cell-content;
|
||||
|
||||
height: 48px;
|
||||
color: $color-neutral-600;
|
||||
|
|
@ -177,6 +177,7 @@
|
|||
|
||||
.data-table__table-cell-head-sort-icon {
|
||||
font-size: 14px;
|
||||
|
||||
@include flex-align-items(4px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* stylelint-disable selector-class-pattern */
|
||||
// This file changes the existing datepicker styling such that it is conform the style
|
||||
// of Baserow.
|
||||
|
||||
|
|
@ -29,13 +30,14 @@
|
|||
}
|
||||
|
||||
header {
|
||||
@include flex-align-items();
|
||||
@include flex-align-items;
|
||||
|
||||
line-height: 25px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.prev {
|
||||
/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
|
||||
@extend .iconoir-nav-arrow-left;
|
||||
@extend %icon;
|
||||
|
||||
|
|
@ -45,6 +47,7 @@
|
|||
}
|
||||
|
||||
.next {
|
||||
/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
|
||||
@extend .iconoir-nav-arrow-right;
|
||||
@extend %icon;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,6 @@
|
|||
height: 17px;
|
||||
justify-content: center;
|
||||
|
||||
@include flex-align-items();
|
||||
@include flex-align-items;
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
.decorator-context__decorator {
|
||||
border-bottom: 1px solid $color-neutral-200;
|
||||
padding: 18px 0 18px 0;
|
||||
padding: 18px 0;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.decorator-item {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
.decorator-list__item {
|
||||
cursor: pointer;
|
||||
padding: 12px;
|
||||
|
||||
@include rounded($rounded);
|
||||
|
||||
&:not(:last-child) {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
.value-provider-list__item {
|
||||
position: relative;
|
||||
padding: 12px;
|
||||
|
||||
@include rounded($rounded);
|
||||
|
||||
&:not(:last-child) {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
.delete-section {
|
||||
position: relative;
|
||||
border: solid 1px $color-neutral-200;
|
||||
padding: 31px 16px 16px 16px;
|
||||
padding: 31px 16px 16px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.dropdown {
|
||||
position: relative;
|
||||
background-color: $white;
|
||||
|
||||
@include elevation($elevation-low);
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
|
@ -41,6 +42,7 @@
|
|||
|
||||
.dropdown.dropdown--small & {
|
||||
padding: 8px 12px;
|
||||
|
||||
@include fixed-height(36px, 13px);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
margin-bottom: 10px;
|
||||
background-color: $color-neutral-100;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include rounded($rounded-2xl);
|
||||
}
|
||||
|
||||
|
|
@ -54,6 +55,7 @@
|
|||
margin-top: 10px;
|
||||
margin-bottom: 9px;
|
||||
user-select: none;
|
||||
|
||||
@include rounded($rounded-2xl);
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
padding: 20px;
|
||||
border: 1px solid $color-neutral-200;
|
||||
background-color: $color-neutral-100;
|
||||
|
||||
@include rounded($rounded-md);
|
||||
|
||||
.expandable--expanded & {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
border: 1px solid $color-neutral-200;
|
||||
|
||||
@include rounded($rounded);
|
||||
@include flex-align-items();
|
||||
@include flex-align-items;
|
||||
|
||||
&.field-boolean__checkbox--disabled {
|
||||
cursor: initial;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.field-file__list {
|
||||
list-style: none;
|
||||
margin: 0 0 20px 0;
|
||||
margin: 0 0 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.field-last-modified-by {
|
||||
height: 24px;
|
||||
margin: 5px 4px 5px 4px;
|
||||
margin: 5px 4px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.field-long-text {
|
||||
.field-long-text,
|
||||
%field-long-text {
|
||||
resize: vertical;
|
||||
height: 22px * 6;
|
||||
line-height: 22px;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
.field-multiple-collaborators__item {
|
||||
height: 24px;
|
||||
margin: 5px 4px 5px 4px;
|
||||
margin: 5px 4px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
padding: 0 2px;
|
||||
justify-content: center;
|
||||
|
||||
@include flex-align-items();
|
||||
@include flex-align-items;
|
||||
|
||||
&:hover {
|
||||
color: $color-neutral-500;
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@
|
|||
color: $color-neutral-900;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
||||
.field-rating {
|
||||
@extend %ellipsis;
|
||||
|
||||
@include fixed-height(32px, 13px);
|
||||
|
||||
padding-left: 5px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.field-rich-text {
|
||||
@extend .field-long-text;
|
||||
@extend %field-long-text;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
|
|
@ -80,9 +80,9 @@
|
|||
}
|
||||
|
||||
blockquote {
|
||||
@extend .rich-text-editor__content-blockquote;
|
||||
@extend %rich-text-editor-content-blockquote;
|
||||
|
||||
margin: 5px 0 0 0;
|
||||
margin: 5px 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
|
|
|
|||
|
|
@ -139,6 +139,7 @@
|
|||
.file-field-modal__nav-image {
|
||||
display: block;
|
||||
height: 48px;
|
||||
|
||||
@include rounded($rounded);
|
||||
|
||||
.file-field-modal__nav-link.active & {
|
||||
|
|
@ -170,8 +171,9 @@
|
|||
font-size: 20px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
@include rounded($rounded);
|
||||
@include flex-align-items();
|
||||
@include flex-align-items;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
grid-template-columns: 68px 1fr;
|
||||
margin-left: 5px;
|
||||
column-gap: 10px;
|
||||
|
||||
@include rounded($rounded);
|
||||
|
||||
&.filters__item--level-1 {
|
||||
|
|
@ -94,7 +95,7 @@
|
|||
justify-content: center;
|
||||
|
||||
@include elevation($elevation-low);
|
||||
@include flex-align-items();
|
||||
@include flex-align-items;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
|
@ -142,7 +143,7 @@
|
|||
line-height: 36px;
|
||||
}
|
||||
|
||||
.filters__combined_value-input {
|
||||
.filters__combined-value-input {
|
||||
&.filters__value-input--small {
|
||||
width: 50px;
|
||||
}
|
||||
|
|
@ -163,6 +164,7 @@
|
|||
.filters__value-rating {
|
||||
border: solid 1px $palette-neutral-400;
|
||||
padding: 6px 12px;
|
||||
|
||||
@include rounded($rounded);
|
||||
@include elevation($elevation-low);
|
||||
}
|
||||
|
|
@ -179,6 +181,7 @@
|
|||
padding: 0 10px;
|
||||
background-color: $white;
|
||||
width: 100%;
|
||||
|
||||
@include rounded($rounded);
|
||||
@include elevation($elevation-low);
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 12px;
|
||||
|
||||
@include flex-align-items(3px);
|
||||
|
||||
& + :not(.control__description) {
|
||||
|
|
@ -106,6 +107,7 @@
|
|||
line-height: 100%;
|
||||
height: 44px;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include elevation($elevation-low);
|
||||
|
||||
&::placeholder {
|
||||
|
|
@ -339,6 +341,7 @@
|
|||
margin-top: 14px;
|
||||
color: $palette-red-800;
|
||||
font-size: 12px;
|
||||
|
||||
@include flex-align-items(4px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
position: relative;
|
||||
height: 44px;
|
||||
box-sizing: border-box;
|
||||
@include elevation($elevation-low);
|
||||
|
||||
@include elevation($elevation-low);
|
||||
@include rounded($rounded-md);
|
||||
|
||||
&.form-input--small {
|
||||
|
|
@ -76,6 +76,7 @@
|
|||
padding-left: 38px;
|
||||
padding-right: 8px;
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.form- & {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
|
@ -90,6 +91,7 @@
|
|||
color: $palette-neutral-600;
|
||||
font-size: 16px;
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.form- & {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.formula-field {
|
||||
@extend .context;
|
||||
@extend %context;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
.formula-field__item-group-title {
|
||||
font-size: 12px;
|
||||
color: $color-neutral-600;
|
||||
padding: 0 12px 6px 12px;
|
||||
padding: 0 12px 6px;
|
||||
}
|
||||
|
||||
.formula-field__item {
|
||||
|
|
@ -94,6 +94,7 @@
|
|||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
color: $color-neutral-900;
|
||||
|
||||
@include rounded($rounded);
|
||||
@include flex-align-items(4px);
|
||||
|
||||
|
|
@ -143,6 +144,7 @@
|
|||
font-family: monospace;
|
||||
background-color: $color-neutral-100;
|
||||
padding: 6px 10px;
|
||||
|
||||
@include rounded($rounded);
|
||||
|
||||
code {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.ProseMirror div.is-editor-empty:first-child::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
border-radius: 3px;
|
||||
user-select: none;
|
||||
line-height: 18px;
|
||||
|
||||
@include rounded($rounded);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
flex-flow: row wrap;
|
||||
margin: 0 calc(var(--gap, #{$grid-width}) * -1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
.group-bys__item {
|
||||
position: relative;
|
||||
padding: 0 12px;
|
||||
|
||||
@include rounded($rounded);
|
||||
@include flex-align-items(10px);
|
||||
|
||||
|
|
@ -65,7 +66,7 @@
|
|||
justify-content: center;
|
||||
width: 22px;
|
||||
|
||||
@include flex-align-items();
|
||||
@include flex-align-items;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
|
@ -109,6 +110,7 @@
|
|||
font-weight: 600;
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
|
||||
@include rounded($rounded);
|
||||
@include flex-align-items(5px);
|
||||
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@
|
|||
}
|
||||
|
||||
.header__info {
|
||||
@extend .clearfix;
|
||||
@extend %clearfix;
|
||||
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -4,18 +4,18 @@
|
|||
}
|
||||
|
||||
.hidings__head {
|
||||
padding: 4px 16px 0 16px;
|
||||
padding: 4px 16px 0;
|
||||
}
|
||||
|
||||
.hidings__cover {
|
||||
margin: 16px 0 10px 0;
|
||||
margin: 16px 0 10px;
|
||||
}
|
||||
|
||||
.hidings__search {
|
||||
position: relative;
|
||||
border-bottom: 1px solid $color-neutral-200;
|
||||
|
||||
@include flex-align-items();
|
||||
@include flex-align-items;
|
||||
}
|
||||
|
||||
.hidings__search-icon {
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
.hidings__list {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 8px 0 0 0;
|
||||
margin: 8px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
padding: 8px 16px 16px 16px;
|
||||
padding: 8px 16px 16px;
|
||||
}
|
||||
|
||||
.hidings__footer-button:not(:last-child) {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
.import-modal__header {
|
||||
@extend .box__title;
|
||||
@extend %box-title;
|
||||
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin: 0 30px 0 30px;
|
||||
margin: 0 30px;
|
||||
height: 100%;
|
||||
border-top-left-radius: 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
.layout {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.layout__col-1 {
|
||||
|
|
@ -22,10 +19,7 @@
|
|||
.layout__col-2 {
|
||||
position: absolute;
|
||||
z-index: $z-index-layout-col-3;
|
||||
left: 240px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
inset: 0 0 0 240px;
|
||||
|
||||
.layout--collapsed & {
|
||||
left: 48px;
|
||||
|
|
@ -54,8 +48,5 @@
|
|||
.layout__col-2-2 {
|
||||
position: absolute;
|
||||
z-index: $z-index-layout-col-3-2;
|
||||
left: 0;
|
||||
top: 52px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 52px 0 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,5 +23,5 @@
|
|||
}
|
||||
|
||||
.list__right-side {
|
||||
@include flex-align-items();
|
||||
@include flex-align-items;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.loading {
|
||||
@include loading();
|
||||
@include loading;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
width: 100%;
|
||||
background-color: $color-neutral-100;
|
||||
margin-right: 30px;
|
||||
|
||||
@include rounded($rounded-md);
|
||||
}
|
||||
|
||||
|
|
@ -19,6 +20,7 @@
|
|||
background-color: $color-success-300;
|
||||
height: 100%;
|
||||
transition-timing-function: linear;
|
||||
|
||||
@include rounded($rounded-md);
|
||||
}
|
||||
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue