223 lines
9.1 KiB
SCSS
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;
|
|
} |