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