soapbox/app/styles/polls.scss

218 wiersze
3.9 KiB
SCSS
Czysty Zwykły widok Historia

2020-03-27 20:59:38 +00:00
.poll {
margin-top: 16px;
font-size: 14px;
li {
margin-bottom: 10px;
position: relative;
}
&__chart {
position: absolute;
top: 0;
left: 0;
height: 100%;
display: inline-block;
border-radius: 4px;
2020-06-07 03:55:00 +00:00
background: hsla(var(--primary-text-color_hsl), .3);
&.leading {background: hsla(var(--primary-text-color_hsl), .6);}
2020-03-27 20:59:38 +00:00
}
&__text {
position: relative;
display: flex;
padding: 6px 0;
line-height: 18px;
cursor: default;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
2020-06-07 03:55:00 +00:00
color: var(--primary-text-color--faint);
2020-05-29 00:58:37 +00:00
2020-03-27 20:59:38 +00:00
input[type=radio],
input[type=checkbox] {
display: none;
}
> span:last-child {
flex: 1;
}
.autossugest-input {
flex: 1 1 auto;
}
input[type=text] {
display: block;
box-sizing: border-box;
width: 100%;
font-size: 14px;
2020-06-03 01:12:36 +00:00
color: var(--primary-text-color);
2020-03-27 20:59:38 +00:00
display: block;
outline: 0;
font-family: inherit;
2020-06-02 23:31:55 +00:00
background: var(--foreground-color);
border: 1px solid var(--foreground-color);
2020-03-27 20:59:38 +00:00
border-radius: 4px;
padding: 6px 10px;
&:focus {
2020-05-31 02:48:37 +00:00
border-color: var(--highlight-text-color);
2020-03-27 20:59:38 +00:00
}
}
&.selectable {
cursor: pointer;
}
&.editable {
display: flex;
align-items: center;
overflow: visible;
.autosuggest-input {
width: 100%;
}
}
}
&__input {
display: inline-block;
position: relative;
2020-06-02 22:42:09 +00:00
border: 1px solid var(--brand-color);
2020-03-27 20:59:38 +00:00
box-sizing: border-box;
width: 18px;
height: 18px;
flex: 0 0 auto;
margin-right: 10px;
top: -1px;
border-radius: 50%;
vertical-align: middle;
&.checkbox {
border-radius: 4px;
}
&.active {
border-color: $valid-value-color;
background: $valid-value-color;
}
}
&__number {
display: inline-block;
width: 36px;
font-weight: 700;
padding: 0 10px;
text-align: right;
}
&__footer {
padding-top: 6px;
padding-bottom: 5px;
2020-06-02 22:42:09 +00:00
color: var(--primary-text-color);
2020-03-27 20:59:38 +00:00
}
&__link {
display: inline;
background: transparent;
padding: 0;
margin: 0;
border: 0;
2020-06-02 22:42:09 +00:00
color: var(--primary-text-color);
2020-03-27 20:59:38 +00:00
text-decoration: underline;
font-size: inherit;
&:hover {
text-decoration: none;
}
&:active,
&:focus {
2020-06-07 03:55:00 +00:00
background-color: hsla(var(--primary-text-color_hsl), .1);
2020-03-27 20:59:38 +00:00
}
}
.button {
height: 36px;
padding: 0 16px;
margin-right: 10px;
font-size: 14px;
}
}
.compose-form__poll-wrapper {
2020-06-02 23:31:55 +00:00
border-top: 1px solid var(--foreground-color);
2020-03-27 20:59:38 +00:00
ul {
padding: 10px;
}
.poll__footer {
2020-06-02 23:31:55 +00:00
border-top: 1px solid var(--foreground-color);
2020-03-27 20:59:38 +00:00
padding: 10px;
margin: -5px 0 0 -5px;
button,
select {
flex: 1 1 50%;
margin: 5px 0 0 5px;
}
}
.button.button-secondary {
font-size: 14px;
font-weight: 400;
padding: 6px 10px;
height: auto;
line-height: inherit;
2020-06-03 01:12:36 +00:00
color: var(--brand-color);
border-color: var(--brand-color);
2020-03-27 20:59:38 +00:00
}
li {
display: flex;
align-items: center;
.poll__text {
flex: 0 0 auto;
width: calc(100% - (23px + 6px));
margin-right: 6px;
}
}
select {
box-sizing: border-box;
font-size: 14px;
2020-06-03 01:12:36 +00:00
color: var(--brand-color);
2020-03-27 20:59:38 +00:00
display: inline-block;
width: auto;
outline: 0;
font-family: inherit;
2020-06-02 23:31:55 +00:00
background-color: var(--foreground-color);
2020-03-27 20:59:38 +00:00
background-repeat: no-repeat;
background-position: right 8px center;
background-size: auto 16px;
2020-06-03 01:12:36 +00:00
border: 1px solid var(--brand-color);
2020-03-27 20:59:38 +00:00
border-radius: 4px;
padding: 6px 10px;
padding-right: 30px;
}
.icon-button.disabled {
2020-08-10 15:25:57 +00:00
color: var(--brand-color);
2020-03-27 20:59:38 +00:00
}
}
.muted .poll {
2020-06-02 22:42:09 +00:00
color: var(--primary-text-color);
2020-03-27 20:59:38 +00:00
&__chart {
2020-06-07 03:55:00 +00:00
background: hsla(var(--brand-color_hsl), 0.2);
2020-03-27 20:59:38 +00:00
&.leading {
2020-06-07 03:55:00 +00:00
background: hsla(var(--brand-color_hsl), 0.2);
2020-03-27 20:59:38 +00:00
}
}
}