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

More Restructuring

Browse Source
This commit is contained in:
reverend
2021-03-09 12:37:14 +01:00
parent 07e8b269e2
commit dc794a15fa
17 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/04_Atoms/_atoms.styl Normal file
View File

@@ -0,0 +1 @@
@import 'button/_button'

173
components/04_Atoms/button/_button.styl Normal file
View 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
View File

@@ -0,0 +1 @@
{}

39
components/04_Atoms/button/button.hbs Normal file
View 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>