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

Adapting to bem generator

Browse Source
This commit is contained in:
reverend 2021-03-07 22:38:07 +01:00
parent 4e46ebe591
commit fd848277ff
1 changed files with 56 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
components/03_Atoms/button/_button.styl
View File

@ -1,11 +1,11 @@
RV-Button--pill() RV-Button--pill(size)
+RV-Block__Modifier--name('pill') +RV-Block--modifier()
border-radius calc(var(--size) + var(--line-height) * 16px) border-radius 'calc(%s + var(--line-height) * 16px)' % size
padding-left calc(1.5 * var(--size)) padding-left 'calc(1.5 * %s)' %s
padding-right calc(1.5 * var(--size)) padding-right 'calc(1.5 * %s)' %s
RV-Button--border(color) RV-Button--border(color)
+RV-Block__Modifier--name('border') +RV-Block--modifier()
border 3px solid color border 3px solid color
color color color color
border-radius 0px border-radius 0px
@ -16,24 +16,24 @@ RV-Button--border(color)
+RV-Element('Icon') +RV-Element('Icon')
background-color secondary-color background-color secondary-color
RV-Button--small() RV-Button--small(size)
+RV-Block__Modifier--name('small') +RV-Block--modifier()
--size spacing-small --size spacing-small
+RV-Element('Icon') +RV-Element('Icon')
.RV-Image .RV-Image
height calc(var(--size) * 1.8) height 'calc(%s * 1.8)' % size
RV-Button--medium() RV-Button--medium()
+RV-Block__Modifier--name('medium') +RV-Block--modifier()
--size spacing-medium * .6 --size spacing-medium * .6
RV-Button--large() RV-Button--large()
+RV-Block__Modifier--name('large') +RV-Block--modifier()
--size spacing-large * .5 --size spacing-large * .5
RV-Button--link() RV-Button--link(size)
+RV-Block__Modifier--name('link') +RV-Block--modifier()
border none border none
border-radius 0px border-radius 0px
color primary-color color primary-color
@ -42,11 +42,11 @@ RV-Button--link()
margin 0 margin 0
+RV-Element('Icon') +RV-Element('Icon')
padding-right calc(var(--size) / 4) padding-right 'calc(%s / 4)' % size
padding-left calc(var(--size) / 4) padding-left calc(var(--size) / 4)
_RV-Button__Icon--shape() _RV-Button__Icon--shape(size)
margin-right calc(var(--size) * 1.2) margin-right 'calc(%s * 1.2)' % size
&, * &, *
z-index 10 z-index 10
position relative position relative
@ -60,12 +60,12 @@ _RV-Button__Icon--shape()
position absolute position absolute
RV-Button__Icon--inwardsArrow() RV-Button__Icon--inwardsArrow(size)
+RV-Element__Modifier--name('inwardsArrow') +RV-Element--modifier()
_RV-Button__Icon--shape() _RV-Button__Icon--shape(size)
.RV-Image .RV-Image
left calc(var(--size) * .5) left 'calc(%s * .5)' % size
&:after &:after
transform rotate(-35deg) transform rotate(-35deg)
left 70% left 70%
@ -76,13 +76,13 @@ RV-Button__Icon--inwardsArrow()
left 70% left 70%
top -35% top -35%
RV-Button__Icon--outwardsArrow() RV-Button__Icon--outwardsArrow(size)
+RV-Element__Modifier--name('outwardsArrow') +RV-Element--modifier()
_RV-Button__Icon--shape() _RV-Button__Icon--shape(size)
margin-right calc(var(--size) * 2) margin-right 'calc(%s * 2)' % size
.RV-Image .RV-Image
left calc(var(--size) * .7) left 'calc(%s * .7)' % size
&:after &:after
transform rotate(35deg) transform rotate(35deg)
@ -94,45 +94,45 @@ RV-Button__Icon--outwardsArrow()
left 70% left 70%
top -37% top -37%
RV-Button__Icon--forwardSlope() RV-Button__Icon--forwardSlope(size)
_RV-Button__Icon--shape() +RV-Element--modifier()
+RV-Element__Modifier--name('forwardSlope') _RV-Button__Icon--shape(size)
margin-right calc(var(--size) * 2) margin-right 'calc(%s * 2)' % size
.RV-Image .RV-Image
left calc(var(--size) * .7) left 'calc(%s * .7)' % size
&:after &:after
transform rotate(-15deg) transform rotate(-15deg)
top 0% top 0%
RV-Button__Icon--backwardSlope() RV-Button__Icon--backwardSlope(size)
_RV-Button__Icon--shape() +RV-Element--modifier()
+RV-Element__Modifier--name('backwardSlope') _RV-Button__Icon--shape(size)
margin-right calc(var(--size) * 2) margin-right 'calc(%s * 2)' % size
.RV-Image .RV-Image
left calc(var(--size) * .7) left 'calc(%s * .7)' % size
&:after &:after
transform rotate(15deg) transform rotate(15deg)
top -10% top -10%
RV-Button__Icon() RV-Button__Icon(size)
+RV-Element--name('Icon') +RV-Element()
width min-content width min-content
background-color primary-color background-color primary-color
padding var(--size) padding size
.RV-Image .RV-Image
height calc(var(--size) * 2.5) height 'calc(%s * 2.5)' % size
RV-Button__Text() RV-Button__Text(size)
+RV-Element--name('Text') +RV-Element()
font-size calc(var(--size) * 1.65) font-size 'calc(%s * 1.65)' % size
background-color secondary-color background-color secondary-color
padding var(--size) padding size
RV-Button() RV-Button()
background-color #f00 background-color #f00
@ -152,40 +152,22 @@ RV-Button()
size: spacing-medium size: spacing-medium
}) })
RV-Reset() RV-Reset()
RV-Button(height) RV-Button()
+RV-Element() +RV-Element()
RV-Button__Icon() RV-Button__Icon--outwardsArrow(--size)
RV-Button__Icon--inwardsArrow(--size)
+RV-Element__Modifier() RV-Button__Icon--forwardSlope(--size)
RV-Button__Icon--outwardsArrow() RV-Button__Icon--backwardSlope(--size)
+RV-Element__Modifier() RV-Button__Icon(--size)
RV-Button__Icon--inwardsArrow()
+RV-Element__Modifier()
RV-Button__Icon--forwardSlope()
+RV-Element__Modifier()
RV-Button__Icon--backwardSlope()
+RV-Element() RV-Button__Text(--size)
RV-Button__Text()
+RV-Block__Modifier() RV-Button--pill(--size)
RV-Button--pill() RV-Button--link(--size)
RV-Button--small(--size)
+RV-Block__Modifier() RV-Button--medium(--size)
RV-Button--link() RV-Button--large(--size)
RV-Button--border(primary-color)
+RV-Block__Modifier()
RV-Button--small()
+RV-Block__Modifier()
RV-Button--medium()
+RV-Block__Modifier()
RV-Button--large()
+RV-Block__Modifier()
RV-Button--border(primary-color)