reverend/scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Converting Styles to Stylus

Browse Source
This commit is contained in:
reverend
2021-01-03 12:57:30 +01:00
parent 333aa9d1b5
commit 35a11bab6e
7 changed files with 184 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/02_Styles/_styles.styl
View File

@@ -1,6 +1,3 @@
@import 'spacing/_spacing'
/*
@import 'boxShadow/boxShadow';
@import 'iconized/iconized';
*/
@import 'boxShadow/_boxShadow'
@import 'iconized/_iconized'

48
components/02_Styles/boxShadow/_boxShadow.scss
View File

@@ -1,48 +0,0 @@
@mixin RV-BoxShadow--simple($-color) {
box-shadow: 0 0 10px $-color;
}
@mixin RV-BoxShadow($-color) {
position:relative;
float:left;
&:before, &:after {
content:"";
position:absolute;
z-index:-2;
}
&--simple {
@include RV-BoxShadow--simple($-color);
}
&--raised {
&:after {
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
}
&--liftedCorners {
&:before, &:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
transform:rotate(-3deg);
}
&:after{
right:10px;
left:auto;
transform:rotate(3deg);
}
}
}
.RV-BoxShadow {
@include RV-BoxShadow(#6b5690);
}

39
components/02_Styles/boxShadow/_boxShadow.styl Normal file
View File

@@ -0,0 +1,39 @@
RV-BoxShadow--simple(color)
box-shadow 0 0 10px color
RV-BoxShadow(color)
position relative
float left
background-color white
&:before, &:after
content ""
position absolute
z-index -2
&--simple
RV-BoxShadow--simple(color)
&--raised
&:after
box-shadow 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset
&--liftedCorners
&:before, &:after
bottom 15px
left 10px
width 50%
height 20%
max-width 300px
box-shadow 0 15px 10px rgba(0, 0, 0, 0.7)
transform rotate(-3deg)
&:after
right 10px
left auto
transform rotate(3deg)
.RV-BoxShadow
RV-BoxShadow(#6b5690)

58
components/02_Styles/iconized/_iconized.scss
View File

@@ -1,58 +0,0 @@
.RV-Iconized {
&__Container {
position: relative;
&--small {
top: -.25em;
}
&--medium {
top: -.5em;
}
&--large {
top: -1.03073em;
}
&--huge {
top: -2.05em;
}
}
&__Icon {
@include RV-Reset;
}
&__Container--extraSmall &__Icon{
width: 1em;
height: 1em;
position: relative;
top: .125em;
}
&__Container--small &__Icon{
width: 1.5em;
height: 1.5em;
position: relative;
top: .45em;
}
&__Container--medium &__Icon{
width: 2em;
height: 2em;
position: relative;
top: .625em;
}
&__Container--large &__Icon{
width: 3em;
height: 3em;
position: relative;
top: 1.15573em;
}
&__Container--huge &__Icon{
width: 5em;
height: 5em;
position: relative;
top: 2.175em;
}
}

56
components/02_Styles/iconized/_iconized.styl Normal file
View File

@@ -0,0 +1,56 @@
RV-Iconized__Container()
position relative
&--small
top -.25em
&--medium
top -.5em
&--large
top -1.03073em
&--huge
top -2.05em
RV-Iconized__Icon()
RV-Reset()
&__Container--extraSmall &__Icon
width 1em
height 1em
position relative
top .125em
&__Container--small &__Icon
width 1.5em
height 1.5em
position relative
top .45em
&__Container--medium &__Icon
width 2em
height 2em
position relative
top .625em
&__Container--large &__Icon
width 3em
height 3em
position relative
top 1.15573em
&__Container--huge &__Icon
width 5em
height 5em
position relative
top 2.175em
RV-Iconized(prefix='&')
{prefix}__Container
RV-Iconized__Container()
RV-Iconized__Icon()
.RV-Iconized
RV-Iconized()

4
components/02_Styles/spacing/_spacing.styl
View File

@@ -1,4 +1,3 @@
RV-Spacing__Outer--small()
margin spacing-small
@@ -52,5 +51,4 @@ RV-Spacing(prefix='&')
RV-Spacing__Inner--large()
.RV-Spacing
RV-Spacing()
test()
RV-Spacing()