Files
30-seconds-of-code/src/docs/styles/_card.scss
Angelos Chalaris b0922ffccd Ui updates
2019-08-30 12:41:35 +03:00

223 lines
9.1 KiB
SCSS

// ===================================================
// Cards
// ===================================================
.card {
backface-visibility: hidden;
will-change: transform;
position: relative;
transition: all 0.3s ease;
margin: 1rem 1.25rem;
background: var(--card-back-color);
color: var(--card-fore-color);
box-shadow: 0px 0px 1px var(--card-shadow-color-a), 0px 6px 12px var(--card-shadow-color-b);
border-radius: 0.125rem;
padding: 1rem 1rem 3.25rem;
.card-title {
font-size: 1.5rem;
line-height: 1.375;
font-weight: 700;
margin: 0px 0px 1.25rem;
color: var(--card-fore-color-light);
a, a:link, a:visited {
font-weight: 700;
transition: 0.3s ease all;
color: var(--card-fore-color-light);
}
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--card-border-color);
}
.card-description {
margin: 0.125rem -0.5rem 0.125rem;
font-size: 0.875rem;
color: var(--card-fore-color-light);
line-height: 1.35;
font-weight: 500;
}
.card-bottom {
position: relative;
margin-left: -1rem;
margin-right: -1rem;
border-radius: 0.125rem;
border-top-left-radius: 22px;
width: calc(100% - 2rem);
}
.card-code {
position: relative;
margin: 0.25rem 0px 0rem 1rem;
background: var(--pre-back-color);
width: 100%;
border-radius: 0.25rem;
line-height: 1.15;
padding: 1rem;
}
.card-examples {
transition: all 0.3s ease;
position: relative;
margin: 0.5rem 0px -1rem 0px;
background: var(--pre-back-color);
width: calc(100% - 52px);
border-radius: 0px 0px 0.125rem 0.125rem;
line-height: 1.15;
padding: 0.5rem 1.125rem 2.25rem 2.125rem;
&::before {
display: block;
content: '';
position: absolute;
left: 21px;
top: 0;
width: 1px;
opacity: 0.75;
height: calc(100% - 24px);
background: var(--button-example-toggler-fore-color);
}
}
&.short {
margin-bottom: 2rem;
}
}
// Card sections
.card-section-title {
font-size: 0.875rem;
color: var(--card-back-color);
display: inline-block;
padding: 0 0.5rem;
line-height: 2;
border-radius: 0.125rem;
margin: 1.25rem 1rem 0.125rem 1rem;
font-weight: 700;
&.card-section-html {
color: white;
background-image: linear-gradient(135deg,#ff4c9f,#ff7b74);
}
&.card-section-css {
color: white;
background-image: linear-gradient(135deg,#7983ff,#5f9de9);
}
&.card-section-js {
color: white;
background-image: linear-gradient(135deg,#ffb000,#f58818);
}
}
.card-section-demo-title, .card-section-explanation-title,.card-section-browser-support-title {
transition: 0.3s ease all;
margin: 0.5rem 1rem .5rem;
color: var(--card-fore-color-light);
font-size: 1rem;
font-weight: 700;
line-height: 2.25;
}
.card-explanation, .card-browser-support {
transition: 0.3s ease all;
margin: 0.5rem;
p, li {
line-height: 1.75;
margin-bottom: 0.5rem;
}
position: relative;
width: calc( 100% + 3rem);
display: block;
}
.card-browser-support {
transition: 0.3s ease all;
margin: 1rem;
}
.browser-support-data {
transition: 0.3s ease all;
font-size: 1.75rem;
font-weight: 300;
color: var(--card-fore-color-light);
line-height: 1;
margin: 0.5rem 1rem .5rem;
}
.card-snippet-demo {
transition: 0.3s ease all;
width: calc(100% - 0.25rem);
margin: 0.5rem 1rem .5rem;
background:var(--back-color);
border-radius: .25rem;
padding: .75rem 1.25rem;
}
// Tags
:not(.token).tag {
transition: 0.3s ease all;
border: 1px solid var(--tag-border-color);
border-radius: 0.125rem;
color: var(--tag-fore-color);
text-transform: uppercase;
margin: 0px 0.375rem 0.25rem 0px;
display: inline-block;
padding: 0.125rem 0.5rem;
letter-spacing: 0.25px;
font-size: 0.75rem;
vertical-align: 0.125rem;
line-height: 2;
font-weight: 600;
&:first-of-type {
margin-top: 0.375rem;
}
background-repeat: no-repeat;
padding-left: 1.5rem;
background-position-x: 0.375rem;
background-position-y: center;
background-size: 14px;
}
.tag-animation {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-loader'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E");
}
.tag-visual {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-eye'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
}
.tag-other {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-tag'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'%3E%3C/path%3E%3Cline x1='7' y1='7' x2='7' y2='7'%3E%3C/line%3E%3C/svg%3E");
}
.tag-interactivity {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-edit-2'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E");
}
.tag-layout {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616B8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-layout'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='3' y1='9' x2='21' y2='9'%3E%3C/line%3E%3Cline x1='9' y1='21' x2='9' y2='9'%3E%3C/line%3E%3C/svg%3E");
}
.page-container.dark {
.tag-animation {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-loader'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E");
}
.tag-visual {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-eye'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
}
.tag-other {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-tag'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'%3E%3C/path%3E%3Cline x1='7' y1='7' x2='7' y2='7'%3E%3C/line%3E%3C/svg%3E");
}
.tag-interactivity {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-edit-2'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3E%3C/path%3E%3C/svg%3E");
}
.tag-layout {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23BEC1CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-layout'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='3' y1='9' x2='21' y2='9'%3E%3C/line%3E%3Cline x1='9' y1='21' x2='9' y2='9'%3E%3C/line%3E%3C/svg%3E");
}
}
.clickable-card-wrapper {
&:link, &:visited {
&:hover, &:focus {
text-decoration: none;
.card {
transform: scale(1.025);
}
}
}
}
.snippet-view {
text-align: center;
width: calc(100% + 2.75rem);
position: absolute;
margin-left: 0.75rem;
bottom: -3.375rem;
}