📦 leonardomso / simple-todo

📄 _container.scssc · 80 lines
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