Fix native

This commit is contained in:
Jeremy Thomas
2018-04-10 23:10:59 +01:00
parent a1c8414c59
commit cd8503762c
3 changed files with 25 additions and 32 deletions

View File

@@ -59,7 +59,7 @@
} }
.native-cta:hover { .native-cta:hover {
color: #native_cta_color_hover; color: #native_cta_color_hover#;
background-color: #native_cta_bg_color_hover#; background-color: #native_cta_bg_color_hover#;
} }
</style> </style>
@@ -70,6 +70,6 @@
<span class="native-desc">#native_desc#</span> <span class="native-desc">#native_desc#</span>
</div> </div>
</div> </div>
<span class="native-cta">#native_cta#</span> <span class="button is-medium native-cta">#native_cta#</span>
</a> </a>
</div> </div>

View File

@@ -16,6 +16,10 @@
justify-content: center justify-content: center
padding: 2em padding: 2em
text-decoration: none text-decoration: none
&:hover
.native-cta
box-shadow: 0 1rem 2rem 0 rgba($black, 0.1)
transform: translateY(-0.25rem)
.native-img .native-img
border-radius: 3px border-radius: 3px
@@ -46,22 +50,15 @@
.native-cta .native-cta
border: none border: none
border-radius: 3px box-shadow: 0 0.5rem 1rem 0 rgba($black, 0.2)
box-shadow: 0 6px 13px 0 hsla(0, 0%, 0%, .15)
display: inline-block
flex-grow: 0 flex-grow: 0
flex-shrink: 0 flex-shrink: 0
font-size: 0.75em font-weight: $weight-semibold
font-weight: $weight-normal height: auto
padding: 0.75em 1em padding: 0.5em 1em
text-transform: uppercase transition-duration: $speed * 2
transform: translateY(-1px) transition-property: box-shadow, transform
transition: transform .3s ease-in-out will-change: box-shadow, transform
vertical-align: top
white-space: nowrap
&:hover
box-shadow: none
transform: translateY(1px)
$native-bp: 600px $native-bp: 600px

View File

@@ -12754,6 +12754,11 @@ svg {
text-decoration: none; text-decoration: none;
} }
.native-flex:hover .native-cta {
box-shadow: 0 1rem 2rem 0 rgba(10, 10, 10, 0.1);
transform: translateY(-0.25rem);
}
.native-img { .native-img {
border-radius: 3px; border-radius: 3px;
flex-grow: 0; flex-grow: 0;
@@ -12788,24 +12793,15 @@ svg {
.native-cta { .native-cta {
border: none; border: none;
border-radius: 3px; box-shadow: 0 0.5rem 1rem 0 rgba(10, 10, 10, 0.2);
box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.15);
display: inline-block;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
font-size: 0.75em; font-weight: 600;
font-weight: 400; height: auto;
padding: 0.75em 1em; padding: 0.5em 1em;
text-transform: uppercase; transition-duration: 172ms;
transform: translateY(-1px); transition-property: box-shadow, transform;
transition: transform .3s ease-in-out; will-change: box-shadow, transform;
vertical-align: top;
white-space: nowrap;
}
.native-cta:hover {
box-shadow: none;
transform: translateY(1px);
} }
@media screen and (max-width: 599px) { @media screen and (max-width: 599px) {