bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/poll/live-result/styles.scss
2019-04-14 20:23:14 +00:00

146 lines
2.4 KiB
SCSS

@import "/imports/ui/stylesheets/variables/_all";
:root {
--poll-stats-border-color: #d4d9df;
--poll-stats-option-width: 4em;
--poll-stats-element-width: 17%;
--poll-sm-margin: 0.3125rem;
--poll-user-line-height: 1.75rem;
--poll-result-width: 15rem;
}
.btn {
width: 100%;
margin-top: var(--sm-padding-y);
margin-bottom: var(--sm-padding-y);
}
.main {
display: flex;
justify-content: space-between;
align-items: center;
}
.center {
position: relative;
flex: 1 1 auto;
border-left: 1px solid var(--color-gray-lighter);
width: 100%;
height: 100%;
}
.left {
font-weight: bold;
max-width: var(--poll-result-width);
min-width: var(--poll-stats-element-width);
word-wrap: break-word;
}
.right {
text-align: right;
max-width: var(--poll-stats-element-width);
min-width: var(--poll-stats-element-width);
}
.left,
.right,
.center {
padding: var(--sm-padding-y);
margin-top: var(--poll-sm-margin);
margin-bottom: var(--poll-sm-margin);
color: var(--color-text);
}
.left,
.right {
flex: 0 0 auto;
position: relative;
}
.container,
.stats {
margin-bottom: var(--sm-padding-x);
}
.stats {
display: flex;
flex-direction: column;
border: 1px solid var(--poll-stats-border-color);
border-radius: var(--border-size-large);
padding: var(--md-padding-x);
> div {
display: flex;
flex-direction: row;
> div:nth-child(even) {
position: relative;
height: 75%;
width: 50%;
text-align: center;
}
}
}
.container {
display: flex;
flex-wrap: wrap;
}
.itemR,
.responseHeading {
text-align: left;
}
.usersHeading,
.responseHeading {
font-weight: var(--headings-font-weight);
margin-bottom: 0;
}
.usersHeading,
.responseHeading,
.item,
.itemR {
line-height: var(--poll-user-line-height);
}
.item,
.itemR {
margin-top: .75rem;
line-height: var(--poll-user-line-height);
color: var(--color-text);
word-break: break-word;
}
.barShade {
background-color: var(--color-gray-lighter);
height: 100%;
min-height: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.barVal {
position: inherit;
}
.usersWrapper,
.answersWrapper {
display: flex;
flex-direction: column;
}
.answersWrapper {
padding-left: 1rem;
}
.usersWrapper {
max-width: 50%;
}