More Restructuring
This commit is contained in:
173
components/04_Atoms/button/_button.styl
Normal file
173
components/04_Atoms/button/_button.styl
Normal file
@@ -0,0 +1,173 @@
|
||||
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()
|
||||
border 3px solid color
|
||||
color color
|
||||
border-radius 0px
|
||||
|
||||
&, *
|
||||
background-color transparent
|
||||
|
||||
+RV-Element('Icon')
|
||||
background-color secondary-color
|
||||
|
||||
RV-Button--small(size)
|
||||
+RV-Block--modifier()
|
||||
--size spacing-small
|
||||
|
||||
+RV-Element('Icon')
|
||||
.RV-Image
|
||||
height 'calc(%s * 1.8)' % size
|
||||
|
||||
RV-Button--medium()
|
||||
+RV-Block--modifier()
|
||||
--size spacing-medium * .6
|
||||
|
||||
RV-Button--large()
|
||||
+RV-Block--modifier()
|
||||
--size spacing-large * .5
|
||||
|
||||
RV-Button--link(size)
|
||||
+RV-Block--modifier()
|
||||
border none
|
||||
border-radius 0px
|
||||
color primary-color
|
||||
&, *
|
||||
background-color transparent
|
||||
margin 0
|
||||
|
||||
+RV-Element('Icon')
|
||||
padding-right 'calc(%s / 4)' % size
|
||||
padding-left calc(var(--size) / 4)
|
||||
|
||||
_RV-Button__Icon--shape(size)
|
||||
margin-right 'calc(%s * 1.2)' % size
|
||||
&, *
|
||||
z-index 10
|
||||
position relative
|
||||
|
||||
&:after, &:before
|
||||
content ''
|
||||
width 50%
|
||||
height 110%
|
||||
z-index 5
|
||||
background-color inherit
|
||||
position absolute
|
||||
|
||||
|
||||
RV-Button__Icon--inwardsArrow(size)
|
||||
+RV-Element--modifier()
|
||||
_RV-Button__Icon--shape(size)
|
||||
|
||||
.RV-Image
|
||||
left 'calc(%s * .5)' % size
|
||||
&:after
|
||||
transform rotate(-35deg)
|
||||
left 70%
|
||||
top 25%
|
||||
|
||||
&:before
|
||||
transform rotate(35deg)
|
||||
left 70%
|
||||
top -35%
|
||||
|
||||
RV-Button__Icon--outwardsArrow(size)
|
||||
+RV-Element--modifier()
|
||||
_RV-Button__Icon--shape(size)
|
||||
margin-right 'calc(%s * 2)' % size
|
||||
|
||||
.RV-Image
|
||||
left 'calc(%s * .7)' % size
|
||||
|
||||
&:after
|
||||
transform rotate(35deg)
|
||||
left 70%
|
||||
top 25%
|
||||
|
||||
&:before
|
||||
transform rotate(-35deg)
|
||||
left 70%
|
||||
top -37%
|
||||
|
||||
RV-Button__Icon--forwardSlope(size)
|
||||
+RV-Element--modifier()
|
||||
_RV-Button__Icon--shape(size)
|
||||
margin-right 'calc(%s * 2)' % size
|
||||
|
||||
.RV-Image
|
||||
left 'calc(%s * .7)' % size
|
||||
|
||||
&:after
|
||||
transform rotate(-15deg)
|
||||
top 0%
|
||||
|
||||
RV-Button__Icon--backwardSlope(size)
|
||||
+RV-Element--modifier()
|
||||
_RV-Button__Icon--shape(size)
|
||||
margin-right 'calc(%s * 2)' % size
|
||||
|
||||
.RV-Image
|
||||
left 'calc(%s * .7)' % size
|
||||
|
||||
&:after
|
||||
transform rotate(15deg)
|
||||
top -10%
|
||||
|
||||
RV-Button__Icon(size)
|
||||
+RV-Element()
|
||||
width min-content
|
||||
background-color primary-color
|
||||
padding size
|
||||
|
||||
.RV-Image
|
||||
height 'calc(%s * 2.5)' % size
|
||||
|
||||
|
||||
RV-Button__Text(size)
|
||||
+RV-Element()
|
||||
font-size 'calc(%s * 1.65)' % size
|
||||
background-color secondary-color
|
||||
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-Button__Icon--forwardSlope(--size)
|
||||
RV-Button__Icon--backwardSlope(--size)
|
||||
|
||||
RV-Button__Icon(--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)
|
||||
1
components/04_Atoms/button/button.config.json
Normal file
1
components/04_Atoms/button/button.config.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
39
components/04_Atoms/button/button.hbs
Normal file
39
components/04_Atoms/button/button.hbs
Normal file
@@ -0,0 +1,39 @@
|
||||
<button class="RV-Button RV-Button--large RV-Button--border">
|
||||
<div class="RV-Button__Icon RV-Button__Icon--outwardsArrow">
|
||||
<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
|
||||
</div>
|
||||
<div class="RV-Button__Text">
|
||||
Button Text
|
||||
</div>
|
||||
</button>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<button class="RV-Button RV-Button--medium RV-Button--link">
|
||||
<div class="RV-Button__Icon RV-Button__Icon--forwardSlope">
|
||||
<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
|
||||
</div>
|
||||
<div class="RV-Button__Text">
|
||||
Button Text
|
||||
</div>
|
||||
</button>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<button class="RV-Button RV-Button--small RV-Button">
|
||||
<div class="RV-Button__Icon">
|
||||
<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
|
||||
</div>
|
||||
<div class="RV-Button__Text">
|
||||
Button Text
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<button class="RV-Button RV-Button--small RV-Button--border">
|
||||
<div class="RV-Button__Text">
|
||||
Button Text
|
||||
</div>
|
||||
</button>
|
||||
Reference in New Issue
Block a user