Skip to content

Commit 79c6b6f

Browse files
boka-slickageboka-slickage
committed
feat(pv): import css
1 parent 973e099 commit 79c6b6f

File tree

1 file changed

+376
-0
lines changed

1 file changed

+376
-0
lines changed

‎src/components/posts/PollViewer.vue‎

Lines changed: 376 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -249,3 +249,379 @@ export default {
249249
}
250250
}
251251
</script>
252+
<style>
253+
poll-creator {
254+
display: flex;
255+
flex-direction: column;
256+
}
257+
258+
.polls {
259+
@include border-radius(4px);
260+
flex: 2 0 40vh;
261+
border: 1px solid $border-color;
262+
box-shadow: 0 2px 24px rgba(0, 0, 0, .1);
263+
color: $sub-header-font-color;
264+
margin: 1.5rem 0;
265+
max-height: calc(100vh - 16rem);
266+
min-height: 200px;
267+
overflow-x: hidden;
268+
overflow-y: scroll;
269+
.ng-enter { @include transition(0.3s ease-in all); opacity: 0; }
270+
.ng-enter-active { opacity: 1; }
271+
.ng-leave { display: none; }
272+
button { margin: 0.5rem 0 0; width: 100%; }
273+
274+
.editor-container & {
275+
border-radius: 0;
276+
border: none;
277+
box-shadow: none;
278+
}
279+
280+
// poll creation
281+
&.poll-form {
282+
max-height: 100%;
283+
padding: 1rem 1rem 2rem;
284+
285+
.editor-container & {
286+
border-bottom: $border;;
287+
border-top: $border;
288+
margin: 0;
289+
}
290+
291+
.section-poll-questions {
292+
border-bottom: $border;
293+
margin-bottom: 1rem;
294+
}
295+
296+
h1 {
297+
color: $secondary-font-color;
298+
font-size: $font-size-lg;
299+
font-weight: 400;
300+
text-transform: initial;
301+
}
302+
303+
.checkbox-group {
304+
align-items: center;
305+
display: flex;
306+
margin-bottom: 0.5rem;
307+
}
308+
309+
input[type="checkbox"] {
310+
margin: 0;
311+
margin-right: 0.5rem;
312+
padding: 0;
313+
}
314+
315+
label {
316+
margin: 0;
317+
}
318+
319+
.actions {
320+
display: flex;
321+
align-items: center;
322+
justify-content: flex-end;
323+
padding: 1rem 0;
324+
}
325+
326+
button {
327+
margin: 0;
328+
width: max-content;
329+
}
330+
331+
.answer-row {
332+
@include row;
333+
margin-bottom: 0.625rem;
334+
&:last-of-type { margin-bottom: 1rem; }
335+
336+
input {
337+
margin-bottom: 0;
338+
}
339+
340+
341+
.field-inline-action {
342+
position: relative;
343+
344+
input {
345+
display: inline-block; margin-bottom: 0;
346+
}
347+
348+
button {
349+
border: none;
350+
display: inline-block;
351+
margin: 0;
352+
right: 0.25rem;
353+
top: 0.25rem;
354+
padding: 0;
355+
height: 1.825rem;
356+
width: 1.825rem;
357+
position: absolute;
358+
359+
i {
360+
margin: 0;
361+
}
362+
}
363+
}
364+
}
365+
366+
.poll-options-expiration {
367+
margin-bottom: 1rem;
368+
369+
.fieldgroup {
370+
display: grid;
371+
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
372+
373+
input {
374+
margin-bottom: 0;
375+
}
376+
}
377+
}
378+
}
379+
380+
.poll-title {
381+
background-color: $base-background-color;
382+
border-bottom: $border;
383+
color: $secondary-font-color;
384+
display: flex;
385+
align-items: center;
386+
font-size: $font-size-xs;
387+
padding: 0.5rem 1rem;
388+
position: sticky;
389+
top: 0;
390+
z-index: 1000;
391+
text-transform: uppercase;
392+
393+
.poll-title-text {
394+
flex: 1 0 auto;
395+
}
396+
397+
.poll-controls {
398+
display: flex;
399+
justify-self: flex-end;
400+
401+
@include break-mobile-sm {
402+
text-align: right;
403+
}
404+
}
405+
.poll-control {
406+
margin-left: 0.5rem;
407+
408+
label {
409+
display: flex;
410+
align-items: center;
411+
}
412+
413+
.icon {
414+
display: none;
415+
& + label:before { font-size: 1.4rem; color: $secondary-font-color-light; }
416+
&:checked + label:before { color: $color-primary; }
417+
}
418+
419+
svg {
420+
width: 0.875rem;
421+
}
422+
423+
&.is__locked {
424+
svg {
425+
fill: $color-primary;
426+
}
427+
}
428+
}
429+
}
430+
431+
.poll-body {
432+
padding: 1rem;
433+
}
434+
435+
// header section
436+
.poll-header {
437+
display: flex;
438+
flex-direction: column;
439+
// flex-wrap: wrap;
440+
margin-bottom: 0.5rem;
441+
442+
.poll-question {
443+
color: $base-font-color;
444+
font-size: $font-size-base;
445+
margin-bottom: 0.5rem;
446+
line-height: 1.2;
447+
text-transform: none;
448+
}
449+
450+
.poll-header-main {
451+
// flex: 4 1 auto;
452+
margin-bottom: 0.5rem;
453+
}
454+
455+
.poll-details {
456+
line-height: 1;
457+
458+
.poll-info {
459+
color: $secondary-font-color-dark;
460+
font-size: $font-size-xs;
461+
// font-weight: bold;
462+
@include transition(color 0.25s ease-in);
463+
&.highlight { color: red; }
464+
}
465+
&.small { width: 8rem; }
466+
}
467+
}
468+
// poll edit section
469+
.poll-edit-container {
470+
padding: 0.5rem 1rem 1rem;
471+
background-color: $sub-header-color;
472+
473+
.panelTitle {
474+
color: $secondary-font-color;
475+
font-size: $font-size-sm;
476+
margin-bottom: 0.5rem;
477+
}
478+
}
479+
480+
.pollEdit__expiration {
481+
margin-bottom: 1rem;
482+
input {
483+
margin-bottom: 0.25rem;
484+
}
485+
}
486+
487+
.pollGroup__header {
488+
font-size: $font-size-sm;
489+
}
490+
491+
// poll answers section
492+
$poll__questionOffset: 1.5rem;
493+
494+
.poll-answer {
495+
margin: 0.5rem 0;
496+
padding-bottom: 0.5rem;
497+
&:first { margin-top: 0;}
498+
.fill-row:not(:last-child) { margin-bottom: 0.5rem; }
499+
.one-third-column { padding-top: 0.2rem; }
500+
501+
.poll-select {
502+
border-radius: 3px;
503+
padding: 0.5rem 0 0.5rem $poll__questionOffset;
504+
color: $sub-header-secondary-font-color;
505+
font-size: $font-size-base;
506+
font-weight: normal;
507+
line-height: 1.2;
508+
position: relative;
509+
510+
input {
511+
margin-bottom: 0;
512+
margin-left: -1.25rem;
513+
}
514+
515+
&.voted {
516+
// margin-left: $poll__questionOffset;
517+
}
518+
519+
&.active { border-color: $color-primary-transparent; background-color: $color-primary-transparent; }
520+
}
521+
// votes bar
522+
.poll-results {
523+
display: flex;
524+
flex-direction: column;
525+
margin-left: $poll__questionOffset;
526+
margin-top: 0.125rem;
527+
margin-bottom: 0.25rem;
528+
}
529+
.poll-results-data {
530+
color: $secondary-font-color-dark;
531+
// flex: 1 0 220px;
532+
font-size: 0.875rem;
533+
margin-bottom: 0.25rem;
534+
// padding: 0 1rem;
535+
// order: 2;
536+
}
537+
538+
.poll-results-value {
539+
font-weight: 600;
540+
}
541+
542+
.poll-bar {
543+
@include transition(250ms linear all);
544+
position: relative;
545+
height: 0.25rem;
546+
background-color: $border-color;
547+
margin-right: 1rem;
548+
// flex: 4 0 auto;
549+
span {
550+
position: absolute;
551+
overflow: hidden;
552+
white-space: nowrap;
553+
text-overflow: ellipsis;
554+
line-height: 1.4625rem;
555+
}
556+
.poll-answer-fill { max-width: 20%; right: 0.625rem; }
557+
section {
558+
background-color: $color-primary;
559+
border-right: 1px solid $base-background-color;
560+
height: 100%;
561+
}
562+
}
563+
564+
.selected-answer {
565+
.selected-answer-icon {
566+
position: absolute;
567+
top: 10px;
568+
left: 0;
569+
svg {
570+
fill: $color-primary;
571+
}
572+
}
573+
574+
section {
575+
background-color: $color-primary;
576+
}
577+
}
578+
}
579+
580+
button,
581+
.button {
582+
// float: none;
583+
// margin-left: $poll__questionOffset;
584+
// margin-top: 2rem;
585+
max-width: 320px;
586+
}
587+
588+
.actionsBar {
589+
background-color: $base-background-color;
590+
padding: 1rem;
591+
position: sticky;
592+
bottom: 0;
593+
}
594+
595+
@include media($mobile) {
596+
.poll-info .fourth-columns { margin-bottom: 0.5rem; }
597+
.poll-answer .poll-bar .poll-answer-fill { max-width: 30%; }
598+
.poll-answer .poll-select.active { background-color: transparent; }
599+
.poll-answer .one-third-column { padding-top: 0; }
600+
// .poll-header .poll-controls { width: 100%; text-align: center; }
601+
.poll-header .poll-control { margin: 0.5rem; }
602+
// .poll-header .poll-details .poll-info { display: block; }
603+
.poll-header .poll-details, .poll-header .poll-details.small { width: 100%; padding-left: 0; }
604+
}
605+
606+
@include break-mobile-sm {
607+
poll-header {
608+
flex-direction: column;
609+
610+
.poll-header-main {
611+
flex: none;
612+
}
613+
}
614+
615+
.poll-answer {
616+
.poll-results-data {
617+
flex: none;
618+
}
619+
}
620+
621+
button, .button {
622+
margin-left: 0;
623+
margin-top: 1rem;
624+
}
625+
}
626+
}
627+
</style>

0 commit comments

Comments
 (0)