Skip to content

Commit

Permalink
cancel button adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
@thibautsailly
thibautsailly committed Dec 13, 2023
1 parent 7a24108 commit 123d8bd
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 42 deletions.
61 changes: 34 additions & 27 deletions docs/buttons/buttons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ a:link, a:visited {
font-weight: 500;
}

a:hover {
cursor: pointer;
}

h2 {
margin-top: 64px;
}
Expand Down Expand Up @@ -55,7 +59,7 @@ h2 {
padding: 0 16px;
background-image: linear-gradient(180deg, #2C6EF9 1%, #1844EF 100%);
border: 0.5px solid #000000;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50), inset 0 -1px 1px 0 rgba(0,47,152,0.83), inset 0 1px 0 0 rgba(201,252,255,0.54);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50), inset 0 -1px 1px 0 rgba(0,47,152,0.83), inset 0 1px 0 0 rgba(201,252,255,0.35);
border-radius: 6px;
color: #F5F5F5;
text-shadow: 0 1px 0 rgba(0,0,0,0.36);
Expand All @@ -66,7 +70,7 @@ h2 {
.button_large_primary:hover {
background-image: linear-gradient(180deg, #1844EF 1%, #201EDE 100%);
border: 0.5px solid #000000;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50), inset 0 -1px 1px 0 rgba(0,47,152,0.83), inset 0 1px 0 0 rgba(201,252,255,0.54);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50), inset 0 -1px 1px 0 rgba(0,47,152,0.83), inset 0 1px 0 0 rgba(201,252,255,0.4);
color: #FFFFFF;
text-shadow: 0 1px 0 rgba(0,0,0,0.36);
}
Expand All @@ -88,7 +92,7 @@ h2 {
padding: 0 12px;
background-image: linear-gradient(180deg, #2C6EF9 1%, #1844EF 100%);
border: 0.5px solid #000000;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50), inset 0 -1px 1px 0 rgba(0,47,152,0.83), inset 0 1px 0 0 rgba(201,252,255,0.54);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50), inset 0 -1px 1px 0 rgba(0,47,152,0.83), inset 0 1px 0 0 rgba(201,252,255,0.35);
border-radius: 5px;
color: #F5F5F5;
text-shadow: 0 1px 0 rgba(0,0,0,0.36);
Expand All @@ -99,7 +103,7 @@ h2 {
.button_medium_primary:hover {
background-image: linear-gradient(180deg, #1844EF 1%, #201EDE 100%);
border: 0.5px solid #000000;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50), inset 0 -1px 1px 0 rgba(0,47,152,0.83), inset 0 1px 0 0 rgba(201,252,255,0.54);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50), inset 0 -1px 1px 0 rgba(0,47,152,0.83), inset 0 1px 0 0 rgba(201,252,255,0.4);
color: #FFFFFF;
text-shadow: 0 1px 0 rgba(0,0,0,0.36);
}
Expand All @@ -121,7 +125,7 @@ h2 {
padding: 0 8px;
background-image: linear-gradient(180deg, #2C6EF9 1%, #1844EF 100%);
border: 0.5px solid #000000;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50), inset 0 -1px 1px 0 rgba(0,47,152,0.83), inset 0 1px 0 0 rgba(201,252,255,0.54);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50), inset 0 -1px 1px 0 rgba(0,47,152,0.83), inset 0 1px 0 0 rgba(201,252,255,0.35);
border-radius: 5px;
color: #F5F5F5;
text-shadow: 0 1px 0 rgba(0,0,0,0.36);
Expand All @@ -132,7 +136,7 @@ h2 {
.button_small_primary:hover {
background-image: linear-gradient(180deg, #1844EF 1%, #201EDE 100%);
border: 0.5px solid #000000;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50), inset 0 -1px 1px 0 rgba(0,47,152,0.83), inset 0 1px 0 0 rgba(201,252,255,0.54);
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.50), inset 0 -1px 1px 0 rgba(0,47,152,0.83), inset 0 1px 0 0 rgba(201,252,255,0.4);
color: #FFFFFF;
text-shadow: 0 1px 0 rgba(0,0,0,0.36);
}
Expand Down Expand Up @@ -167,7 +171,7 @@ h2 {
}

.button_large_normal:hover {
background-image: linear-gradient(180deg, #F5F5F5 0%, #EBEBEA 100%);
background-image: linear-gradient(180deg, #EBEBEA 0%, #E4E2E0 100%);
border: 0.5px solid #1F1B17;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25), inset 0 -1px 1px 0 #B6B3AF, inset 0 1px 1px 0 rgba(255,255,255,0.46);
color: #1F1B17;
Expand Down Expand Up @@ -199,7 +203,7 @@ h2 {
}

.button_medium_normal:hover {
background-image: linear-gradient(180deg, #F5F5F5 0%, #EBEBEA 100%);
background-image: linear-gradient(180deg, #EBEBEA 0%, #E4E2E0 100%);
border: 0.5px solid #1F1B17;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25), inset 0 -1px 1px 0 #B6B3AF, inset 0 1px 1px 0 rgba(255,255,255,0.46);
color: #1F1B17;
Expand Down Expand Up @@ -231,7 +235,7 @@ h2 {
}

.button_small_normal:hover {
background-image: linear-gradient(180deg, #F5F5F5 0%, #EBEBEA 100%);
background-image: linear-gradient(180deg, #EBEBEA 0%, #E4E2E0 100%);
border: 0.5px solid #1F1B17;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25), inset 0 -1px 1px 0 #B6B3AF, inset 0 1px 1px 0 rgba(255,255,255,0.46);
color: #1F1B17;
Expand All @@ -256,7 +260,7 @@ h2 {
left: 0;
padding: 0 16px;
background: rgba(255,255,255,0.60);
border: 1.5px solid #797671;
border: 1px solid #797671;
box-shadow: inset 0 -1px 1px 0 #D3D1CF, inset 0 2px 0 0 #FFFFFF;
border-radius: 6px;
font-size: 18px;
Expand All @@ -267,18 +271,19 @@ h2 {

.button_large_cancel:hover {
background: #FFFFFF;
border: 1.5px solid #494641;
box-shadow: inset 0 -1px 1px 0 #94918E, inset 0 2px 0 0 #FFFFFF;
border: 1px solid #312E2B;
box-shadow: inset 0 -1px 1px 0 #D3D1CF, inset 0 3px 0 0 #FFFFFF;
border-radius: 6px;
color: #494641;
text-shadow: 0 1px 0 rgba(255,255,255,0.84);
}

.button_large_cancel:active {
top: 0.5px;
background: rgba(0,0,0,0.05);
border: 1.5px solid #1F1B17;
box-shadow: inset 0 -1px 0 0 #FFFFFF, inset 0 2px 1px 0 #D3D1CF;
background: rgba(0,0,0,0.02);
border: 1px solid #94918E;
border-top: 1.5px solid #797671;
box-shadow: 0 1.5px 0 0 #FFFFFF, inset 0 2px 2px 0 #D3D1CF;
color: #494641;
text-shadow: 0 1px 0 rgba(255,255,255,0.84);
}
Expand All @@ -289,7 +294,7 @@ h2 {
left: 0;
padding: 0 12px;
background: rgba(255,255,255,0.60);
border: 1.5px solid #797671;
border: 1px solid #797671;
box-shadow: inset 0 -1px 1px 0 #D3D1CF, inset 0 2px 0 0 #FFFFFF;
border-radius: 6px;
font-size: 16px;
Expand All @@ -300,18 +305,19 @@ h2 {

.button_medium_cancel:hover {
background: #FFFFFF;
border: 1.5px solid #494641;
box-shadow: inset 0 -1px 1px 0 #94918E, inset 0 2px 0 0 #FFFFFF;
border: 1px solid #312E2B;
box-shadow: inset 0 -1px 1px 0 #D3D1CF, inset 0 3px 0 0 #FFFFFF;
border-radius: 6px;
color: #494641;
text-shadow: 0 1px 0 rgba(255,255,255,0.84);
}

.button_medium_cancel:active {
top: 0.5px;
background: rgba(0,0,0,0.05);
border: 1.5px solid #1F1B17;
box-shadow: inset 0 -1px 0 0 #FFFFFF, inset 0 2px 1px 0 #D3D1CF;
background: rgba(0,0,0,0.02);
border: 1px solid #94918E;
border-top: 1.5px solid #797671;
box-shadow: 0 1.5px 0 0 #FFFFFF, inset 0 1px 2px 0 #D3D1CF;
color: #494641;
text-shadow: 0 1px 0 rgba(255,255,255,0.84);
}
Expand All @@ -322,7 +328,7 @@ h2 {
left: 0;
padding: 0 8px;
background: rgba(255,255,255,0.60);
border: 1.5px solid #797671;
border: 1px solid #797671;
box-shadow: inset 0 -1px 1px 0 #D3D1CF, inset 0 2px 0 0 #FFFFFF;
border-radius: 6px;
font-size: 14px;
Expand All @@ -333,18 +339,19 @@ h2 {

.button_small_cancel:hover {
background: #FFFFFF;
border: 1.5px solid #494641;
box-shadow: inset 0 -1px 1px 0 #94918E, inset 0 2px 0 0 #FFFFFF;
border: 1px solid #312E2B;
box-shadow: inset 0 -1px 1px 0 #D3D1CF, inset 0 3px 0 0 #FFFFFF;
border-radius: 6px;
color: #494641;
text-shadow: 0 1px 0 rgba(255,255,255,0.84);
}

.button_small_cancel:active {
top: 0.5px;
background: rgba(0,0,0,0.05);
border: 1.5px solid #1F1B17;
box-shadow: inset 0 -1px 0 0 #FFFFFF, inset 0 2px 1px 0 #D3D1CF;
background: rgba(0,0,0,0.02);
border: 1px solid #94918E;
border-top: 1.5px solid #797671;
box-shadow: 0 1.5px 0 0 #FFFFFF, inset 0 1px 2px 0 #D3D1CF;
color: #494641;
text-shadow: 0 1px 0 rgba(255,255,255,0.84);
}
Expand Down
30 changes: 15 additions & 15 deletions docs/buttons/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,61 +12,61 @@
<h2>Primary buttons</h2>
<div class="button_group">
<div class="button_container">
<a class="button_large_primary" href="#" title="">Primary large</a>
<a class="button_large_primary" title="">Primary large</a>
</div>
<div class="button_container">
<a class="button_medium_primary" href="#" title="">Primary medium</a>
<a class="button_medium_primary" title="">Primary medium</a>
</div>
<div class="button_container">
<a class="button_small_primary" href="#" title="">Primary small</a>
<a class="button_small_primary" title="">Primary small</a>
</div>
</div>
<h2>Normal buttons</h2>
<div class="button_group">
<div class="button_container">
<a class="button_large_normal" href="#" title="">Normal large</a>
<a class="button_large_normal" title="">Normal large</a>
</div>
<div class="button_container">
<a class="button_medium_normal" href="#" title="">Normal medium</a>
<a class="button_medium_normal" title="">Normal medium</a>
</div>
<div class="button_container">
<a class="button_small_normal" href="#" title="">Normal small</a>
<a class="button_small_normal" title="">Normal small</a>
</div>
</div>
<h2>Cancel buttons</h2>
<div class="button_group">
<div class="button_container">
<a class="button_large_cancel" href="#" title="">Cancel large</a>
<a class="button_large_cancel" title="">Cancel large</a>
</div>
<div class="button_container">
<a class="button_medium_cancel" href="#" title="">Cancel medium</a>
<a class="button_medium_cancel" title="">Cancel medium</a>
</div>
<div class="button_container">
<a class="button_small_cancel" href="#" title="">Cancel small</a>
<a class="button_small_cancel" title="">Cancel small</a>
</div>
</div>
<h2>Quiet buttons</h2>
<div class="button_group">
<div class="button_container">
<a class="button_large_quiet" href="" title="">Quiet large</a>
<a class="button_large_quiet" title="">Quiet large</a>
</div>
<div class="button_container">
<a class="button_medium_quiet" href="" title="">Quiet medium</a>
<a class="button_medium_quiet" title="">Quiet medium</a>
</div>
<div class="button_container">
<a class="button_small_quiet" href="" title="">Quiet small</a>
<a class="button_small_quiet" title="">Quiet small</a>
</div>
</div>
<h2>Destructive buttons</h2>
<div class="button_group">
<div class="button_container">
<a class="button_large_destructive" href="#" title="">Destructive large</a>
<a class="button_large_destructive" title="">Destructive large</a>
</div>
<div class="button_container">
<a class="button_medium_destructive" href="#" title="">Destructive medium</a>
<a class="button_medium_destructive" title="">Destructive medium</a>
</div>
<div class="button_container">
<a class="button_small_destructive" href="#" title="">Destructive small</a>
<a class="button_small_destructive" title="">Destructive small</a>
</div>
</div>
</body>
Expand Down

0 comments on commit 123d8bd

Please sign in to comment.