bad/projekt-sklep
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

zmiany

Browse source
This commit is contained in:
a 2020-09-09 10:48:41 +02:00
parent bdd8ccc0c6
commit 7cef893930
3 changed files with 21 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/base.scss
View file

@ -44,7 +44,7 @@ header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
&>a { a {
padding: 0px 2px; padding: 0px 2px;
&:link,&:visited { &:link,&:visited {
color: var(--text-opposite-4); color: var(--text-opposite-4);
@ -62,7 +62,7 @@ header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
&>img { img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
padding: 1em; padding: 1em;
@ -76,7 +76,7 @@ nav {
align-items: center; align-items: center;
color: var(--text-opposite-1); color: var(--text-opposite-1);
background-color: var(--green-1); background-color: var(--green-1);
&>a { a {
border-left: 1px solid var(--text-color-1); border-left: 1px solid var(--text-color-1);
&:first-child { &:first-child {
border-left: 0px; border-left: 0px;

2
src/index.scss
View file

@ -1,6 +1,6 @@
.gallery { .gallery {
margin: 1em; margin: 1em;
height: 30em;
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 20rem;
} }

28
src/index.ts
View file

@ -33,9 +33,10 @@ class Carousel extends LitElement {
render() { render() {
return html` return html`
<button class="left">&lt</button> <button class="left">${'<'}</button>
<button class="right">${'>'}</button>
<img src=${this.currentItem.img}></img> <img src=${this.currentItem.img}></img>
<button class="right">&gt</button>
`; `;
} }
@ -45,13 +46,6 @@ class Carousel extends LitElement {
max-width: 100%; max-width: 100%;
height: 100%; height: 100%;
height: 100%; height: 100%;
display: flex;
align-items: center;
}
button {
z-index: 1;
margin: -6em;
} }
img { img {
@ -60,15 +54,27 @@ class Carousel extends LitElement {
transition: 0.2s; transition: 0.2s;
} }
img:hover { img:hover, button:hover~img {
transform: scale(1.1); transform: scale(1.05);
} }
button { button {
border: 1px solid var(--background-opposite-2); border: 1px solid var(--background-opposite-2);
border-radius: 50%; border-radius: 50%;
background-color: var(--background-primary-2); background-color: var(--background-primary-2);
cursor: pointer;
position: relative;
top:-50%;
z-index: 1;
} }
.left {
left: 20%;
}
.right {
left: 80%;
}
`; `;
} }
} }