nvim/UltiSnips/css.snippets

snippet sld "/* stylelint-disable-next-line ... */"
/* stylelint-disable-next-line ${1:declaration-block-no-shorthand-property-overrides} */
endsnippet

snippet @m "@media ( ..."
@media ($1: ${2:$bp-${3:s}}) {
        $0
}
endsnippet

snippet @max "@media (max-width: ..."
@media (max-width: ${2:$bp-${3:s-max}}) {
        $0
}
endsnippet

snippet @min "@media (min-width: ..."
@media (min-width: ${2:$bp-${3:s}}) {
        $0
}
endsnippet

snippet lg "linear-gradient( ... )"
linear-gradient(
	${1:to bottom},
	${2:transparent},
	${3:transparent}
)$0
endsnippet

snippet bglg "background: linear-gradient ..."
background: linear-gradient(
							${2:to bottom},
							${3:transparent},
							${4:transparent}
						);
endsnippet

snippet flex "display: flex ..."
display: flex;
flex-direction: ${1:row};
justify-content: ${2:center};
align-items: ${3:center};
endsnippet

snippet w "width: ;"
width: ${1:100%};
endsnippet

snippet h "height: ;"
height: ${1:100%};
endsnippet

snippet wh "width: ; height: ;"
width: ${1:100%};
height: $1;
endsnippet

snippet mxw "max-width: ;"
max-width: ${1:100%};
endsnippet

snippet mxh "max-height: ;"
max-height: ${1:100%};
endsnippet

snippet mnw "min-width: ;"
min-width: ${1:100%};
endsnippet

snippet mnh "min-height: ;"
min-height: ${1:100%};
endsnippet

snippet bgc "background-color: ;"
background-color: ${1:transparent};
endsnippet

snippet t "top: ... ;"
top: ${1:0};
endsnippet

snippet b "bottom: ... ;"
bottom: ${1:0};
endsnippet

snippet l "left: ... ;"
left: ${1:0};
endsnippet

snippet r "right: ... ;"
right: ${1:0};
endsnippet

snippet bd "border: ... ;"
border: ${1:1px} ${2:solid} ${3:currentColor};
endsnippet

snippet bdt "border-top: ... ;"
border-top: ${1:1px} ${2:solid} ${3:currentColor};
endsnippet

snippet bdb "border-bottom: ... ;"
border-bottom: ${1:1px} ${2:solid} ${3:currentColor};
endsnippet

snippet bdl "border-left: ... ;"
border-left: ${1:1px} ${2:solid} ${3:currentColor};
endsnippet

snippet bdr "border-right: ... ;"
border-right: ${1:1px} ${2:solid} ${3:currentColor};
endsnippet

snippet br "border-radius: ... ;"
border-radius: ${1:50%};
endsnippet

snippet m "margin: ... ;"
margin: ${1:0};
endsnippet

snippet mt "margin-top: ... ;"
margin-top: ${1:0};
endsnippet

snippet mb "margin-bottom: ... ;"
margin-bottom: ${1:0};
endsnippet

snippet ml "margin-left: ... ;"
margin-left: ${1:0};
endsnippet

snippet mr "margin-right: ... ;"
margin-right: ${1:0};
endsnippet

snippet p "padding: ... ;"
padding: ${1:0};
endsnippet

snippet pt "padding-top: ... ;"
padding-top: ${1:0};
endsnippet

snippet pb "padding-bottom: ... ;"
padding-bottom: ${1:0};
endsnippet

snippet pl "padding-left: ... ;"
padding-left: ${1:0};
endsnippet

snippet pr "padding-right: ... ;"
padding-right: ${1:0};
endsnippet

snippet fs "font-size: ... ;"
font-size: ${1:1}${2:rem};
endsnippet

snippet o "opacity: ... ;"
opacity: ${1:0};
endsnippet

snippet rgbw "rgba( ... )"
rgba(${1:#fff}, ${2:0.5})
endsnippet

snippet rgbb "rgba( ... )"
rgba(${1:#000}, ${2:0.5})
endsnippet

snippet before "::before { ... }"
${1:&}::before {
	content: '$2';
	display: ${3:block};
	position: ${4:absolute};
	width: ${5:100%};
	height: ${6:100%};
	${7:top}: ${8:0};
	${9:left}: ${10:0};
}
endsnippet

snippet after "::after { ... }"
${1:&}::after {
	content: '$2';
	display: ${3:block};
	position: ${4:absolute};
	width: ${5:100%};
	height: ${6:100%};
	${7:top}: ${8:0};
	${9:left}: ${10:0};
}
endsnippet

snippet befaft "::before, ::after	{ ... }"
${1:&}::before {
$1::after {
	content: '$2';
	display: ${3:block};
	position: ${4:absolute};
	width: ${5:100%};
	height: ${6:100%};
	${7:top}: ${8:0};
	${9:left}: ${10:0};
	$0
}
endsnippet

snippet bs "box-shadow ...;"
box-shadow: ${1:0} ${2:0} $3px $4px ${5:#000} ${6:inset};
endsnippet

snippet pabs "Position: absolute ..."
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
endsnippet

snippet v "var(--...)"
var(--$0)
endsnippet