mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-08 18:40:35 +00:00
Merge pull request #18030 from overleaf/rd-bootstrap-settings-css
Migrate account-settings.less file to Bootstrap 5 and Sass GitOrigin-RevId: 898cd811d6a0576cb0faacdd729461198324d2d5
This commit is contained in:
Rebeka Dekany
Copybot
parent
e9586079d4
commit
46485e0347
8 changed files with 233 additions and 5 deletions
|
|
@ -30,7 +30,7 @@
|
|||
.affiliations-table-cell-tabbed {
|
||||
margin: @margin-sm 0 0 @margin-md;
|
||||
padding-left: @margin-sm;
|
||||
border-left: 2px solid @table-border-color;
|
||||
border-left: 2px solid @table-border-color; // don't migrate this line of style
|
||||
}
|
||||
.affiliations-table-row--highlighted {
|
||||
background-color: tint(@content-alt-bg-color, 6%);
|
||||
|
|
@ -152,8 +152,9 @@ tbody > tr.affiliations-table-warning-row > td {
|
|||
}
|
||||
|
||||
.settings-widget-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
display: grid;
|
||||
grid-template-columns: 40px 1fr auto;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
|
||||
|
|
@ -177,8 +178,7 @@ tbody > tr.affiliations-table-warning-row > td {
|
|||
}
|
||||
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
margin-bottom: 10px;
|
||||
|
||||
> h4 {
|
||||
|
|
@ -196,6 +196,12 @@ tbody > tr.affiliations-table-warning-row > td {
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.settings-widget-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// Should not be migrated to BS5
|
||||
.settings-reconfirm-info {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ $btn-padding-y: $spacing-02;
|
|||
$btn-border-radius: $border-radius-full;
|
||||
$btn-border-radius-lg: $border-radius-full;
|
||||
$btn-border-radius-sm: $border-radius-full;
|
||||
$btn-white-space: nowrap;
|
||||
|
||||
// Colors
|
||||
$primary: $bg-accent-01;
|
||||
|
|
|
|||
|
|
@ -40,5 +40,11 @@
|
|||
// Utilities
|
||||
@import 'bootstrap-5/scss/utilities/api';
|
||||
|
||||
// Mixins
|
||||
@import 'bootstrap-5/scss/mixins/breakpoints';
|
||||
|
||||
// Components custom style
|
||||
@import '../components/all';
|
||||
|
||||
// Pages custom style
|
||||
@import '../pages/all';
|
||||
|
|
|
|||
|
|
@ -29,3 +29,7 @@ $footer-height: 50px;
|
|||
hr {
|
||||
opacity: unset;
|
||||
}
|
||||
|
||||
.horizontal-divider {
|
||||
border-top: 1px solid var(--border-divider);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -157,6 +157,7 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-04); // Add gap between text and icons
|
||||
justify-content: center;
|
||||
|
||||
.icon-small {
|
||||
font-size: 20px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,208 @@
|
|||
.affiliations-table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.affiliations-table-cell {
|
||||
padding: var(--spacing-04);
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.affiliations-table-cell-tabbed {
|
||||
margin: var(--spacing-04) 0 0 var(--spacing-07);
|
||||
padding-left: var(--spacing-04);
|
||||
}
|
||||
|
||||
.affiliations-table-row--highlighted {
|
||||
background-color: var(--bg-light-secondary);
|
||||
}
|
||||
|
||||
.affiliations-table-inline-action {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.affiliation-change-container {
|
||||
margin-top: var(--spacing-04);
|
||||
}
|
||||
|
||||
.affiliations-table-label {
|
||||
padding-top: var(--spacing-02);
|
||||
}
|
||||
|
||||
.btn-link-accounts {
|
||||
margin-bottom: var(--spacing-03);
|
||||
}
|
||||
|
||||
.settings-widget-status-icon,
|
||||
.dropbox-sync-icon {
|
||||
position: relative;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.3em;
|
||||
vertical-align: top;
|
||||
&.status-error,
|
||||
&.dropbox-sync-icon-error {
|
||||
color: var(--bg-danger-01);
|
||||
}
|
||||
&.status-success,
|
||||
&.dropbox-sync-icon-success {
|
||||
color: var(--content-positive);
|
||||
}
|
||||
&.status-pending,
|
||||
&.dropbox-sync-icon-updating {
|
||||
color: var(--bg-info-01);
|
||||
&::after {
|
||||
content: '\f021';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -20%;
|
||||
font-size: 60%;
|
||||
color: #fff;
|
||||
animation: fa-spin 2s infinite linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-widgets-container {
|
||||
border: 1px solid var(--border-divider);
|
||||
|
||||
hr {
|
||||
margin: 0 var(--spacing-05);
|
||||
}
|
||||
}
|
||||
|
||||
.settings-widget-container {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 1fr auto;
|
||||
gap: var(--spacing-07);
|
||||
align-items: center;
|
||||
padding: var(--spacing-05);
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: var(--spacing-07);
|
||||
|
||||
&:last-child {
|
||||
padding-right: var(--spacing-00);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.description-container {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.title-row {
|
||||
margin: var(--spacing-00);
|
||||
margin-bottom: var(--spacing-05);
|
||||
|
||||
> h4 {
|
||||
margin: 0;
|
||||
margin-right: var(--spacing-05);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--spacing-05);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: var(--spacing-00);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.settings-widget-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// Prevents icon from large account linking sections, such as the git bridge,
|
||||
// from rendering in the center of the widget, anchoring it to the top
|
||||
.linking-icon-fixed-position {
|
||||
align-self: start;
|
||||
padding-top: var(--spacing-05);
|
||||
}
|
||||
|
||||
// overrides the default `Col` padding, as the inner `affiliations-table-cell` has its own padding, and
|
||||
// the content length of the git-bridge token table is pretty much fixed (tokens and dates)
|
||||
.linking-git-bridge-table-cell {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.linking-git-bridge-revoke-button {
|
||||
padding: var(--spacing-01) var(--spacing-02);
|
||||
}
|
||||
|
||||
.enrollment-alert {
|
||||
width: 100%;
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-05);
|
||||
background-color: var(--bg-info-03);
|
||||
border: 1px solid var(--border-divider);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.icon {
|
||||
flex: 1 1 auto;
|
||||
padding: 0 var(--spacing-06) 0 var(--spacing-02);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.security-row {
|
||||
.line-header > b {
|
||||
color: var(--content-primary);
|
||||
}
|
||||
|
||||
color: var(--content-secondary);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: var(--spacing-03) 0;
|
||||
|
||||
.icon {
|
||||
color: var(--content-primary);
|
||||
display: flex;
|
||||
flex: 1 1 7%;
|
||||
padding: 0 var(--spacing-06);
|
||||
margin-top: var(--spacing-06);
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1 1 93%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: var(--spacing-06);
|
||||
}
|
||||
|
||||
.button-column {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
@include body-sm;
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-01) var(--spacing-02);
|
||||
margin-top: var(--spacing-02);
|
||||
margin-left: var(--spacing-04);
|
||||
flex-shrink: 0;
|
||||
|
||||
&.status-label-configured {
|
||||
background-color: var(--bg-accent-01);
|
||||
color: var(--content-secondary-dark);
|
||||
}
|
||||
|
||||
&.status-label-ready {
|
||||
background-color: var(--bg-light-tertiary);
|
||||
color: var(--content-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import 'account-settings';
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
// migrated to layout.scss
|
||||
.horizontal-divider {
|
||||
border-top: 1px solid @hr-border;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue