mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
Merge pull request #19331 from overleaf/jel-light-touch-rename-css
[web] Rename CSS variables for light touch redesign GitOrigin-RevId: 8a56c56e2a743e935d70bd585d8c62a93faba0eb
This commit is contained in:
Jessica Lawshe
Copybot
parent
9babc70df7
commit
68e42efb20
2 changed files with 56 additions and 55 deletions
|
|
@ -108,23 +108,23 @@ mixin plans_table(period, config)
|
|||
for featuresPerSection in config.features
|
||||
- var dividerColspan = Object.values(config.tableHead).reduce((prev, curr) => (prev) + (curr.colspan || 1), baseColspan)
|
||||
if featuresPerSection.divider
|
||||
tr.plans-v2-table-divider
|
||||
tr.plans-table-divider
|
||||
td(
|
||||
colspan=dividerColspan
|
||||
class=((config.highlightedColumn.index === Object.keys(config.tableHead).length - 1) ? 'plans-v2-table-divider-highlighted' : '')
|
||||
class=((config.highlightedColumn.index === Object.keys(config.tableHead).length - 1) ? 'plans-table-last-col-highlighted' : '')
|
||||
)
|
||||
div
|
||||
b.plans-v2-table-divider-label #{translate(featuresPerSection.dividerLabel)}
|
||||
b.plans-table-divider-label #{translate(featuresPerSection.dividerLabel)}
|
||||
//- will only appear on screen width >= 768px (using CSS)
|
||||
i.fa.fa-question-circle.plans-v2-table-divider-question-icon(
|
||||
i.fa.fa-question-circle(
|
||||
data-toggle="tooltip"
|
||||
title=translate(featuresPerSection.dividerInfo),
|
||||
data-placement="top"
|
||||
)
|
||||
//- will only appear on screen width < 768px (using CSS)
|
||||
span.plans-v2-table-divider-learn-more-container
|
||||
span.plans-table-divider-learn-more-container
|
||||
span (
|
||||
span.plans-v2-table-divider-learn-more-text(
|
||||
span.plans-table-divider-learn-more-text(
|
||||
data-toggle="tooltip"
|
||||
title=translate(featuresPerSection.dividerInfo),
|
||||
data-placement="top"
|
||||
|
|
@ -144,19 +144,19 @@ mixin plans_table(period, config)
|
|||
colspan=baseColspan
|
||||
scope="row"
|
||||
)
|
||||
.plans-v2-table-feature-name
|
||||
.plans-table-feature-name
|
||||
if feature.info
|
||||
span #{translate(feature.feature)}
|
||||
//- will only appear on screen width >= 768px (using CSS)
|
||||
i.fa.fa-question-circle.plans-v2-table-feature-name-question-icon(
|
||||
i.fa.fa-question-circle.plans-table-feature-question-icon(
|
||||
data-toggle="tooltip"
|
||||
title=translate(feature.info),
|
||||
data-placement="right"
|
||||
)
|
||||
//- will only appear on screen width < 768px (using CSS)
|
||||
span.plans-v2-table-feature-name-learn-more-container
|
||||
span.plans-table-feature-learn-more-container
|
||||
span (
|
||||
span.plans-v2-table-feature-name-learn-more-text(
|
||||
span.plans-table-feature-learn-more-text(
|
||||
data-toggle="tooltip"
|
||||
title=translate(feature.info),
|
||||
data-placement="top"
|
||||
|
|
@ -285,7 +285,7 @@ mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEve
|
|||
- var segmentation = JSON.stringify(Object.assign({}, {button: 'group_organization-link', location: 'table-header-list', period: 'annual'}, additionalEventSegmentation))
|
||||
.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("organization")}
|
||||
.plans-v2-table-comments-icon
|
||||
.plans-table-comments-icon
|
||||
i.fa.fa-comments-o
|
||||
.plans-table-btn-buy-container-mobile
|
||||
+btn_buy_group_organization(highlighted, eventTrackingKey)
|
||||
|
|
@ -336,7 +336,7 @@ mixin table_head_student_student(highlighted, eventTrackingKey, additionalEventS
|
|||
mixin table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
div.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("university")}
|
||||
div.plans-v2-table-comments-icon
|
||||
div.plans-table-comments-icon
|
||||
i.fa.fa-comments-o
|
||||
.plans-table-btn-buy-container-mobile
|
||||
+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
|
|
@ -377,7 +377,7 @@ mixin table_cell(feature, plan)
|
|||
span.sr-only #{translate("feature_not_included")}
|
||||
|
||||
mixin group_plans_license_picker()
|
||||
form.plans-v2-license-picker-form(data-ol-plans-v2-license-picker-form)
|
||||
form.plans-license-picker-form(data-ol-plans-v2-license-picker-form)
|
||||
.plans-v2-license-picker-select-container
|
||||
span #{translate("number_of_users_with_colon")}
|
||||
select.plans-v2-license-picker-select(
|
||||
|
|
@ -567,20 +567,20 @@ mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, p
|
|||
|
||||
mixin plans_v2_table_sticky_header(withSwitch, config)
|
||||
- var tableHeadKeys = Object.keys(config.tableHead)
|
||||
.row.plans-v2-table-sticky-header.sticky(
|
||||
.row.plans-table-sticky-header.sticky(
|
||||
data-ol-plans-v2-table-sticky-header
|
||||
class=(withSwitch ? 'plans-v2-table-sticky-header-with-switch' : 'plans-v2-table-sticky-header-without-switch')
|
||||
class=(withSwitch ? 'plans-table-sticky-header-with-switch' : 'plans-table-sticky-header-without-switch')
|
||||
)
|
||||
- for (var i = 0; i < tableHeadKeys.length; i++)
|
||||
- var tableHeadKey = tableHeadKeys[i]
|
||||
- var translateKey = tableHeadKey.split('_')[1]
|
||||
-
|
||||
if (config.highlightedColumn.index === i) {
|
||||
var elClass = 'plans-v2-table-sticky-header-item-green-highlighted'
|
||||
var elClass = 'plans-table-sticky-header-item-green-highlighted'
|
||||
} else {
|
||||
var elClass = ''
|
||||
}
|
||||
.plans-v2-table-sticky-header-item(
|
||||
.plans-table-sticky-header-item(
|
||||
class=elClass
|
||||
)
|
||||
case tableHeadKey
|
||||
|
|
@ -594,16 +594,16 @@ mixin plans_v2_table_sticky_header(withSwitch, config)
|
|||
span #{translate(translateKey)}
|
||||
|
||||
mixin table_sticky_header_all(plansConfig)
|
||||
.row.plans-v2-table-sticky-header-container(
|
||||
.row.plans-table-sticky-header-container(
|
||||
data-ol-plans-v2-view='individual'
|
||||
)
|
||||
+plans_v2_table_sticky_header(true, plansConfig.individual)
|
||||
.row.plans-v2-table-sticky-header-container(
|
||||
.row.plans-table-sticky-header-container(
|
||||
hidden
|
||||
data-ol-plans-v2-view='group'
|
||||
)
|
||||
+plans_v2_table_sticky_header(false, plansConfig.group)
|
||||
.row.plans-v2-table-sticky-header-container(
|
||||
.row.plans-table-sticky-header-container(
|
||||
hidden
|
||||
data-ol-plans-v2-view='student'
|
||||
)
|
||||
|
|
|
|||
|
|
@ -305,6 +305,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
//- class toggled by JS
|
||||
&.plans-v2-m-a-tooltip-monthly-selected {
|
||||
right: -119%;
|
||||
}
|
||||
|
|
@ -330,7 +331,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-comments-icon {
|
||||
.plans-table-comments-icon {
|
||||
height: 65px;
|
||||
|
||||
i {
|
||||
|
|
@ -346,7 +347,7 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.plans-v2-license-picker-form {
|
||||
.plans-license-picker-form {
|
||||
margin-top: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -605,7 +606,7 @@
|
|||
|
||||
&:not(.plans-table-cell-before-green-highlighted-column):not(
|
||||
.plans-table-green-highlighted
|
||||
):not(.plans-v2-table-divider-highlighted) {
|
||||
):not(.plans-table-last-col-highlighted) {
|
||||
border-right: 1px solid @ol-blue-gray-0;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -638,7 +639,7 @@
|
|||
height: 100%;
|
||||
|
||||
&:last-child:not(.plans-table-green-highlighted):not(
|
||||
.plans-v2-table-divider-highlighted
|
||||
.plans-table-last-col-highlighted
|
||||
) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
|
@ -653,7 +654,7 @@
|
|||
// css hack for table border-radius on the first feature name
|
||||
&:nth-child(2) {
|
||||
.plans-table-row-header:first-child {
|
||||
.plans-v2-table-feature-name {
|
||||
.plans-table-feature-name {
|
||||
border-top-left-radius: @plans-table-border-radius;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -664,10 +665,10 @@
|
|||
}
|
||||
|
||||
&:not(.plans-table-row-last-row-per-section):not(
|
||||
.plans-v2-table-divider
|
||||
.plans-table-divider
|
||||
):not(:last-of-type) {
|
||||
th > .plans-table-th > .plans-table-th-content,
|
||||
td > .plans-v2-table-feature-name,
|
||||
td > .plans-table-feature-name,
|
||||
td > .plans-table-cell > .plans-table-cell-content {
|
||||
border-bottom: 1px solid @ol-blue-gray-0;
|
||||
|
||||
|
|
@ -695,10 +696,10 @@
|
|||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
// highlight rows on hover
|
||||
tr:not(.plans-v2-table-divider):not(:first-child):hover {
|
||||
tr:not(.plans-table-divider):not(:first-child):hover {
|
||||
background-color: @table-hover-bg;
|
||||
|
||||
.plans-v2-table-feature-name,
|
||||
.plans-table-feature-name,
|
||||
.plans-table-cell {
|
||||
background-color: @table-hover-bg;
|
||||
}
|
||||
|
|
@ -723,21 +724,21 @@
|
|||
// The forced width below (plans-table-cols-n) is to ensure the table columns have an equal width
|
||||
// because on mobile, the first column (empty cell on first `tr` and feature name on the rest of `tr`) will be shown as its own row
|
||||
// and the rest of the `tr` will incorporate a full width of the viewport
|
||||
tr.plans-table-cols-4:not(.plans-v2-table-divider) {
|
||||
tr.plans-table-cols-4:not(.plans-table-divider) {
|
||||
td,
|
||||
th:not(:first-of-type) {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
tr.plans-table-cols-3:not(.plans-v2-table-divider) {
|
||||
tr.plans-table-cols-3:not(.plans-table-divider) {
|
||||
td,
|
||||
th:not(:first-of-type) {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
}
|
||||
|
||||
tr.plans-table-cols-2:not(.plans-v2-table-divider) {
|
||||
tr.plans-table-cols-2:not(.plans-table-divider) {
|
||||
td,
|
||||
th:not(:first-of-type) {
|
||||
width: 50%;
|
||||
|
|
@ -760,7 +761,7 @@
|
|||
.plans-table-row-header {
|
||||
width: 100vw;
|
||||
|
||||
span.plans-v2-table-feature-name {
|
||||
span.plans-table-feature-name {
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
|
|
@ -962,17 +963,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-feature-name {
|
||||
.plans-table-feature-name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 6px 6px 6px 18px;
|
||||
|
||||
i.plans-v2-table-feature-name-question-icon {
|
||||
i.plans-table-feature-question-icon {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
span.plans-v2-table-feature-name-learn-more-container {
|
||||
span.plans-table-feature-learn-more-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -984,23 +985,23 @@
|
|||
background-color: @ol-blue-gray-0;
|
||||
min-height: @plans-table-td-mobile-min-height;
|
||||
|
||||
i.plans-v2-table-feature-name-question-icon {
|
||||
i.plans-table-feature-question-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.plans-v2-table-feature-name-learn-more-container {
|
||||
span.plans-table-feature-learn-more-container {
|
||||
margin-left: 5px;
|
||||
display: inline;
|
||||
// this white-space is important to ensure the "learn more" text won't get separated by a newline
|
||||
white-space: nowrap;
|
||||
|
||||
span.plans-v2-table-feature-name-learn-more-text {
|
||||
span.plans-table-feature-learn-more-text {
|
||||
color: @plans-learn-more-link-color;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
// force white-space to have initial value since the `white-space: nowrap` rule
|
||||
// on .plans-v2-table-feature-name-learn-more-container selector (the current code block) above
|
||||
// on .plans-table-feature-learn-more-container selector (the current code block) above
|
||||
// will also affect every child inside of it, including the generated tooltip
|
||||
white-space: initial;
|
||||
}
|
||||
|
|
@ -1008,7 +1009,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
tr.plans-v2-table-divider {
|
||||
tr.plans-table-divider {
|
||||
background-color: @ol-blue-gray-1;
|
||||
|
||||
// direct child selector to NOT affect the generated tooltip
|
||||
|
|
@ -1016,18 +1017,18 @@
|
|||
text-align: center;
|
||||
padding: 6px;
|
||||
|
||||
.plans-v2-table-divider-label {
|
||||
.plans-table-divider-label {
|
||||
margin-bottom: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.plans-v2-table-divider-learn-more-container {
|
||||
.plans-table-divider-learn-more-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// highlighted divider will only show if the highlighted column is on the last visible column
|
||||
.plans-v2-table-divider-highlighted > div {
|
||||
.plans-table-last-col-highlighted > div {
|
||||
border-right: 2px solid @ol-green;
|
||||
}
|
||||
|
||||
|
|
@ -1043,21 +1044,21 @@
|
|||
background-color: @ol-blue-gray-1;
|
||||
padding: 15px 5px;
|
||||
|
||||
i.plans-v2-table-divider-question-icon {
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.plans-v2-table-divider-learn-more-container {
|
||||
.plans-table-divider-learn-more-container {
|
||||
display: inline;
|
||||
// this white-space is important to ensure the "learn more" text won't get separated by a newline
|
||||
white-space: nowrap;
|
||||
|
||||
span.plans-v2-table-divider-learn-more-text {
|
||||
span.plans-table-divider-learn-more-text {
|
||||
color: @plans-learn-more-link-color;
|
||||
}
|
||||
|
||||
// force white-space to have initial value since the `white-space: nowrap` rule
|
||||
// on .plans-v2-table-divider-learn-more-container selector (the current code block) above
|
||||
// on .plans-table-divider-learn-more-container selector (the current code block) above
|
||||
// will also affect every child inside of it, including the generated tooltip
|
||||
.tooltip {
|
||||
white-space: initial;
|
||||
|
|
@ -1066,7 +1067,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-divider-highlighted > div {
|
||||
.plans-table-last-col-highlighted > div {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1117,7 +1118,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-sticky-header-container {
|
||||
.plans-table-sticky-header-container {
|
||||
@media (max-width: @screen-xs-max) {
|
||||
// `height: 60%` is just an arbitrary percentage
|
||||
// since we need to cover the whole plans_v2_table
|
||||
|
|
@ -1129,17 +1130,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-sticky-header-without-switch {
|
||||
.plans-table-sticky-header-without-switch {
|
||||
margin-bottom: -107px;
|
||||
margin-top: 67px;
|
||||
}
|
||||
|
||||
.plans-v2-table-sticky-header-with-switch {
|
||||
.plans-table-sticky-header-with-switch {
|
||||
margin-bottom: -140px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.plans-v2-table-sticky-header {
|
||||
.plans-table-sticky-header {
|
||||
display: none;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
|
|
@ -1158,7 +1159,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-sticky-header-item {
|
||||
.plans-table-sticky-header-item {
|
||||
background-color: @white;
|
||||
flex: 1 1 0px;
|
||||
|
||||
|
|
@ -1179,7 +1180,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.plans-v2-table-sticky-header-item-green-highlighted span {
|
||||
.plans-table-sticky-header-item-green-highlighted span {
|
||||
color: @ol-green;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue