diff --git a/components/04_Atoms/button/_button.styl b/components/04_Atoms/button/_button.styl index 916f319..99c1482 100644 --- a/components/04_Atoms/button/_button.styl +++ b/components/04_Atoms/button/_button.styl @@ -4,6 +4,10 @@ RV-Button--pill(size) padding-left '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-Block--modifier() border 3px solid color @@ -13,16 +17,19 @@ RV-Button--border(color) &, * background-color transparent - +RV-Element('Icon') - background-color secondary-color + RV-Button--border--Icon() + +RV-Button--small__Icon(size) + +RV-Element() + .RV-Image + height 'calc(%s * 1.8)' % size RV-Button--small(size) +RV-Block--modifier() --size spacing-small - +RV-Element('Icon') - .RV-Image - height 'calc(%s * 1.8)' % size + RV-Button--small__Icon(size) + RV-Button--medium() +RV-Block--modifier() @@ -32,6 +39,11 @@ RV-Button--large() +RV-Block--modifier() --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-Block--modifier() border none @@ -41,9 +53,7 @@ RV-Button--link(size) background-color transparent margin 0 - +RV-Element('Icon') - padding-right 'calc(%s / 4)' % size - padding-left calc(var(--size) / 4) + RV-Button--link__Icon(size) _RV-Button__Icon--shape(size) margin-right 'calc(%s * 1.2)' % size @@ -126,6 +136,12 @@ RV-Button__Icon(size) .RV-Image 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) @@ -135,39 +151,34 @@ RV-Button__Text(size) padding size RV-Button() - background-color #f00 - 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-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-Block() + RV-CSSParameter({ + size: spacing-medium + }) - RV-Button__Icon--forwardSlope(--size) - RV-Button__Icon--backwardSlope(--size) + background-color #f00 + 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__Text(--size) - RV-Button__Text(--size) - - 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) + 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) + +RV-Button() \ No newline at end of file