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
Show Stats 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 '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() RV-Spacing__Outer--small()
margin spacing-small margin spacing-small
@ -52,5 +51,4 @@ RV-Spacing(prefix='&')
RV-Spacing__Inner--large() RV-Spacing__Inner--large()
.RV-Spacing .RV-Spacing
RV-Spacing() RV-Spacing()
test()

86
public/rcss.css
View File

@ -23,6 +23,92 @@
gap: 35px; gap: 35px;
column-gap: 35px; column-gap: 35px;
} }
.RV-BoxShadow {
position: relative;
float: left;
background-color: #fff;
}
.RV-BoxShadow:before,
.RV-BoxShadow:after {
content: "";
position: absolute;
z-index: -2;
}
.RV-BoxShadow--simple {
box-shadow: 0 0 10px #6b5690;
}
.RV-BoxShadow--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;
}
.RV-BoxShadow--liftedCorners:before,
.RV-BoxShadow--liftedCorners: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);
}
.RV-BoxShadow--liftedCorners:after {
right: 10px;
left: auto;
transform: rotate(3deg);
}
.RV-Iconized {
margin: 0;
padding: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: none;
}
.RV-Iconized__Container {
position: relative;
}
.RV-Iconized__Container--small {
top: -0.25em;
}
.RV-Iconized__Container--medium {
top: -0.5em;
}
.RV-Iconized__Container--large {
top: -1.03073em;
}
.RV-Iconized__Container--huge {
top: -2.05em;
}
.RV-Iconized__Container--extraSmall .RV-Iconized__Icon {
width: 1em;
height: 1em;
position: relative;
top: 0.125em;
}
.RV-Iconized__Container--small .RV-Iconized__Icon {
width: 1.5em;
height: 1.5em;
position: relative;
top: 0.45em;
}
.RV-Iconized__Container--medium .RV-Iconized__Icon {
width: 2em;
height: 2em;
position: relative;
top: 0.625em;
}
.RV-Iconized__Container--large .RV-Iconized__Icon {
width: 3em;
height: 3em;
position: relative;
top: 1.15573em;
}
.RV-Iconized__Container--huge .RV-Iconized__Icon {
width: 5em;
height: 5em;
position: relative;
top: 2.175em;
}
.RV-Sizes--half { .RV-Sizes--half {
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;