knowyt/client/src/components/QuoteCardNew.vue

45 lines
883 B
Vue

<template>
<div class="quote-card-new__container">
<div class="quote-card-new__new">+</div>
</div>
</template>
<style lang="scss">
@import '~/assets/css/components';
.quote-card-new {
&__container {
position: relative;
display: flex;
align-items: center;
width: 300px;
height: 150px;
margin: 32px;
padding: 28px;
background-color: $quote-new-background-color;
border: $quote-new-border;
border-radius: 0 16px 0 0;
cursor: pointer;
&:hover {
background-color: $quote-new-hover-background-color;
border: $quote-new-hover-border;
color: $quote-new-hover-text-color;
}
@media (max-width: $phone-width) {
width: 240px;
height: 120px;
padding: 12px;
}
}
&__new {
width: 100%;
font-size: 72px;
color: $quote-new-text-color;
text-align: center;
}
}
</style>