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
|
for featuresPerSection in config.features
|
||||||
- var dividerColspan = Object.values(config.tableHead).reduce((prev, curr) => (prev) + (curr.colspan || 1), baseColspan)
|
- var dividerColspan = Object.values(config.tableHead).reduce((prev, curr) => (prev) + (curr.colspan || 1), baseColspan)
|
||||||
if featuresPerSection.divider
|
if featuresPerSection.divider
|
||||||
tr.plans-v2-table-divider
|
tr.plans-table-divider
|
||||||
td(
|
td(
|
||||||
colspan=dividerColspan
|
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
|
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)
|
//- 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"
|
data-toggle="tooltip"
|
||||||
title=translate(featuresPerSection.dividerInfo),
|
title=translate(featuresPerSection.dividerInfo),
|
||||||
data-placement="top"
|
data-placement="top"
|
||||||
)
|
)
|
||||||
//- will only appear on screen width < 768px (using CSS)
|
//- 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 (
|
||||||
span.plans-v2-table-divider-learn-more-text(
|
span.plans-table-divider-learn-more-text(
|
||||||
data-toggle="tooltip"
|
data-toggle="tooltip"
|
||||||
title=translate(featuresPerSection.dividerInfo),
|
title=translate(featuresPerSection.dividerInfo),
|
||||||
data-placement="top"
|
data-placement="top"
|
||||||
|
|
@ -144,19 +144,19 @@ mixin plans_table(period, config)
|
||||||
colspan=baseColspan
|
colspan=baseColspan
|
||||||
scope="row"
|
scope="row"
|
||||||
)
|
)
|
||||||
.plans-v2-table-feature-name
|
.plans-table-feature-name
|
||||||
if feature.info
|
if feature.info
|
||||||
span #{translate(feature.feature)}
|
span #{translate(feature.feature)}
|
||||||
//- will only appear on screen width >= 768px (using CSS)
|
//- 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"
|
data-toggle="tooltip"
|
||||||
title=translate(feature.info),
|
title=translate(feature.info),
|
||||||
data-placement="right"
|
data-placement="right"
|
||||||
)
|
)
|
||||||
//- will only appear on screen width < 768px (using CSS)
|
//- 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 (
|
||||||
span.plans-v2-table-feature-name-learn-more-text(
|
span.plans-table-feature-learn-more-text(
|
||||||
data-toggle="tooltip"
|
data-toggle="tooltip"
|
||||||
title=translate(feature.info),
|
title=translate(feature.info),
|
||||||
data-placement="top"
|
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))
|
- var segmentation = JSON.stringify(Object.assign({}, {button: 'group_organization-link', location: 'table-header-list', period: 'annual'}, additionalEventSegmentation))
|
||||||
.plans-table-th-content
|
.plans-table-th-content
|
||||||
p.plans-table-th-content-title #{translate("organization")}
|
p.plans-table-th-content-title #{translate("organization")}
|
||||||
.plans-v2-table-comments-icon
|
.plans-table-comments-icon
|
||||||
i.fa.fa-comments-o
|
i.fa.fa-comments-o
|
||||||
.plans-table-btn-buy-container-mobile
|
.plans-table-btn-buy-container-mobile
|
||||||
+btn_buy_group_organization(highlighted, eventTrackingKey)
|
+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)
|
mixin table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||||
div.plans-table-th-content
|
div.plans-table-th-content
|
||||||
p.plans-table-th-content-title #{translate("university")}
|
p.plans-table-th-content-title #{translate("university")}
|
||||||
div.plans-v2-table-comments-icon
|
div.plans-table-comments-icon
|
||||||
i.fa.fa-comments-o
|
i.fa.fa-comments-o
|
||||||
.plans-table-btn-buy-container-mobile
|
.plans-table-btn-buy-container-mobile
|
||||||
+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||||
|
|
@ -377,7 +377,7 @@ mixin table_cell(feature, plan)
|
||||||
span.sr-only #{translate("feature_not_included")}
|
span.sr-only #{translate("feature_not_included")}
|
||||||
|
|
||||||
mixin group_plans_license_picker()
|
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
|
.plans-v2-license-picker-select-container
|
||||||
span #{translate("number_of_users_with_colon")}
|
span #{translate("number_of_users_with_colon")}
|
||||||
select.plans-v2-license-picker-select(
|
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)
|
mixin plans_v2_table_sticky_header(withSwitch, config)
|
||||||
- var tableHeadKeys = Object.keys(config.tableHead)
|
- 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
|
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++)
|
- for (var i = 0; i < tableHeadKeys.length; i++)
|
||||||
- var tableHeadKey = tableHeadKeys[i]
|
- var tableHeadKey = tableHeadKeys[i]
|
||||||
- var translateKey = tableHeadKey.split('_')[1]
|
- var translateKey = tableHeadKey.split('_')[1]
|
||||||
-
|
-
|
||||||
if (config.highlightedColumn.index === i) {
|
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 {
|
} else {
|
||||||
var elClass = ''
|
var elClass = ''
|
||||||
}
|
}
|
||||||
.plans-v2-table-sticky-header-item(
|
.plans-table-sticky-header-item(
|
||||||
class=elClass
|
class=elClass
|
||||||
)
|
)
|
||||||
case tableHeadKey
|
case tableHeadKey
|
||||||
|
|
@ -594,16 +594,16 @@ mixin plans_v2_table_sticky_header(withSwitch, config)
|
||||||
span #{translate(translateKey)}
|
span #{translate(translateKey)}
|
||||||
|
|
||||||
mixin table_sticky_header_all(plansConfig)
|
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'
|
data-ol-plans-v2-view='individual'
|
||||||
)
|
)
|
||||||
+plans_v2_table_sticky_header(true, plansConfig.individual)
|
+plans_v2_table_sticky_header(true, plansConfig.individual)
|
||||||
.row.plans-v2-table-sticky-header-container(
|
.row.plans-table-sticky-header-container(
|
||||||
hidden
|
hidden
|
||||||
data-ol-plans-v2-view='group'
|
data-ol-plans-v2-view='group'
|
||||||
)
|
)
|
||||||
+plans_v2_table_sticky_header(false, plansConfig.group)
|
+plans_v2_table_sticky_header(false, plansConfig.group)
|
||||||
.row.plans-v2-table-sticky-header-container(
|
.row.plans-table-sticky-header-container(
|
||||||
hidden
|
hidden
|
||||||
data-ol-plans-v2-view='student'
|
data-ol-plans-v2-view='student'
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -305,6 +305,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//- class toggled by JS
|
||||||
&.plans-v2-m-a-tooltip-monthly-selected {
|
&.plans-v2-m-a-tooltip-monthly-selected {
|
||||||
right: -119%;
|
right: -119%;
|
||||||
}
|
}
|
||||||
|
|
@ -330,7 +331,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-v2-table-comments-icon {
|
.plans-table-comments-icon {
|
||||||
height: 65px;
|
height: 65px;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
|
|
@ -346,7 +347,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-v2-license-picker-form {
|
.plans-license-picker-form {
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -605,7 +606,7 @@
|
||||||
|
|
||||||
&:not(.plans-table-cell-before-green-highlighted-column):not(
|
&:not(.plans-table-cell-before-green-highlighted-column):not(
|
||||||
.plans-table-green-highlighted
|
.plans-table-green-highlighted
|
||||||
):not(.plans-v2-table-divider-highlighted) {
|
):not(.plans-table-last-col-highlighted) {
|
||||||
border-right: 1px solid @ol-blue-gray-0;
|
border-right: 1px solid @ol-blue-gray-0;
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @screen-xs-max) {
|
||||||
|
|
@ -638,7 +639,7 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
&:last-child:not(.plans-table-green-highlighted):not(
|
&:last-child:not(.plans-table-green-highlighted):not(
|
||||||
.plans-v2-table-divider-highlighted
|
.plans-table-last-col-highlighted
|
||||||
) {
|
) {
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -653,7 +654,7 @@
|
||||||
// css hack for table border-radius on the first feature name
|
// css hack for table border-radius on the first feature name
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
.plans-table-row-header:first-child {
|
.plans-table-row-header:first-child {
|
||||||
.plans-v2-table-feature-name {
|
.plans-table-feature-name {
|
||||||
border-top-left-radius: @plans-table-border-radius;
|
border-top-left-radius: @plans-table-border-radius;
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @screen-xs-max) {
|
||||||
|
|
@ -664,10 +665,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.plans-table-row-last-row-per-section):not(
|
&:not(.plans-table-row-last-row-per-section):not(
|
||||||
.plans-v2-table-divider
|
.plans-table-divider
|
||||||
):not(:last-of-type) {
|
):not(:last-of-type) {
|
||||||
th > .plans-table-th > .plans-table-th-content,
|
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 {
|
td > .plans-table-cell > .plans-table-cell-content {
|
||||||
border-bottom: 1px solid @ol-blue-gray-0;
|
border-bottom: 1px solid @ol-blue-gray-0;
|
||||||
|
|
||||||
|
|
@ -695,10 +696,10 @@
|
||||||
|
|
||||||
@media (min-width: @screen-sm-min) {
|
@media (min-width: @screen-sm-min) {
|
||||||
// highlight rows on hover
|
// 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;
|
background-color: @table-hover-bg;
|
||||||
|
|
||||||
.plans-v2-table-feature-name,
|
.plans-table-feature-name,
|
||||||
.plans-table-cell {
|
.plans-table-cell {
|
||||||
background-color: @table-hover-bg;
|
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
|
// 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
|
// 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
|
// 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,
|
td,
|
||||||
th:not(:first-of-type) {
|
th:not(:first-of-type) {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.plans-table-cols-3:not(.plans-v2-table-divider) {
|
tr.plans-table-cols-3:not(.plans-table-divider) {
|
||||||
td,
|
td,
|
||||||
th:not(:first-of-type) {
|
th:not(:first-of-type) {
|
||||||
width: calc(100% / 3);
|
width: calc(100% / 3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.plans-table-cols-2:not(.plans-v2-table-divider) {
|
tr.plans-table-cols-2:not(.plans-table-divider) {
|
||||||
td,
|
td,
|
||||||
th:not(:first-of-type) {
|
th:not(:first-of-type) {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
|
@ -760,7 +761,7 @@
|
||||||
.plans-table-row-header {
|
.plans-table-row-header {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
|
|
||||||
span.plans-v2-table-feature-name {
|
span.plans-table-feature-name {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
|
@ -962,17 +963,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-v2-table-feature-name {
|
.plans-table-feature-name {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 6px 6px 6px 18px;
|
padding: 6px 6px 6px 18px;
|
||||||
|
|
||||||
i.plans-v2-table-feature-name-question-icon {
|
i.plans-table-feature-question-icon {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
span.plans-v2-table-feature-name-learn-more-container {
|
span.plans-table-feature-learn-more-container {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -984,23 +985,23 @@
|
||||||
background-color: @ol-blue-gray-0;
|
background-color: @ol-blue-gray-0;
|
||||||
min-height: @plans-table-td-mobile-min-height;
|
min-height: @plans-table-td-mobile-min-height;
|
||||||
|
|
||||||
i.plans-v2-table-feature-name-question-icon {
|
i.plans-table-feature-question-icon {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
span.plans-v2-table-feature-name-learn-more-container {
|
span.plans-table-feature-learn-more-container {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
display: inline;
|
display: inline;
|
||||||
// this white-space is important to ensure the "learn more" text won't get separated by a newline
|
// this white-space is important to ensure the "learn more" text won't get separated by a newline
|
||||||
white-space: nowrap;
|
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;
|
color: @plans-learn-more-link-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip {
|
.tooltip {
|
||||||
// force white-space to have initial value since the `white-space: nowrap` rule
|
// 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
|
// will also affect every child inside of it, including the generated tooltip
|
||||||
white-space: initial;
|
white-space: initial;
|
||||||
}
|
}
|
||||||
|
|
@ -1008,7 +1009,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.plans-v2-table-divider {
|
tr.plans-table-divider {
|
||||||
background-color: @ol-blue-gray-1;
|
background-color: @ol-blue-gray-1;
|
||||||
|
|
||||||
// direct child selector to NOT affect the generated tooltip
|
// direct child selector to NOT affect the generated tooltip
|
||||||
|
|
@ -1016,18 +1017,18 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
|
|
||||||
.plans-v2-table-divider-label {
|
.plans-table-divider-label {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-v2-table-divider-learn-more-container {
|
.plans-table-divider-learn-more-container {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// highlighted divider will only show if the highlighted column is on the last visible column
|
// 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;
|
border-right: 2px solid @ol-green;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1043,21 +1044,21 @@
|
||||||
background-color: @ol-blue-gray-1;
|
background-color: @ol-blue-gray-1;
|
||||||
padding: 15px 5px;
|
padding: 15px 5px;
|
||||||
|
|
||||||
i.plans-v2-table-divider-question-icon {
|
i {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-v2-table-divider-learn-more-container {
|
.plans-table-divider-learn-more-container {
|
||||||
display: inline;
|
display: inline;
|
||||||
// this white-space is important to ensure the "learn more" text won't get separated by a newline
|
// this white-space is important to ensure the "learn more" text won't get separated by a newline
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
span.plans-v2-table-divider-learn-more-text {
|
span.plans-table-divider-learn-more-text {
|
||||||
color: @plans-learn-more-link-color;
|
color: @plans-learn-more-link-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
// force white-space to have initial value since the `white-space: nowrap` rule
|
// 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
|
// will also affect every child inside of it, including the generated tooltip
|
||||||
.tooltip {
|
.tooltip {
|
||||||
white-space: initial;
|
white-space: initial;
|
||||||
|
|
@ -1066,7 +1067,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-v2-table-divider-highlighted > div {
|
.plans-table-last-col-highlighted > div {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1117,7 +1118,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-v2-table-sticky-header-container {
|
.plans-table-sticky-header-container {
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @screen-xs-max) {
|
||||||
// `height: 60%` is just an arbitrary percentage
|
// `height: 60%` is just an arbitrary percentage
|
||||||
// since we need to cover the whole plans_v2_table
|
// 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-bottom: -107px;
|
||||||
margin-top: 67px;
|
margin-top: 67px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-v2-table-sticky-header-with-switch {
|
.plans-table-sticky-header-with-switch {
|
||||||
margin-bottom: -140px;
|
margin-bottom: -140px;
|
||||||
margin-top: 100px;
|
margin-top: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-v2-table-sticky-header {
|
.plans-table-sticky-header {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @screen-xs-max) {
|
||||||
|
|
@ -1158,7 +1159,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-v2-table-sticky-header-item {
|
.plans-table-sticky-header-item {
|
||||||
background-color: @white;
|
background-color: @white;
|
||||||
flex: 1 1 0px;
|
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;
|
color: @ol-green;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue