mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-02-06 09:55:50 +00:00
60 lines
1.2 KiB
SCSS
60 lines
1.2 KiB
SCSS
.ds-copy-field {
|
|
@include reset;
|
|
@include stack-space($space-xx-small);
|
|
position: relative;
|
|
font-family: $font-family-text;
|
|
line-height: $line-height-base;
|
|
padding: $space-x-small $space-small;
|
|
border-radius: $border-radius-base;
|
|
letter-spacing: $letter-spacing-small;
|
|
background-color: $background-color-softer;
|
|
}
|
|
|
|
.ds-copy-field-small {
|
|
font-size: $font-size-small;
|
|
}
|
|
|
|
.ds-copy-field-large {
|
|
font-size: $font-size-large;
|
|
}
|
|
|
|
.ds-copy-field-link {
|
|
@include reset;
|
|
position: absolute;
|
|
right: $space-xx-small;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
user-select: none;
|
|
}
|
|
|
|
.ds-copy-field-message {
|
|
@include reset;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
user-select: none;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: all $duration-x-long $ease-out;
|
|
}
|
|
|
|
.ds-copy-field-message-text {
|
|
@include reset;
|
|
padding: $space-x-small $space-small;
|
|
transition: all $duration-x-long $ease-out;
|
|
transform: scale(1);
|
|
transform-origin: 0 50%;
|
|
}
|
|
|
|
.ds-copy-field-message-enter,
|
|
.ds-copy-field-message-leave-to {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
|
|
.ds-copy-field-message-text {
|
|
transform: scale(1.2);
|
|
}
|
|
} |