Adds expand-content component, update various UI measurements
This commit is contained in:
parent
6efd338f87
commit
4b18e4b1c3
11 changed files with 133 additions and 59 deletions
|
|
@ -15079,34 +15079,9 @@ log-options #check-bar .checkbox-icon {
|
|||
border-radius: 3px;
|
||||
display: inline-block; }
|
||||
|
||||
.header {
|
||||
padding: 29px 12px 65px;
|
||||
background-color: #FAB915;
|
||||
color: #FFFFFF; }
|
||||
.header .title {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1em;
|
||||
color: #FFFFFF;
|
||||
text-align: center; }
|
||||
.header .title + .content {
|
||||
margin-top: 23px; }
|
||||
.header .content {
|
||||
text-align: center; }
|
||||
.header .content p {
|
||||
margin: 0;
|
||||
line-height: 1em;
|
||||
font-size: 18px; }
|
||||
.header .content p.large {
|
||||
font-size: 29px;
|
||||
font-weight: 600; }
|
||||
.header .content p + p {
|
||||
margin-top: 8px; }
|
||||
|
||||
.content-frame.negative-top {
|
||||
margin-top: -20px; }
|
||||
.content-frame.negative-top .card:first-child {
|
||||
margin-top: 0; }
|
||||
.elastic {
|
||||
width: 100%;
|
||||
font-size: 14px; }
|
||||
|
||||
/*
|
||||
* Extends Ionic v1 item
|
||||
|
|
@ -15152,6 +15127,38 @@ ion-content.bg-neutral {
|
|||
ion-content.padded-bottom-cta {
|
||||
bottom: 92px; }
|
||||
|
||||
.card.card-gutter-compact {
|
||||
margin: 10px 12px; }
|
||||
|
||||
.header {
|
||||
padding: 29px 12px 61px;
|
||||
background-color: #FAB915;
|
||||
color: #FFFFFF; }
|
||||
.header .title {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 1em;
|
||||
color: #FFFFFF;
|
||||
text-align: center; }
|
||||
.header .title + .content {
|
||||
margin-top: 23px; }
|
||||
.header .content {
|
||||
text-align: center; }
|
||||
.header .content p {
|
||||
margin: 0;
|
||||
line-height: 1em;
|
||||
font-size: 18px; }
|
||||
.header .content p.large {
|
||||
font-size: 29px;
|
||||
font-weight: 600; }
|
||||
.header .content p + p {
|
||||
margin-top: 8px; }
|
||||
|
||||
.content-frame.negative-top {
|
||||
margin-top: -40px; }
|
||||
.content-frame.negative-top .card:first-child {
|
||||
margin-top: 0; }
|
||||
|
||||
.address {
|
||||
background-color: #F8F8F8;
|
||||
border: 0.5px solid #EDEBEB;
|
||||
|
|
@ -15175,8 +15182,8 @@ ion-content.padded-bottom-cta {
|
|||
margin: 20px 14px;
|
||||
font-size: 14px; }
|
||||
.action-minor.mt-negative {
|
||||
margin-top: -10px; }
|
||||
.action-minor.right {
|
||||
margin-top: 0; }
|
||||
.action-minor.text-right {
|
||||
text-align: right; }
|
||||
.action-minor > .action-icon {
|
||||
width: 15px;
|
||||
|
|
@ -15184,7 +15191,26 @@ ion-content.padded-bottom-cta {
|
|||
vertical-align: middle;
|
||||
margin-right: 3px; }
|
||||
.action-minor > .action-text {
|
||||
vertical-align: middle; }
|
||||
vertical-align: middle;
|
||||
color: #444444; }
|
||||
|
||||
.expand-content-frame {
|
||||
position: relative; }
|
||||
.expand-content-frame .expand-content-trigger {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
right: 0; }
|
||||
.expand-content-frame .expand-content-trigger.expand-content-revealed {
|
||||
opacity: 0; }
|
||||
.expand-content-frame .expand-content {
|
||||
opacity: 0;
|
||||
transform-origin: 100% 0%;
|
||||
transform: scale(0, 0);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease; }
|
||||
.expand-content-frame .expand-content.expand-content-revealed {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1); }
|
||||
|
||||
/* This is for rules that don't yet have a home.
|
||||
* Our goal is to delete this file. Search the regex: /class=".*CLASS.*?"/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue