1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
803.5.1 (Bleeding Edge)
57975652c3d03135458cd724918d26c278e13298
o:Sass::Tree::RootNode:@children[o:Sass::Tree::RuleNode:
@rule[I"*:ET:@parsed_ruleso:"Sass::Selector::CommaSequence:
@members[o:Sass::Selector::Sequence;[o:#Sass::Selector::SimpleSequence;[o:Sass::Selector::Universal:@namespace0:
@linei:@filename0:
@subject0:
@sourceso:Set:
@hash} F:@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position;i:@offseti:
@end_poso;;i;i:
@file0:@importer0;i;0;i;i;0:@selector_source_rangeo; ;o;;i;i;o;;i;i;I"$scss/components/_container.scss:
encoding"
CP850;o: Sass::Importers::Filesystem:
@rootI">C:/Users/Leonardo/Desktop/Projects/JavaScript/simple-todo; T:@real_rootI">C:/Users/Leonardo/Desktop/Projects/JavaScript/simple-todo; T:@same_name_warningso;;} F:
@tabsi ;[o:Sass::Tree::PropNode:
@name[I"margin; T:@value[o: Sass::Script::Tree::Literal;(o: Sass::Script::Value::String ;(I"0; T:
@options{ :
@type:identifier:"@deprecated_interp_equivalent0;i;o; ;o;;i;i;o;;i;i;@;@;%i :@prop_syntax:new;[ ;0;+@(;i;o; ;o;;i;i
;o;;i;i;@;@:@name_source_rangeo; ;@.;o;;i;i;@;@:@value_source_rangeo; ;o;;i;i;@/;@;@o;&;'[I"padding; T;([o;);(o;* ;(I"0; T;+@(;,;-;.0;i;o; ;o;;i;i;o;;i;i;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i
;o;;i;i;@;@;1o; ;@@;o;;i;i;@;@;2o; ;o;;i;i;@A;@;@o;&;'[I"box-sizing; T;([o;);(o;* ;(I"border-box; T;+@(;,;-;.0;i ;o; ;o;;i ;i;o;;i ;i ;@;@;%i ;/;0;[ ;0;+@(;i ;o; ;o;;i ;i
;o;;i ;i ;@;@;1o; ;@R;o;;i ;i;@;@;2o; ;o;;i ;i;@S;@;@;0;+@(;i;o; ;@;o;;i;i;@;@:@has_childrenTo;;[I".container; T;
o;;[o;
;[o;;[o:Sass::Selector::Class;'I"container; T;i;0;0;o;;} F;o; ;o;;i;i;o;;i;i;0;0;i;0;i;i;0;o; ;o;;i;i;o;;i;i;@;@;%i ;[o;&;'[I"display; T;([o;);(o;* ;(I" flex; T;+@(;,;-;.0;i
;o; ;o;;i
;i;o;;i
;i;@;@;%i ;/;0;[ ;0;+@(;i
;o; ;o;;i
;i
;o;;i
;i;@;@;1o; ;@z;o;;i
;i;@;@;2o; ;o;;i
;i;@{;@;@o;&;'[I"align-items; T;([o;);(o;* ;(I"center; T;+@(;,;-;.0;i;o; ;o;;i;i;o;;i;i;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i
;o;;i;i;@;@;1o; ;@�;o;;i;i;@;@;2o; ;o;;i;i;@�;@;@o;&;'[I"justify-content; T;([o;);(o;* ;(I"center; T;+@(;,;-;.0;i;o; ;o;;i;i;o;;i;i!;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i
;o;;i;i!;@;@;1o; ;@�;o;;i;i;@;@;2o; ;o;;i;i;@�;@;@o;&;'[I"
width; T;([o;);(o;* ;(I"
100vw; T;+@(;,;-;.0;i;o; ;o;;i;i;o;;i;i;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i
;o;;i;i;@;@;1o; ;@�;o;;i;i;@;@;2o; ;o;;i;i;@�;@;@o;&;'[I"height; T;([o;);(o;* ;(I"
100vh; T;+@(;,;-;.0;i;o; ;o;;i;i;o;;i;i;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i
;o;;i;i;@;@;1o; ;@�;o;;i;i;@;@;2o; ;o;;i;i;@�;@;@o;&;'[I"background-color; T;([o;);(o;* ;(I"red; T;+@(;,;-;.0;i;o; ;o;;i;i;o;;i;i;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i
;o;;i;i;@;@;1o; ;@�;o;;i;i;@;@;2o; ;o;;i;i;@�;@;@o;;[I".main-content; T;
o;;[o;
;[o;;[o;4;'I"main-content; T;i;0;0;o;;} F;o; ;o;;i;i;o;;i;i;0;0;i;0;i;i;0;o; ;o;;i;i
;o;;i;i;@;@;%i ;[o;&;'[I"display; T;([o;);(o;* ;(I" grid; T;+@(;,;-;.0;i;o; ;o;;i;i;o;;i;i;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i;o;;i;i;@;@;1o; ;@�;o;;i;i;@;@;2o; ;o;;i;i;@�;@;@o;&;'[I"grid-template-columns; T;([o;);(o;* ;(I"220px auto; T;+@(;,;-;.0;i;o; ;o;;i;i%;o;;i;i/;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i;o;;i;i/;@;@;1o; ;@;o;;i;i#;@;@;2o; ;o;;i;i%;@;@;@o;&;'[I"grid-template-rows; T;([o;);(o;* ;(I"65px auto; T;+@(;,;-;.0;i;o; ;o;;i;i";o;;i;i+;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i;o;;i;i+;@;@;1o; ;@;o;;i;i ;@;@;2o; ;o;;i;i";@;@;@o;&;'[I"background-color; T;([o;);(o;* ;(I"
white; T;+@(;,;-;.0;i;o; ;o;;i;i ;o;;i;i%;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i;o;;i;i%;@;@;1o; ;@+;o;;i;i;@;@;2o; ;o;;i;i ;@,;@;@o;&;'[I"
width; T;([o;);(o;* ;(I"
740px; T;+@(;,;-;.0;i;o; ;o;;i;i;o;;i;i;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i;o;;i;i;@;@;1o; ;@=;o;;i;i;@;@;2o; ;o;;i;i;@>;@;@o;&;'[I"height; T;([o;);(o;* ;(I"
500px; T;+@(;,;-;.0;i;o; ;o;;i;i;o;;i;i;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i;o;;i;i;@;@;1o; ;@O;o;;i;i;@;@;2o; ;o;;i;i;@P;@;@o;&;'[I"border-radius; T;([o;);(o;* ;(I" 30px; T;+@(;,;-;.0;i;o; ;o;;i;i;o;;i;i!;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i;o;;i;i!;@;@;1o; ;@a;o;;i;i;@;@;2o; ;o;;i;i;@b;@;@o;;[I".search; T;
o;;[o;
;[o;;[o;4;'I"search; T;i;0;0;o;;} F;o; ;o;;i;i;o;;i;i
;0;0;i;0;i;i;0;o; ;o;;i;i;o;;i;i;@;@;%i ;[o;&;'[I"grid-column; T;([o;);(o;* ;(I"
2 / 3; T;+@(;,;-;.0;i;o; ;o;;i;i;o;;i;i$;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i;o;;i;i$;@;@;1o; ;@�;o;;i;i;@;@;2o; ;o;;i;i;@�;@;@o;&;'[I"
grid-row; T;([o;);(o;* ;(I"
1 / 2; T;+@(;,;-;.0;i;o; ;o;;i;i;o;;i;i!;@;@;%i ;/;0;[ ;0;+@(;i;o; ;o;;i;i;o;;i;i!;@;@;1o; ;@�;o;;i;i;@;@;2o; ;o;;i;i;@�;@;@;0;+@(;i;o; ;@x;o;;i;i;@;@;3To;;[I".topics; T;
o;;[o;
;[o;;[o;4;'I"topics; T;i";0;0;o;;} F;o; ;o;;i;i;o;;i;i
;0;0;i";0;i";i";0;o; ;o;;i";i;o;;i";i;@;@;%i ;[o;&;'[I"grid-column; T;([o;);(o;* ;(I"
1 / 2; T;+@(;,;-;.0;i#;o; ;o;;i#;i;o;;i#;i$;@;@;%i ;/;0;[ ;0;+@(;i#;o; ;o;;i#;i;o;;i#;i$;@;@;1o; ;@�;o;;i#;i;@;@;2o; ;o;;i#;i;@�;@;@o;&;'[I"
grid-row; T;([o;);(o;* ;(I"
2 / 3; T;+@(;,;-;.0;i$;o; ;o;;i$;i;o;;i$;i!;@;@;%i ;/;0;[ ;0;+@(;i$;o; ;o;;i$;i;o;;i$;i!;@;@;1o; ;@�;o;;i$;i;@;@;2o; ;o;;i$;i;@�;@;@;0;+@(;i";o; ;@�;o;;i";i;@;@;3To;;[I".tasks; T;
o;;[o;
;[o;;[o;4;'I"
tasks; T;i';0;0;o;;} F;o; ;o;;i;i;o;;i;i;0;0;i';0;i';i';0;o; ;o;;i';i;o;;i';i;@;@;%i ;[o;&;'[I"grid-column; T;([o;);(o;* ;(I"
2 / 3; T;+@(;,;-;.0;i(;o; ;o;;i(;i;o;;i(;i$;@;@;%i ;/;0;[ ;0;+@(;i(;o; ;o;;i(;i;o;;i(;i$;@;@;1o; ;@�;o;;i(;i;@;@;2o; ;o;;i(;i;@�;@;@o;&;'[I"
grid-row; T;([o;);(o;* ;(I"
2 / 3; T;+@(;,;-;.0;i);o; ;o;;i);i;o;;i);i!;@;@;%i ;/;0;[ ;0;+@(;i);o; ;o;;i);i;o;;i);i!;@;@;1o; ;@
;o;;i);i;@;@;2o; ;o;;i);i;@;@;@;0;+@(;i';o; ;@�;o;;i';i;@;@;3T;0;+@(;i;o; ;@�;o;;i;i;@;@;3T;0;+@(;i;o; ;@k;o;;i;i;@;@;3T;0;+@(:@templateI"�* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
background-color: red;
.main-content {
display: grid;
grid-template-columns: 220px auto;
grid-template-rows: 65px auto;
background-color: white;
width: 740px;
height: 500px;
border-radius: 30px;
.search {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.topics {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.tasks {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
}
}
; T;i;o; ;o;;i;i;o;;i;i;@;@;3T