davejansen/system.css
1
0
Fork 0
mirror of https://github.com/sakofchit/system.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

add new border-image for default button, replace old button.png with button.svg

Browse Source
This commit is contained in:
yukseltron
2022-11-01 14:41:52 -04:00
parent f33c0313e3
commit d1aa8f232d
4 changed files with 164 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/index.html.ejs
View File

@@ -97,6 +97,11 @@
`)%>
<%- example(`
<button class="btn-default">Buttons can be long!!</button>
`)%>
<p>Disabled buttons look the same as standard buttons, but with grey button text. Add the <code>disabled</code> attribute to use it.</p>
<%- example(`

3
icon/button-default.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="141" height="141" viewBox="0 0 141 141" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.011 0H108.989V9.60356H131.397L131.397 32.0114H141V108.99H131.397V131.397H108.989V141H32.011V131.397H9.60333V108.99H0V32.0114H9.60333V9.60356H32.011V0ZM5.67786 37.6893H15.281V37.6893H5.67786V37.6893ZM28.0856 125.719H28.0854V125.719H36.4884L28.0856 125.719ZM103.311 135.322L103.311 135.322V125.719H103.311V135.322ZM125.719 103.312V125.719H125.719V103.312H125.719ZM135.322 103.312L135.322 103.312V37.6893H125.719L125.719 15.2815H112.914H103.311V5.67793H37.6888V5.67786H103.311V15.2814H125.719L125.719 37.6893H135.322V103.312ZM15.2812 15.2814H37.6887V15.2815H28.0854H15.2812V15.2814ZM16.8815 39.2897H16.8817V101.711H28.0856V112.914H39.2894V124.119H101.711V124.119H39.2893V112.914H28.0854V101.711H16.8815V39.2897ZM112.914 112.914H101.711V112.914H112.914V112.914ZM124.118 101.711H112.915V101.711H124.118V101.711ZM39.2893 16.8818H39.2894V28.0858H39.2893V16.8818ZM28.0856 39.2896V28.0859H28.0854V39.2896H28.0856ZM22.5596 44.9675V96.0333H33.7634V107.237H44.9673V118.441H96.0329V107.237H107.237V96.0333H118.44V44.9675H107.237V33.7637H96.0329V22.5596H44.9673V33.7637H33.7634V44.9675H22.5596ZM50 30.0002H91V36.0002H97H105V44.0002V50.0002H111V91.0002H105V97.0002V105H97H91V111H50V105H44H36V97.0002V91.0002H30V50.0002H36V44.0002V36.0002H44H50V30.0002ZM97 51.0002H104V90.0002H97V97.0002H90V104H51V97.0002H44V90.0002H37V51.0002H44V44.0002H51V37.0002H90V44.0002H97V51.0002Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

3
icon/button.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M61 0H20V6H14H6V14V20H0V61H6V67V75H14H20V81H61V75H67H75V67V61H81V20H75V14V6H67H61V0ZM74 21H67V14H60V7H21V14H14V21H7V60H14V67H21V74H60V67H67V60H74V21Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 318 B

11
style.css
View File

@@ -374,7 +374,7 @@ h2 {
/* buttons */
.btn {
.btn, .btn-default {
min-height: 20px;
min-width: 59px;
padding: 0 20px;
@@ -382,7 +382,7 @@ h2 {
background: var(--primary);
border-style: solid;
border-width: 5.5px;
border-image: url("./icon/button.png") 30 stretch;
border-image: url("./icon/button.svg") 30 stretch;
color: var(--secondary);
text-align: center;
text-decoration: none;
@@ -391,6 +391,11 @@ h2 {
cursor: pointer;
}
.btn-default {
border-image: url("./icon/button-default.svg") 60 stretch;
border-width: 0.7em;
}
.btn:active {
background: var(--secondary);
border-radius:6px;
@@ -405,7 +410,7 @@ h2 {
background: var(--primary);
border-style: solid;
border-width: 5.5px;
border-image: url("./icon/button.png") 30 stretch;
border-image: url("./icon/button.svg") 30 stretch;
color: var(--disabled);
text-align: center;
text-decoration: none;