mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-30 17:14:50 +00:00
feat(core): ✨ add pill and circle border radius variables
This commit is contained in:
parent
6bc611adcd
commit
d238e932a1
|
@ -124,7 +124,7 @@
|
|||
left: 55%;
|
||||
display: block;
|
||||
padding: 0.1em 0.4em;
|
||||
border-radius: 100px;
|
||||
border-radius: var( --border-radius--pill );
|
||||
background: var( --color-primary );
|
||||
color: #fff;
|
||||
content: attr( data-counter-text );
|
||||
|
|
|
@ -80,7 +80,7 @@
|
|||
&__indicator {
|
||||
width: 3px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 1000px;
|
||||
border-radius: var( --border-radius--pill );
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
|
|
|
@ -62,6 +62,7 @@
|
|||
--border-radius--small: @border-radius--small;
|
||||
--border-radius--medium: @border-radius--medium;
|
||||
--border-radius--large: @border-radius--large;
|
||||
--border-radius--pill: @border-radius--pill;
|
||||
|
||||
/* Fonts */
|
||||
--font-family-base: @fonts;
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
display: block;
|
||||
padding: var( --space-xs ) var( --space-md );
|
||||
border: 1px solid var( --border-color-base--darker );
|
||||
border-radius: 9999px;
|
||||
border-radius: var( --border-radius--pill );
|
||||
color: var( --color-base--subtle );
|
||||
transition: @transition-background;
|
||||
|
||||
|
|
|
@ -253,6 +253,8 @@
|
|||
@border-radius--small: 4px;
|
||||
@border-radius--medium: @border-radius--small * 2;
|
||||
@border-radius--large: @border-radius--small * 3;
|
||||
@border-radius--pill: 9999px;
|
||||
@border-radius--circle: 100%;
|
||||
|
||||
/* Transitions */
|
||||
@transition-timing-fast: 100ms;
|
||||
|
|
|
@ -42,7 +42,7 @@
|
|||
&:after {
|
||||
top: 0;
|
||||
border-color: var( --color-destructive );
|
||||
border-radius: 100px;
|
||||
border-radius: var( --border-radius--pill );
|
||||
background-color: var( --color-destructive );
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
position: relative;
|
||||
top: 50%;
|
||||
border-color: var( --border-color-base--lighter );
|
||||
border-radius: 100px;
|
||||
border-radius: var( --border-radius--pill );
|
||||
margin: 0 auto;
|
||||
background-color: var( --color-surface-1 );
|
||||
|
||||
|
|
|
@ -60,7 +60,7 @@
|
|||
display: inline-block;
|
||||
padding: var( --space-xxs ) var( --space-md );
|
||||
border: 1px solid var( --border-color-base );
|
||||
border-radius: 100px;
|
||||
border-radius: var( --border-radius--pill );
|
||||
margin: var( --space-xxs );
|
||||
background-color: var( --color-surface-0 );
|
||||
color: var( --color-base--subtle );
|
||||
|
|
Loading…
Reference in a new issue