overleaf/services/web/frontend/stylesheets/app/editor/table-generator.less
Mathias Jakobsen 421186df1c Merge pull request #14288 from overleaf/mj-table-gen-error-state-rework
[visual] Update look of table generator error state

GitOrigin-RevId: a16787131236ed2a59af48639c4ae5d196b39597
2023-08-15 08:03:08 +00:00

390 lines
7.8 KiB
Text

@table-generator-active-border-color: #666;
@table-generator-inactive-border-color: #dedede;
@table-generator-focus-border-width: 2px;
@table-generator-focus-negative-border-width: -2px;
@table-generator-focus-border-color: #97b6e5;
@table-generator-selector-hover-color: #3265b2;
@table-generator-selector-handle-buffer: 12px;
@table-generator-toolbar-shadow-color: #1e253029;
@table-generator-toolbar-background: #fff;
@table-generator-inactive-border-width: 1px;
@table-generator-active-border-width: 1px;
.table-generator-cell {
border: @table-generator-inactive-border-width dashed
@table-generator-inactive-border-color;
min-width: 40px;
height: 30px;
}
.table-generator-cell-border-left {
border-left-style: solid;
border-left-color: @table-generator-active-border-color;
border-left-width: @table-generator-active-border-width;
}
.table-generator-cell-border-right {
border-right-style: solid;
border-right-color: @table-generator-active-border-color;
border-right-width: @table-generator-active-border-width;
}
.table-generator-row-border-top {
border-top-style: solid;
border-top-color: @table-generator-active-border-color;
border-top-width: @table-generator-active-border-width;
}
.table-generator-row-border-bottom {
border-bottom-style: solid;
border-bottom-color: @table-generator-active-border-color;
border-bottom-width: @table-generator-active-border-width;
}
.table-generator-cell.selected {
background-color: @blue-10;
}
.table-generator-cell:focus-visible {
outline: 2px dotted @table-generator-focus-border-color;
}
.table-generator-cell {
&.selection-edge-top {
--shadow-top: 0 @table-generator-focus-negative-border-width 0
@table-generator-focus-border-color;
}
&.selection-edge-bottom {
--shadow-bottom: 0 @table-generator-focus-border-width 0
@table-generator-focus-border-color;
}
&.selection-edge-left {
--shadow-left: @table-generator-focus-negative-border-width 0 0
@table-generator-focus-border-color;
}
&.selection-edge-right {
--shadow-right: @table-generator-focus-border-width 0 0
@table-generator-focus-border-color;
}
box-shadow: var(--shadow-top, 0 0 0 transparent),
var(--shadow-bottom, 0 0 0 transparent),
var(--shadow-left, 0 0 0 transparent),
var(--shadow-right, 0 0 0 transparent);
}
.table-generator-table {
table-layout: fixed;
max-width: 80%;
margin: 0 auto;
cursor: default;
& td {
padding: 0 0.25em;
max-width: 200px;
&.alignment-left {
text-align: left;
}
&.alignment-right {
text-align: right;
}
&.alignment-center {
text-align: center;
}
&.alignment-paragraph {
text-align: justify;
}
}
.table-generator-selector-cell {
padding: 0;
border: none !important;
position: relative;
cursor: pointer;
&.row-selector {
width: @table-generator-selector-handle-buffer + 8px;
&::after {
width: 4px;
height: calc(100% - 8px);
}
}
&.column-selector {
height: @table-generator-selector-handle-buffer + 8px;
&::after {
width: calc(100% - 8px);
height: 4px;
}
}
&::after {
content: '';
display: block;
position: absolute;
bottom: 4px;
right: 4px;
width: calc(100% - 8px);
height: calc(100% - 8px);
background-color: @neutral-30;
border-radius: 4px;
}
&:hover::after {
background-color: @neutral-40;
}
&.fully-selected::after {
background-color: @table-generator-selector-hover-color;
}
}
}
.table-generator {
position: relative;
}
.table-generator-floating-toolbar {
position: absolute;
top: -36px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
border-radius: 4px;
width: max-content;
background-color: @table-generator-toolbar-background;
box-shadow: 0px 2px 4px 0px @table-generator-toolbar-shadow-color;
padding: 4px;
height: 40px;
display: flex;
}
.table-generator-toolbar-button {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
background-color: transparent;
border: none;
border-radius: 4px;
line-height: 1;
overflow: hidden;
color: @neutral-70;
text-align: center;
padding: 4px;
&:not(:first-child) {
margin-left: 4px;
}
&:not(:last-child) {
margin-right: 4px;
}
& > span {
font-size: 24px;
}
&:hover,
&:focus {
background-color: rgba(47, 58, 76, 0.08);
}
&:active,
&.active {
background-color: rgba(47, 58, 76, 0.16);
}
&:hover,
&:focus,
&:active,
&.active {
color: inherit;
box-shadow: none;
}
&[aria-disabled='true'] {
&:hover,
&:focus,
&:active,
&.active {
background-color: transparent;
}
color: @neutral-40;
}
}
.table-generator-button-group {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
overflow: hidden;
&:not(:first-child) {
border-left: 1px solid @neutral-20;
padding-left: 8px;
margin-left: 8px;
}
}
.table-generator-button-menu-popover {
.popover-content {
padding: 4px;
}
.list-group {
margin: 0;
padding: 0;
}
& > .arrow {
display: none;
}
}
.table-generator-cell-input {
max-width: calc(200px - 0.5em);
width: 100%;
background-color: transparent;
border: 1px solid @table-generator-toolbar-shadow-color;
border: 0;
padding: 0;
}
.table-generator-border-options-coming-soon {
display: flex;
margin: 4px;
font-size: 12px;
background: @neutral-10;
color: @neutral-70;
padding: 8px;
gap: 6px;
align-items: flex-start;
max-width: 240px;
& .info-icon {
flex: 0 0 24px;
}
}
.table-generator-toolbar-dropdown-toggle {
border: 1px solid @neutral-60;
box-shadow: none;
background: transparent;
white-space: nowrap;
color: inherit;
border-radius: 4px;
padding: 6px 8px;
gap: 8px;
min-width: 120px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
font-family: @font-family-sans-serif;
&:not(:first-child) {
margin-left: 8px;
}
&[aria-disabled='true'] {
background-color: #f2f2f2;
color: @neutral-40;
}
}
.table-generator-toolbar-dropdown-popover {
max-width: 300px;
.popover-content {
padding: 0;
}
& > .arrow {
display: none;
}
}
.table-generator-toolbar-dropdown-menu {
display: flex;
flex-direction: column;
min-width: 200px;
& > button {
border: none;
box-shadow: none;
background: transparent;
white-space: nowrap;
color: inherit;
border-radius: 0;
font-size: 14px;
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 8px;
align-self: stretch;
padding: 12px 8px;
font-family: @font-family-sans-serif;
.table-generator-button-label {
align-self: stretch;
flex: 1 0 auto;
text-align: left;
}
&:hover,
&:focus {
background-color: rgba(47, 58, 76, 0.08);
}
&:active,
&.active {
background-color: rgba(47, 58, 76, 0.16);
}
&:hover,
&:focus,
&:active,
&.active {
color: inherit;
box-shadow: none;
}
&[aria-disabled='true'] {
&:hover,
&:focus,
&:active,
&.active {
background-color: transparent;
}
color: @neutral-40;
}
}
& > hr {
background: @neutral-20;
margin: 2px 8px;
display: block;
box-sizing: content-box;
border: 0;
height: 1px;
}
}
.table-generator-error {
background: linear-gradient(0deg, #f9f1f1, #f9f1f1),
linear-gradient(0deg, #f5beba, #f5beba);
display: flex;
justify-content: space-between;
color: black;
border: 1px solid #f5beba;
font-family: @font-family-sans-serif;
margin-bottom: 0;
.table-generator-error-message {
flex: 1 0 auto;
}
.table-generator-error-icon {
color: #b83a33;
margin-right: 12px;
}
}