Skip to content
This repository has been archived by the owner on Feb 24, 2023. It is now read-only.

Commit

Permalink
Changes SASS to CSS
Browse files Browse the repository at this point in the history
Related: #82
Łukasz Florczak committed Apr 26, 2019

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent e212c3b commit 3039aca
Showing 2 changed files with 81 additions and 71 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-agile",
"version": "1.0.4",
"version": "1.0.5",
"description": "A carousel component for Vue.js",
"author": "Łukasz Florczak <[email protected]>",
"license": "MIT",
150 changes: 80 additions & 70 deletions src/Agile.vue
Original file line number Diff line number Diff line change
@@ -656,74 +656,84 @@
}
</script>

<style lang="sass">
.agile
position: relative
&--rtl
.agile__track,
.agile__slides,
.agile__dots
flex-direction: row-reverse
&, *
&:focus,
&:active
outline: none
&__list
display: block
overflow: hidden
position: relative
width: 100%
&__track
display: flex
&__actions
display: flex
justify-content: space-between
&__slides
align-items: center
display: flex
justify-content: flex-start
.agile--disabled &
display: block
&__slide
display: block
.agile--fade &
opacity: 0
position: relative
z-index: 0
&--active
opacity: 1
z-index: 2
&--expiring
opacity: 1
transition-duration: 0s
z-index: 1
&__nav-button
&[disabled]
cursor: default
&__dots
align-items: center
display: flex
list-style: none
padding: 0
white-space: nowrap
&__dot
button
cursor: pointer
display: block
font-size: 0
line-height: 0
<style>
.agile {
position: relative;
}
.agile--rtl .agile__track,
.agile--rtl .agile__slides,
.agile--rtl .agile__dots {
flex-direction: row-reverse;
}
.agile:focus, .agile:active, .agile *:focus, .agile *:active {
outline: none;
}
.agile__list {
display: block;
overflow: hidden;
position: relative;
width: 100%;
}
.agile__track {
display: flex;
}
.agile__actions {
display: flex;
justify-content: space-between;
}
.agile__slides {
align-items: center;
display: flex;
justify-content: flex-start;
}
.agile--disabled .agile__slides {
display: block;
}
.agile__slide {
display: block;
}
.agile--fade .agile__slide {
opacity: 0;
position: relative;
z-index: 0;
}
.agile--fade .agile__slide--active {
opacity: 1;
z-index: 2;
}
.agile--fade .agile__slide--expiring {
opacity: 1;
transition-duration: 0s;
z-index: 1;
}
.agile__nav-button[disabled] {
cursor: default;
}
.agile__dots {
align-items: center;
display: flex;
list-style: none;
padding: 0;
white-space: nowrap;
}
.agile__dot button {
cursor: pointer;
display: block;
font-size: 0;
line-height: 0;
}
</style>

0 comments on commit 3039aca

Please sign in to comment.