mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
67 lines
1.4 KiB
SCSS
67 lines
1.4 KiB
SCSS
/* Global input styles */
|
|
@use './typography';
|
|
@use './theme' as th;
|
|
|
|
.ng-input,
|
|
.ng-select,
|
|
.ng-textarea {
|
|
@extend %body-01;
|
|
color: var(--primary-contrast);
|
|
background: var(--color-foreground);
|
|
border: none;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 2rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ng-input {
|
|
&::placeholder {
|
|
color: var(--tertiary-contrast);
|
|
}
|
|
|
|
&[type='checkbox'] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&.size-mid {
|
|
padding: 0.25rem 0.75rem;
|
|
}
|
|
|
|
&.size-compact {
|
|
padding: 0.1rem 0.5rem;
|
|
}
|
|
}
|
|
|
|
.ng-select {
|
|
position: relative;
|
|
appearance: none;
|
|
padding-right: 2rem;
|
|
display: inline-block;
|
|
background-repeat: no-repeat;
|
|
background-size: 18px;
|
|
background-position: top 50% right 0.375rem;
|
|
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="black"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>');
|
|
|
|
&.size-mid {
|
|
padding: 0.25rem 2rem 0.25rem 0.75rem;
|
|
}
|
|
|
|
&.size-compact {
|
|
padding: 0.1rem 2rem 0.1rem 0.5rem;
|
|
}
|
|
}
|
|
|
|
@include th.dark-theme(true) {
|
|
.ng-select {
|
|
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="white"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>');
|
|
}
|
|
}
|
|
|
|
.ng-textarea {
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
label[for],
|
|
input[type='checkbox'] {
|
|
cursor: pointer;
|
|
}
|