andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Card presentation improvements (proof of concept)

Browse Source
This commit is contained in:
Angelos Chalaris
2018-09-04 23:10:57 +03:00
parent 92cb3dd91d
commit 8367e9df6b
1 changed files with 63 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
docs/scss/style.scss
View File

@ -18,7 +18,7 @@ $secondary-fore-color: #444;
$tertiary-fore-color: #222;
$back-color: #fff;
$secondary-back-color: #f0f0f0;
$border-color: #fff;
$border-color: #eee;
$token-color-a-var: '--token-color-a';
$token-color-b-var: '--token-color-b';
$token-color-c-var: '--token-color-c';
@ -242,8 +242,6 @@ pre {
overflow: auto; // Responsiveness
padding: calc(1.5 * var(#{$universal-padding-var}));
margin: var(#{$universal-margin-var});
border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var});
background: #263238;
border: 0;
color: #fafafa;
@ -386,6 +384,7 @@ $grid-large-breakpoint: 768px;
// Generic centered column
.col-centered {
grid-column: span 12;
max-width: 100%;
@media screen and (min-width: #{$grid-medium-breakpoint}) {
grid-column: 2/12;
}
@ -421,15 +420,76 @@ $grid-large-breakpoint: 768px;
// TODO: Redesign cards from scratch
.card {
position: relative;
margin: var(#{$universal-margin-var});
border-radius: calc(4 * var(#{$universal-border-radius-var}));
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
.section {
&.card-content{
padding: calc(1.5 * var(#{$universal-padding-var}));
}
}
pre.section {
&.card-code {
position: relative;
margin-bottom: 0;
padding-bottom: 0;
}
&.card-examples {
margin-top: 0;
border-radius: 0 0 calc(4 * var(#{$universal-border-radius-var})) calc(4 * var(#{$universal-border-radius-var}));
&:before {
content: 'Examples';
text-transform: uppercase;
display: block;
font-size: 0.75rem;
padding-bottom: calc(0.125 * var(#{$universal-padding-var}));
color: #607D8B;
}
}
}
h4 {
text-align: center;
padding-bottom: calc(0.75 * var(#{$universal-padding-var}));
margin-bottom: calc(2 * var(#{$universal-margin-var}));
border-bottom: $__1px solid var(#{$border-color-var});
}
.copy-button-container {
position: relative;
z-index: 2;
.copy-button {
background: #1E88E5;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' style='background-color:%231E88E5' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clipboard'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3C/svg%3E");
background-position: center center;
background-repeat: no-repeat;
box-sizing: border-box;
padding: calc(2.5 * var(#{$universal-padding-var}));
border-radius: 50%;
position: absolute;
border: 0;
top: -1.75rem;
right: 0;
margin: calc(2 * var(#{$universal-margin-var}));
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
cursor: pointer;
&:before {
background: #fff;
position: absolute;
top: -4px;
right: -4px;
content: '';
display: block;
box-sizing: border-box;
padding: calc(2.5 * var(#{$universal-padding-var}));
border-radius: 50%;
border: 4px solid #fff;
z-index: -1;
}
}
}
}
// TODO: Buttons and search form only
// TODO: Top bar - header
// TODO: Side bar - nav