aliascss
Version:
AliasCSS is a CSS post processor.
86 lines (72 loc) • 4.63 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI-Development</title>
</head>
<body>
<!-- Base button -->
<button class="button"
class-button="dib aic jcc cp tdn tn-all-0d3s
c--button-color:ffffff
p--button-padding:8px-16px
fs--button-font-size:16px
br--button-border-radius:4px
b--button-border:2px-solid--border-color
--border-color:transparent
bg--button-bg:gray-600
--hover-opacity-0d9
--hover-transform-translateY--1px
--active-transform-translateY-0px
[class~=button-primary][--button-bg:primary600,--button-soft-bg:primary100,--button-color:ffffff]
[class~=button-success][--button-bg:success600,--button-soft-bg:success100,--button-color:ffffff]
[class~=button-error][--button-bg:error600,--button-soft-bg:error100,--button-color:ffffff]
[class~=button-warning][--button-bg:warning600,--button-soft-bg:warning100,--button-color:ffffff]
[disabled]-bg-cccccc
[disabled]-color-666666
[disabled]-opacity-0.7
[disabled]-cursor-not-allowed
[class~=button-small][--button-padding:6px-12px,--button-font-size:14px]
[class~=button-large][--button-padding:12px-24px,--button-font-size:18px]
[class~=button-outline][bg-transparent,--button-color:--button-bg:gray-600,--border-color:--button-color,--hover-bg--button-color:gray-600,--hover-color-ffffff]
[class~=button-text][bgc-transparent,--button-border:none,--hover-bg--button-soft-bg:gray100,--button-color:--button-bg:gray600,--button-padding:4px-8px]">Base
Button</button>
<button class="button button-small button-primary">Small Button</button>
<button class="button button-small button-primary filter-inverse">Small Button</button>
<button class="button button-small bgc-indigo600">Small Button</button>
<button class="button button-small button-warning">Small Button</button>
<button class="button button-small button-success">Small Button</button>
<button class="button button-small button-error">Small Button</button>
<span class="divider-text text-lg fwb " class-divider-text="[df,aic,g12px]
--before[df,cont,bgc--divider-color:gray,flex-1,h--divider-width:1px]
--after[df,cont,bgc--divider-color:gray,flex-1,h--divider-width:1px]" class-divider="border-top-width--divider-width:1px
border-top-color--divider-color:gray
border-top-style--divider-style:solid bsbb db
">Divider</span>
<button class="button button-large aspect-ratio-1-by-1 "><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-soup-icon lucide-soup">
<path d="M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z" />
<path d="M7 21h10" />
<path d="M19.5 12 22 6" />
<path d="M16.25 3c.27.1.8.53.75 1.36-.06.83-.93 1.2-1 2.02-.05.78.34 1.24.73 1.62" />
<path d="M11.25 3c.27.1.8.53.74 1.36-.05.83-.93 1.2-.98 2.02-.06.78.33 1.24.72 1.62" />
<path d="M6.25 3c.27.1.8.53.75 1.36-.06.83-.93 1.2-1 2.02-.05.78.34 1.24.74 1.62" />
</svg></button>
<button class="button button-outline br-50px-i">Outline Button</button>
<br/>
<button class="button button-outline">outline Button</button>
<button class="button button-outline button-primary">outline Button</button>
<button class="button button-outline button-error">outline Button</button>
<button class="button button-outline c-indigo600 --border-color:indigo600-i"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-soup-icon lucide-soup">
<path d="M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z" />
<path d="M7 21h10" />
<path d="M19.5 12 22 6" />
<path d="M16.25 3c.27.1.8.53.75 1.36-.06.83-.93 1.2-1 2.02-.05.78.34 1.24.73 1.62" />
<path d="M11.25 3c.27.1.8.53.74 1.36-.05.83-.93 1.2-.98 2.02-.06.78.33 1.24.72 1.62" />
<path d="M6.25 3c.27.1.8.53.75 1.36-.06.83-.93 1.2-1 2.02-.05.78.34 1.24.74 1.62" />
</svg></button>
</body>
<script src="/js/aliascss.js"></script>
</html>