p5.js-web-editor/client/styles/components/_copyable-input.scss

74 lines
1.5 KiB
SCSS
Raw Normal View History

2017-10-30 18:38:41 +00:00
.copyable-input__value-container {
position: relative;
}
.copyable-input__tooltip {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
2017-10-30 21:24:43 +00:00
}
.copyable-input__value {
width: 100%;
font-size: #{16 / $base-font-size}rem;
2019-01-16 17:35:34 +00:00
.copyable-input--with-preview & {
border-radius: 2px 0 0 2px;
}
2017-10-30 21:24:43 +00:00
}
.copyable-input__label {
width: 100%;
font-size: #{12 / $base-font-size}rem;
2018-05-09 01:35:18 +00:00
padding-bottom: #{5 / $base-font-size}rem;
2017-10-30 21:24:43 +00:00
@include themify() {
color: getThemifyVariable('inactive-text-color');
}
}
.copyable-input__label-container {
display: flex;
justify-content: space-between;
}
2017-10-30 21:24:43 +00:00
.copyable-input {
padding-bottom: #{30 / $base-font-size}rem;
display: flex;
}
.copyable-input__value-container {
width: 100%;
}
2018-05-09 01:35:18 +00:00
.tooltipped::after {
@include themify() {
background-color: getThemifyVariable('button-background-hover-color');
color: getThemifyVariable('button-hover-color');
2017-10-30 21:24:43 +00:00
}
2018-05-09 01:35:18 +00:00
font-family: Montserrat, sans-serif;
font-size: #{12 / $base-font-size}rem;
}
2017-10-30 21:24:43 +00:00
2018-05-09 01:35:18 +00:00
.tooltipped-n::before,
.tooltipped::before,
{
@include themify() {
color: getThemifyVariable('button-background-hover-color');
border-top-color: getThemifyVariable('button-background-hover-color');
2017-10-30 21:24:43 +00:00
}
}
2019-01-16 17:35:34 +00:00
.copyable-input__preview {
@extend %button;
@include themify() {
align-self: flex-end;
border-radius: 0 2px 2px 0;
padding: #{2 / $base-font-size}rem 0;
}
& svg {
height: #{30 / $base-font-size}rem;
width: #{30 / $base-font-size}rem;
}
}