JS_Programmer_Task/task.css at main · Sarguroh20/JS_Programmer_Task · GitHub

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
body {
    font-family: 'Times New Roman', Times, serif;
    margin: 2rem;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

h1 {
    margin: 0;
    font-size: 30px;
}

.icons button{
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.icons button:hover{
    color: blue;
}

table{
    width: 100%;
    border-collapse: collapse;
}

@media (max-width: 650px) {
    .toolbar{
        flex-direction: column;
    }

    .icons {
        margin: 1rem;
    }

    table, thead, tbody, th, td, tr {
        display: block;
    }

    thead tr{
        display: none;
    }

    tr {
        margin-bottom: 1rem;
        border-bottom: 2px solid #ddd;
        padding: 1rem;
        background-color: #f9f9f9;
    }

    td{
        display: grid;
        gap: 7.5rem;
        grid-template-columns: 15ch auto;
        padding: .5rem 1rem;
    }

    td:first-child{
        padding-top: 2rem;
    }

    td:last-child{
        padding-top: 2rem;
    }

    td::before{
        content: attr(data-cell) " ";
        font-weight: 700;
        text-transform: capitalize;
    }

    div.dt-container.dt-empty-footer tbody>tr:last-child>* {
        border-bottom: none;
    }

    table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
        text-align: left;
    }

    th:first-child, td:first-child {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 0;
    }

    td:first-child input[type="checkbox"] {
            margin-left: -7.4rem;
    }
}

@media (max-width: 425px) {
    .icons{
        margin: 0;
        padding-top: 1rem;
    }

    td{
        gap: 3.5rem;
    }

    td:first-child input[type="checkbox"] {
        margin-left: -3.4rem;
    }
}

@media (max-width: 320px){
    td{
        gap: 0.9rem;
    }
}