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

Ui updates

Browse Source
This commit is contained in:
Angelos Chalaris
2019-08-30 12:41:35 +03:00
parent fb555f85df
commit b0922ffccd
4 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/docs/components/SnippetCard.js
View File

@ -33,7 +33,7 @@ const CodepenButton = ({ snippetData }) => (
})
}
/>
<button className='button button-a button-codepen'>Edit on Codepen</button>
<button className='button button-b button-codepen'>Edit on Codepen</button>
</form>
)

7
src/docs/styles/_button.scss
View File

@ -88,13 +88,14 @@
.button.button-codepen {
display: block;
margin: 0.25rem calc(50% - 3rem);
min-width: 180px;
font-size: 1rem;
min-width: 176px;
font-size: 0.875rem;
border-radius: 0.5rem;
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='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-codepen'%3E%3Cpolygon points='12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2'%3E%3C/polygon%3E%3Cline x1='12' y1='22' x2='12' y2='15.5'%3E%3C/line%3E%3Cpolyline points='22 8.5 12 15.5 2 8.5'%3E%3C/polyline%3E%3Cpolyline points='2 15.5 12 8.5 22 15.5'%3E%3C/polyline%3E%3Cline x1='12' y1='2' x2='12' y2='8.5'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position-y: center;
background-position-x: 0.5rem;
padding-left: 2.5rem
padding-left: 2.25rem
}
.button.button-view {

7
src/docs/styles/_card.scss
View File

@ -11,7 +11,7 @@
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 3rem;
padding: 1rem 1rem 3.25rem;
.card-title {
font-size: 1.5rem;
line-height: 1.375;
@ -48,7 +48,7 @@
width: 100%;
border-radius: 0.25rem;
line-height: 1.15;
padding: 2.25rem 1.125rem 2.25rem;
padding: 1rem;
}
.card-examples {
transition: all 0.3s ease;
@ -87,12 +87,15 @@
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);
}
}

2
src/docs/styles/_layout.scss
View File

@ -105,7 +105,7 @@ img.website-logo {
}
&::after {
transition: 0.3s ease all;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 0l12 12H0z' fill='%23f2f3f8'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M12 0l12 12H0z' fill='%23f5f6fa'/%3E%3C/svg%3E");
background-size: 24px 24px;
width: 100%;
height: 24px;