Adapting Buttons

This commit is contained in:
reverend 2021-03-21 18:47:51 +01:00
parent 54253f431b
commit 5387635a63
2 changed files with 49 additions and 19 deletions

View File

@ -14,9 +14,6 @@ RV-Button--border(color)
color color color color
border-radius 0px border-radius 0px
&, *
background-color transparent
RV-Button--border--Icon() RV-Button--border--Icon()
RV-Button--small__Icon(size) RV-Button--small__Icon(size)
@ -50,24 +47,23 @@ RV-Button--link(size)
border-radius 0px border-radius 0px
color primary-color color primary-color
&, * &, *
background-color transparent
margin 0 margin 0
RV-Button--link__Icon(size) //RV-Button--link__Icon(size)
_RV-Button__Icon--shape(size) _RV-Button__Icon--shape(size)
margin-right 'calc(%s * 1.2)' % size margin-right 'calc(1.2*%s)' % size
&, * &, *
z-index 10 z-index 10
position relative position relative
&:after, &:before &:after, &:before
content ''
width 50% width 50%
height 110% height 110%
z-index 5 z-index 5
background-color inherit background-color inherit
position absolute position absolute
left 70%
RV-Button__Icon--inwardsArrow(size) RV-Button__Icon--inwardsArrow(size)
@ -76,55 +72,57 @@ RV-Button__Icon--inwardsArrow(size)
.RV-Image .RV-Image
left 'calc(%s * .5)' % size left 'calc(%s * .5)' % size
&:after &:after
content ''
transform rotate(-35deg) transform rotate(-35deg)
left 70%
top 25% top 25%
&:before &:before
content ''
transform rotate(35deg) transform rotate(35deg)
left 70%
top -35% top -35%
RV-Button__Icon--outwardsArrow(size) RV-Button__Icon--outwardsArrow(size)
+RV-Element--modifier() +RV-Element--modifier()
_RV-Button__Icon--shape(size) _RV-Button__Icon--shape(size)
margin-right 'calc(%s * 2)' % size //margin-right 'calc(%s * 2)' % size
.RV-Image .RV-Image
left 'calc(%s * .7)' % size left 'calc(%s * .7)' % size
&:after &:after
content ''
transform rotate(35deg) transform rotate(35deg)
left 70%
top 25% top 25%
&:before &:before
content ''
transform rotate(-35deg) transform rotate(-35deg)
left 70%
top -37% top -37%
RV-Button__Icon--forwardSlope(size) RV-Button__Icon--forwardSlope(size)
+RV-Element--modifier() +RV-Element--modifier()
_RV-Button__Icon--shape(size) _RV-Button__Icon--shape(size)
margin-right 'calc(%s * 2)' % size
.RV-Image .RV-Image
left 'calc(%s * .7)' % size left 'calc(%s * .7)' % size
&:after &:after, &:before
content ''
transform rotate(-15deg) transform rotate(-15deg)
top 0% top 0%
RV-Button__Icon--backwardSlope(size) RV-Button__Icon--backwardSlope(size)
+RV-Element--modifier() +RV-Element--modifier()
_RV-Button__Icon--shape(size) _RV-Button__Icon--shape(size)
margin-right 'calc(%s * 2)' % size //margin-right 'calc(%s * 2)' % size
.RV-Image .RV-Image
left 'calc(%s * .7)' % size left 'calc(%s * .7)' % size
&:after &:after
content ''
transform rotate(15deg) transform rotate(15deg)
top -10% top -10%
@ -132,11 +130,16 @@ RV-Button__Icon(size)
+RV-Element() +RV-Element()
width min-content width min-content
background-color primary-color background-color primary-color
padding size //padding 'calc(1.01*%s)' % size
height 'calc(4*%s)' % size
width 'calc(4*%s)' % size
position relative
.RV-Image .RV-Image
height 'calc(%s * 2.5)' % size height 'calc(%s * 2.5)' % size
RV-Alignment--center()
RV-Button__Icon--outwardsArrow(size) RV-Button__Icon--outwardsArrow(size)
RV-Button__Icon--inwardsArrow(size) RV-Button__Icon--inwardsArrow(size)
@ -148,7 +151,12 @@ RV-Button__Text(size)
+RV-Element() +RV-Element()
font-size 'calc(%s * 1.65)' % size font-size 'calc(%s * 1.65)' % size
background-color secondary-color background-color secondary-color
padding size //padding 'calc(1.5* %s)' % size
//padding-left 'calc(2*%s)' %size
padding 0 size
height 'calc(4*%s)' % size
RV-Alignment--center()
RV-Button() RV-Button()
+RV-Block() +RV-Block()

View File

@ -9,6 +9,17 @@
<br> <br>
<br> <br>
<br> <br>
<button class="RV-Button RV-Button--large RV-Button--border">
<div class="RV-Button__Icon RV-Button__Icon--inwardsArrow">
<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"> <button class="RV-Button RV-Button--medium RV-Button--link">
<div class="RV-Button__Icon RV-Button__Icon--forwardSlope"> <div class="RV-Button__Icon RV-Button__Icon--forwardSlope">
<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/> <img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>
@ -20,6 +31,17 @@
<br> <br>
<br> <br>
<br> <br>
<button class="RV-Button RV-Button--medium RV-Button--link">
<div class="RV-Button__Icon RV-Button__Icon--backwardSlope">
<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"> <button class="RV-Button RV-Button--small RV-Button">
<div class="RV-Button__Icon"> <div class="RV-Button__Icon">
<img class="RV-Image" src="{{ path '/icons/debug.png' }}"/> <img class="RV-Image" src="{{ path '/icons/debug.png' }}"/>