mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-29 04:03:34 -05:00
Merge pull request #19332 from overleaf/jel-light-touch-plans-border
[web] Update border style for light touch redesign of plans page GitOrigin-RevId: ba3df408ce626f4b2a3eb634de93d8879f3e9611
This commit is contained in:
Jessica Lawshe
Copybot
parent
68e42efb20
commit
ccac1047d6
2 changed files with 202 additions and 232 deletions
|
|
@ -43,8 +43,6 @@ mixin plans_table(period, config)
|
||||||
-
|
-
|
||||||
if (highlighted) {
|
if (highlighted) {
|
||||||
var thClass = 'plans-table-green-highlighted'
|
var thClass = 'plans-table-green-highlighted'
|
||||||
} else if (i === config.highlightedColumn.index - 1) {
|
|
||||||
var thClass = 'plans-table-cell-before-green-highlighted-column'
|
|
||||||
} else {
|
} else {
|
||||||
var thClass = ''
|
var thClass = ''
|
||||||
}
|
}
|
||||||
|
|
@ -133,7 +131,7 @@ mixin plans_table(period, config)
|
||||||
span.sr-only #{translate(featuresPerSection.dividerInfo)}
|
span.sr-only #{translate(featuresPerSection.dividerInfo)}
|
||||||
for feature, featureIndex in featuresPerSection.items
|
for feature, featureIndex in featuresPerSection.items
|
||||||
tr(
|
tr(
|
||||||
class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-table-row-last-row-per-section plans-table-cols-${tableHeadKeys.length}` : `plans-table-cols-${tableHeadKeys.length}`)
|
class=`plans-table-cols-${tableHeadKeys.length}`
|
||||||
)
|
)
|
||||||
th(
|
th(
|
||||||
class="plans-table-row-header"
|
class="plans-table-row-header"
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
// m-a stands for: monthly annual
|
// m-a stands for: monthly annual
|
||||||
|
|
||||||
@plans-top-switch-item-height: 34px;
|
@plans-top-switch-item-height: 34px;
|
||||||
@plans-top-switch-item-border-radius: @plans-top-switch-item-height / 2;
|
@plans-top-switch-item-border-radius: @plans-top-switch-item-height / 2;
|
||||||
@plans-m-a-switch-height: 34px;
|
@plans-m-a-switch-height: 34px;
|
||||||
|
|
@ -7,8 +6,11 @@
|
||||||
@plans-highlighted-text-height-mobile: 41px;
|
@plans-highlighted-text-height-mobile: 41px;
|
||||||
@plans-learn-more-link-color: hsl(206, 100%, 52%);
|
@plans-learn-more-link-color: hsl(206, 100%, 52%);
|
||||||
@plans-top-switch-group-width-mobile: 46%;
|
@plans-top-switch-group-width-mobile: 46%;
|
||||||
@plans-table-border-radius: 20px;
|
@plans-table-border-radius: var(--border-radius-medium-new);
|
||||||
@plans-table-td-mobile-min-height: 34px;
|
@plans-table-td-mobile-min-height: 34px;
|
||||||
|
@highlighted-border: var(--border-width-base) solid var(--green-50);
|
||||||
|
@table-border-size: 2px;
|
||||||
|
@table-border: @table-border-size solid var(--neutral-10);
|
||||||
|
|
||||||
.plans-page {
|
.plans-page {
|
||||||
p {
|
p {
|
||||||
|
|
@ -245,7 +247,6 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background-color: @ol-blue-gray-1;
|
|
||||||
transition: 0.4s;
|
transition: 0.4s;
|
||||||
border-radius: @plans-m-a-switch-height;
|
border-radius: @plans-m-a-switch-height;
|
||||||
|
|
||||||
|
|
@ -449,39 +450,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-table-student {
|
.plans-table-student {
|
||||||
tr {
|
|
||||||
&:last-child {
|
|
||||||
td:last-child {
|
|
||||||
.plans-table-cell {
|
|
||||||
border-bottom-right-radius: @plans-table-border-radius;
|
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// only make corners have round borders if the column is not highlighted
|
|
||||||
th:not(.plans-table-green-highlighted) {
|
|
||||||
&:nth-last-child(2) .plans-table-th {
|
|
||||||
border-top-right-radius: @plans-table-border-radius;
|
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(2) .plans-table-th {
|
|
||||||
border-top-left-radius: @plans-table-border-radius;
|
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: @screen-md-max) {
|
@media (max-width: @screen-md-max) {
|
||||||
tr:first-of-type {
|
tr:first-of-type {
|
||||||
th:last-of-type {
|
th:last-of-type {
|
||||||
|
|
@ -494,40 +462,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-table-individual {
|
|
||||||
tr {
|
|
||||||
&:last-child {
|
|
||||||
td:last-child {
|
|
||||||
.plans-table-cell {
|
|
||||||
border-bottom-right-radius: @plans-table-border-radius;
|
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
&:last-child .plans-table-th {
|
|
||||||
border-top-right-radius: @plans-table-border-radius;
|
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(2) .plans-table-th {
|
|
||||||
border-top-left-radius: @plans-table-border-radius;
|
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.plans-table-group {
|
.plans-table-group {
|
||||||
margin-top: 26px + @plans-highlighted-text-height-desktop;
|
margin-top: 26px + @plans-highlighted-text-height-desktop;
|
||||||
|
|
||||||
|
|
@ -548,30 +482,6 @@
|
||||||
font-size: @font-size-small;
|
font-size: @font-size-small;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tr {
|
|
||||||
// top right border radius on desktop only
|
|
||||||
&:first-of-type {
|
|
||||||
th:last-child > .plans-table-th {
|
|
||||||
border-top-right-radius: @plans-table-border-radius;
|
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// bottom right border radius on desktop only
|
|
||||||
&:last-of-type {
|
|
||||||
td:last-child > .plans-table-cell {
|
|
||||||
border-bottom-right-radius: @plans-table-border-radius;
|
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-table {
|
.plans-table {
|
||||||
|
|
@ -579,6 +489,62 @@
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
// cannot add border to td,th directly due to highlighted column border
|
||||||
|
td > div,
|
||||||
|
th > div {
|
||||||
|
border-left: @table-border;
|
||||||
|
border-top: @table-border;
|
||||||
|
border-right: @table-border;
|
||||||
|
border-bottom: 0;
|
||||||
|
|
||||||
|
@media (max-width: @screen-xs-max) {
|
||||||
|
border-left: unset;
|
||||||
|
border-right: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// remove left border for all col after highlighted column
|
||||||
|
.plans-table-green-highlighted ~ td > div,
|
||||||
|
.plans-table-green-highlighted ~ th > div {
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
// remove right border for all col before highlighted column
|
||||||
|
td:has(~ .plans-table-green-highlighted) > div,
|
||||||
|
th:has(~ .plans-table-green-highlighted) > div {
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// highlighted column border
|
||||||
|
th.plans-table-green-highlighted > div,
|
||||||
|
td.plans-table-green-highlighted > div {
|
||||||
|
border-left: @highlighted-border;
|
||||||
|
border-right: @highlighted-border;
|
||||||
|
// remove top gray border so that there is
|
||||||
|
// no shared corner with left/right green border
|
||||||
|
// and then apply the gray top border to the inner div, .plans-table-cell-content
|
||||||
|
border-top: 0;
|
||||||
|
|
||||||
|
.plans-table-cell-content {
|
||||||
|
border-top: @table-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: @screen-xs-max) {
|
||||||
|
border-left: unset;
|
||||||
|
border-right: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
&:nth-child(2):not(.plans-table-green-highlighted) .plans-table-th {
|
||||||
|
border-top-left-radius: @plans-table-border-radius;
|
||||||
|
|
||||||
|
@media (max-width: @screen-xs-max) {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// We want these `div` inside `th` and `td` to have a 100% height since
|
// We want these `div` inside `th` and `td` to have a 100% height since
|
||||||
// white backgrounds are defined here:
|
// white backgrounds are defined here:
|
||||||
// 1. `td > div.plans-table-cell`
|
// 1. `td > div.plans-table-cell`
|
||||||
|
|
@ -597,26 +563,65 @@
|
||||||
|
|
||||||
tr {
|
tr {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.plans-table-column-header,
|
// top right border radius on desktop only
|
||||||
td {
|
&:first-of-type {
|
||||||
background-clip: padding-box; /* needed for firefox when there is bg color */
|
th:last-child > .plans-table-th {
|
||||||
text-align: center;
|
border-top-right-radius: @plans-table-border-radius;
|
||||||
|
|
||||||
&:not(.plans-table-cell-before-green-highlighted-column):not(
|
@media (max-width: @screen-xs-max) {
|
||||||
.plans-table-green-highlighted
|
border-top-right-radius: 0;
|
||||||
):not(.plans-table-last-col-highlighted) {
|
}
|
||||||
border-right: 1px solid @ol-blue-gray-0;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
// bottom right border radius on desktop only
|
||||||
border-right: none;
|
&:last-child {
|
||||||
|
td:last-child {
|
||||||
|
.plans-table-cell {
|
||||||
|
border-bottom-right-radius: @plans-table-border-radius;
|
||||||
|
|
||||||
|
@media (max-width: @screen-xs-max) {
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
.plans-table-feature-name {
|
||||||
|
@media (min-width: @screen-sm-min) {
|
||||||
|
border-bottom-left-radius: @plans-table-border-radius;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td > div,
|
||||||
|
th > div {
|
||||||
|
border-bottom: @table-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plans-table-green-highlighted > div {
|
||||||
|
border-bottom: @highlighted-border;
|
||||||
|
|
||||||
|
@media (max-width: @screen-xs-max) {
|
||||||
|
// column is not highlighted on mobile, so
|
||||||
|
// match non-highlighted column border on mobile
|
||||||
|
border-top: @table-border;
|
||||||
|
border-bottom: @table-border;
|
||||||
|
.plans-table-cell-content {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.plans-table-column-header,
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.plans-table-column-header {
|
.plans-table-column-header {
|
||||||
border-top: 0;
|
|
||||||
font-family: @headings-font-family;
|
font-family: @headings-font-family;
|
||||||
font-size: @font-size-h2;
|
font-size: @font-size-h2;
|
||||||
font-weight: @headings-font-weight;
|
font-weight: @headings-font-weight;
|
||||||
|
|
@ -625,24 +630,16 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:first-child {
|
&.plans-table-green-highlighted {
|
||||||
border-left: 0;
|
.plans-table-th {
|
||||||
}
|
border-top: @table-border-size solid @ol-green;
|
||||||
|
}
|
||||||
&:last-child {
|
|
||||||
border-right: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
&:last-child:not(.plans-table-green-highlighted):not(
|
|
||||||
.plans-table-last-col-highlighted
|
|
||||||
) {
|
|
||||||
border-right: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tr {
|
tr {
|
||||||
|
|
@ -663,29 +660,94 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:not(.plans-table-row-last-row-per-section):not(
|
tr.plans-table-divider {
|
||||||
.plans-table-divider
|
background-color: var(--neutral-10);
|
||||||
):not(:last-of-type) {
|
th > div,
|
||||||
th > .plans-table-th > .plans-table-th-content,
|
td > div {
|
||||||
td > .plans-table-feature-name,
|
border-top: 0;
|
||||||
td > .plans-table-cell > .plans-table-cell-content {
|
border-bottom: 0;
|
||||||
border-bottom: 1px solid @ol-blue-gray-0;
|
}
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
// direct child selector to NOT affect the generated tooltip
|
||||||
border-bottom: unset;
|
td > div {
|
||||||
}
|
text-align: center;
|
||||||
|
padding: 6px;
|
||||||
|
|
||||||
|
.plans-table-divider-label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plans-table-divider-learn-more-container {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// this will show highlghted border-bottom on the last row
|
// highlighted divider will only show if the highlighted column is on the last visible column
|
||||||
&:last-child td.plans-table-green-highlighted {
|
.plans-table-last-col-highlighted > div {
|
||||||
> .plans-table-cell {
|
border-right: @highlighted-border;
|
||||||
border-bottom: 2px solid @ol-green;
|
}
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @screen-xs-max) {
|
||||||
border-bottom: unset;
|
padding-top: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
background-color: var(--neutral-20);
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
// direct child selector to NOT affect the generated tooltip
|
||||||
|
th > div,
|
||||||
|
td > div {
|
||||||
|
background-color: var(--neutral-20);
|
||||||
|
border: 0;
|
||||||
|
padding: 15px 5px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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-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-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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.plans-table-last-col-highlighted > div {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.plans-table-divider + tr {
|
||||||
|
td > div,
|
||||||
|
th > div {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
.plans-table-green-highlighted {
|
||||||
|
.plans-table-cell-content {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.plans-table-cols-2 {
|
||||||
|
th:last-child {
|
||||||
|
div {
|
||||||
|
border: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -697,8 +759,6 @@
|
||||||
@media (min-width: @screen-sm-min) {
|
@media (min-width: @screen-sm-min) {
|
||||||
// highlight rows on hover
|
// highlight rows on hover
|
||||||
tr:not(.plans-table-divider):not(:first-child):hover {
|
tr:not(.plans-table-divider):not(:first-child):hover {
|
||||||
background-color: @table-hover-bg;
|
|
||||||
|
|
||||||
.plans-table-feature-name,
|
.plans-table-feature-name,
|
||||||
.plans-table-cell {
|
.plans-table-cell {
|
||||||
background-color: @table-hover-bg;
|
background-color: @table-hover-bg;
|
||||||
|
|
@ -724,13 +784,6 @@
|
||||||
// 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-table-divider) {
|
|
||||||
td,
|
|
||||||
th:not(:first-of-type) {
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tr.plans-table-cols-3:not(.plans-table-divider) {
|
tr.plans-table-cols-3:not(.plans-table-divider) {
|
||||||
td,
|
td,
|
||||||
th:not(:first-of-type) {
|
th:not(:first-of-type) {
|
||||||
|
|
@ -1009,84 +1062,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.plans-table-divider {
|
|
||||||
background-color: @ol-blue-gray-1;
|
|
||||||
|
|
||||||
// direct child selector to NOT affect the generated tooltip
|
|
||||||
td > div {
|
|
||||||
text-align: center;
|
|
||||||
padding: 6px;
|
|
||||||
|
|
||||||
.plans-table-divider-label {
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plans-table-divider-learn-more-container {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// highlighted divider will only show if the highlighted column is on the last visible column
|
|
||||||
.plans-table-last-col-highlighted > div {
|
|
||||||
border-right: 2px solid @ol-green;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
// need the colspan attribute selector to increase specificity to override more specific css rule on another selector
|
|
||||||
td[colspan] {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
// direct child selector to NOT affect the generated tooltip
|
|
||||||
> div {
|
|
||||||
background-color: @ol-blue-gray-1;
|
|
||||||
padding: 15px 5px;
|
|
||||||
|
|
||||||
i {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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-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-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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.plans-table-last-col-highlighted > div {
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// the `.plans-table-green-highlighted` class below can be applied to both `th` and `td`
|
|
||||||
.plans-table-green-highlighted {
|
|
||||||
> .plans-table-cell,
|
|
||||||
> .plans-table-th {
|
|
||||||
border-left: 2px solid @ol-green;
|
|
||||||
border-right: 2px solid @ol-green;
|
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
border-left: unset;
|
|
||||||
border-right: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p.plans-table-green-highlighted-text {
|
p.plans-table-green-highlighted-text {
|
||||||
border: 2px solid @ol-green;
|
border: 2px solid @ol-green;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -1095,15 +1070,16 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
|
||||||
font-size: @font-size-small;
|
font-size: @font-size-small;
|
||||||
line-height: 19px;
|
line-height: 19px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
background-color: @ol-green;
|
background-color: @ol-green;
|
||||||
border-radius: @plans-table-border-radius @plans-table-border-radius 0 0;
|
border-radius: var(--border-radius-large-new) var(--border-radius-large-new)
|
||||||
|
0 0;
|
||||||
color: @white;
|
color: @white;
|
||||||
height: @plans-highlighted-text-height-desktop;
|
height: @plans-highlighted-text-height-desktop;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
@media (max-width: @screen-sm-max) {
|
@media (max-width: @screen-sm-max) {
|
||||||
top: -1 * @plans-highlighted-text-height-mobile;
|
top: -1 * @plans-highlighted-text-height-mobile;
|
||||||
|
|
@ -1149,7 +1125,7 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: @z-index-plans-page-table-header-mobile;
|
z-index: @z-index-plans-page-table-header-mobile;
|
||||||
height: 40px;
|
height: 42px;
|
||||||
|
|
||||||
// separate sticky class because we want to remove the class (to visually remove the sticky header)
|
// separate sticky class because we want to remove the class (to visually remove the sticky header)
|
||||||
// with javascript whenever the table is not visible anymore
|
// with javascript whenever the table is not visible anymore
|
||||||
|
|
@ -1201,7 +1177,7 @@
|
||||||
|
|
||||||
.plans-v2-university-info {
|
.plans-v2-university-info {
|
||||||
padding: @padding-lg @padding-xxl;
|
padding: @padding-lg @padding-xxl;
|
||||||
background-color: @ol-blue-gray-1;
|
background-color: var(--neutral-20);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
|
|
||||||
h3.plans-v2-university-info-header {
|
h3.plans-v2-university-info-header {
|
||||||
|
|
@ -1241,10 +1217,6 @@
|
||||||
margin-top: var(--spacing-09);
|
margin-top: var(--spacing-09);
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-table-column-header {
|
|
||||||
background-color: transparent; // remove colors set by default variant
|
|
||||||
}
|
|
||||||
|
|
||||||
.plans-page-quote-row {
|
.plans-page-quote-row {
|
||||||
margin: var(--spacing-13) 0;
|
margin: var(--spacing-13) 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue