overleaf/services/web/frontend/stylesheets/bootstrap-5/pages/account-settings.scss
Rebeka Dekany 6cb956b1ff Merge pull request #19472 from overleaf/rd-stylelint-ci
[web] Add Stylelint formatting to the CI

GitOrigin-RevId: f31139f9f6f70aa96214b59db37ad1f79cd1e733
2024-07-23 08:04:09 +00:00

199 lines
3.7 KiB
SCSS

.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 {
display: flex;
align-items: center;
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(md) {
.settings-widget-container {
grid-template-columns: 1fr;
.title-row {
display: unset;
}
}
}
// 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);
}
.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);
}
}
}