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

Adapting Atoms to generator

Browse Source
This commit is contained in:
reverend 2021-03-19 13:50:53 +01:00
parent 3afa94abd3
commit c0353b4ca0
1 changed files with 51 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
components/04_Atoms/button/_button.styl
View File

@ -4,6 +4,10 @@ RV-Button--pill(size)
padding-left 'calc(1.5 * %s)' %s padding-left 'calc(1.5 * %s)' %s
padding-right 'calc(1.5 * %s)' %s padding-right 'calc(1.5 * %s)' %s
RV-Button--border__Icon()
+RV-Element()
background-color secondary-color
RV-Button--border(color) RV-Button--border(color)
+RV-Block--modifier() +RV-Block--modifier()
border 3px solid color border 3px solid color
@ -13,16 +17,19 @@ RV-Button--border(color)
&, * &, *
background-color transparent background-color transparent
+RV-Element('Icon') RV-Button--border--Icon()
background-color secondary-color
RV-Button--small__Icon(size)
+RV-Element()
.RV-Image
height 'calc(%s * 1.8)' % size
RV-Button--small(size) RV-Button--small(size)
+RV-Block--modifier() +RV-Block--modifier()
--size spacing-small --size spacing-small
+RV-Element('Icon') RV-Button--small__Icon(size)
.RV-Image
height 'calc(%s * 1.8)' % size
RV-Button--medium() RV-Button--medium()
+RV-Block--modifier() +RV-Block--modifier()
@ -32,6 +39,11 @@ RV-Button--large()
+RV-Block--modifier() +RV-Block--modifier()
--size spacing-large * .5 --size spacing-large * .5
RV-Button--link__Icon(size)
+RV-Element()
padding-right 'calc(%s / 4)' % size
padding-left calc(var(--size) / 4)
RV-Button--link(size) RV-Button--link(size)
+RV-Block--modifier() +RV-Block--modifier()
border none border none
@ -41,9 +53,7 @@ RV-Button--link(size)
background-color transparent background-color transparent
margin 0 margin 0
+RV-Element('Icon') RV-Button--link__Icon(size)
padding-right 'calc(%s / 4)' % size
padding-left calc(var(--size) / 4)
_RV-Button__Icon--shape(size) _RV-Button__Icon--shape(size)
margin-right 'calc(%s * 1.2)' % size margin-right 'calc(%s * 1.2)' % size
@ -126,6 +136,12 @@ RV-Button__Icon(size)
.RV-Image .RV-Image
height 'calc(%s * 2.5)' % size height 'calc(%s * 2.5)' % size
RV-Button__Icon--outwardsArrow(size)
RV-Button__Icon--inwardsArrow(size)
RV-Button__Icon--forwardSlope(size)
RV-Button__Icon--backwardSlope(size)
RV-Button__Text(size) RV-Button__Text(size)
@ -135,39 +151,34 @@ RV-Button__Text(size)
padding size padding size
RV-Button() RV-Button()
background-color #f00 +RV-Block()
line-height 1 RV-CSSParameter({
overflow hidden size: spacing-medium
font-family sans-serif })
background-color secondary-color
color accent-color
text-decoration none
RV-Alignment--verticalCenter()
display inline-flex
border-radius 6px
+RV-Block('RV-Button')
RV-CSSParameter({
size: spacing-medium
})
RV-Reset()
RV-Button()
+RV-Element()
RV-Button__Icon--outwardsArrow(--size)
RV-Button__Icon--inwardsArrow(--size)
RV-Button__Icon--forwardSlope(--size) background-color #f00
RV-Button__Icon--backwardSlope(--size) line-height 1
overflow hidden
font-family sans-serif
background-color secondary-color
color accent-color
text-decoration none
RV-Alignment--verticalCenter()
display inline-flex
border-radius 6px
RV-Reset()
RV-Button__Icon(--size) RV-Button__Icon(--size)
RV-Button__Text(--size)
RV-Button__Text(--size) RV-Button--pill(--size)
RV-Button--link(--size)
RV-Button--pill(--size) RV-Button--small(--size)
RV-Button--link(--size) RV-Button--medium(--size)
RV-Button--small(--size) RV-Button--large(--size)
RV-Button--medium(--size) RV-Button--border(primary-color)
RV-Button--large(--size)
RV-Button--border(primary-color) RV-Button()