The communications platform that puts data protection first.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
Rocket.Chat/app/theme/client/imports/forms/input.css

249 lines
3.4 KiB

textarea.rc-input__element {
height: auto;
padding: 0.5rem 1rem;
font-family: inherit;
}
.rc-input {
position: relative;
width: 100%;
&__label {
display: block;
cursor: pointer;
}
&__title {
font-size: var(--input-font-size);
}
&__wrapper {
position: relative;
padding: 0.5rem 0;
color: var(--input-icon-color);
}
&__icon {
position: absolute;
top: 0;
left: 1rem;
display: flex;
width: 20px;
height: 100%;
cursor: default;
align-items: center;
justify-content: center;
& + .rc-input__element {
padding: 0 1rem 0 2.75rem;
}
&--right {
right: 1rem;
left: auto;
}
&--clickable {
cursor: pointer;
}
&--right + .rc-input__element {
padding: 0 2.75rem 0 1rem;
}
}
&__element {
width: 100%;
height: 2.5rem;
padding: 0 1rem;
text-align: start;
text-overflow: ellipsis;
color: var(--input-text-color);
border-width: var(--input-border-width);
border-color: var(--input-border-color);
border-radius: var(--input-border-radius);
background-color: transparent;
font-size: var(--input-font-size);
line-height: normal;
&--small {
height: 2rem;
}
&::placeholder {
text-align: start;
text-overflow: ellipsis;
color: var(--input-placeholder-color);
}
&[type=color] {
height: 45px;
}
}
&__description {
margin-bottom: 0.25rem;
color: var(--input-description-text-color);
font-size: var(--input-description-text-size);
}
&__error {
display: flex;
color: var(--input-error-color);
align-items: center;
&-icon {
width: 20px;
&--warning {
width: 20px;
height: 20px;
stroke: currentColor;
}
}
&-message {
margin-left: 0.5rem;
}
}
&--small {
font-size: 14px;
& .rc-input__element {
padding-top: 8px;
padding-bottom: 8px;
}
}
&--error {
.rc-tags {
border-color: var(--input-error-color);
}
& .rc-input {
&__element {
border-color: var(--input-error-color);
}
}
}
}
.rc-input-file {
position: relative;
width: 100%;
&__label {
display: block;
cursor: pointer;
}
&__title {
font-size: var(--input-font-size);
}
&__wrapper {
display: flex;
flex-direction: row;
width: 100%;
margin: 0.5rem 0;
padding: 0.3rem;
color: var(--input-text-color);
border-width: var(--input-border-width);
border-color: var(--input-border-color);
border-radius: var(--input-border-radius);
background-color: transparent;
font-size: var(--input-font-size);
align-items: center;
justify-content: flex-end;
&::placeholder {
color: var(--input-placeholder-color);
}
& > .rc-button {
flex: 0 0 auto;
height: 10px;
min-height: 31px;
margin: 0;
padding: 8px;
border-color: #e1e5e8;
border-radius: 2px;
background: #f1f1f1;
}
}
&__name {
overflow: hidden;
flex: 0 1 auto;
width: 100%;
padding: 0 5px;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 16px;
}
&__element {
display: none;
}
&__description {
color: var(--color-gray);
font-size: 0.875rem;
}
}
select.rc-input {
width: 100%;
padding: 0.782rem;
color: var(--input-text-color);
border-width: var(--input-border-width);
border-color: var(--input-border-color);
border-radius: var(--input-border-radius);
background-color: transparent;
font-size: var(--input-font-size);
appearance: none;
&--small {
padding: 0.5rem 1rem;
}
}