107 lines
2.1 KiB
SCSS
107 lines
2.1 KiB
SCSS
/*************************************TABLE************************************/
|
|
|
|
table{
|
|
position: relative;
|
|
line-height: 1.65;
|
|
color: var(--grey);
|
|
font-family: var(--sanserif);
|
|
-webkit-transition: var(--color-mode-transition);
|
|
-o-transition: var(--color-mode-transition);
|
|
transition: var(--color-mode-transition);
|
|
background: var(--card);
|
|
margin: 45px auto 85px;
|
|
width: 100%;
|
|
max-width: 1004px;
|
|
border: 1px solid var(--horizontalRule);
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
border-collapse: separate;
|
|
}
|
|
|
|
/*DESKTOP*/
|
|
@media screen and (max-width: 1070px){
|
|
table{
|
|
margin: 25px auto 65px;
|
|
}
|
|
}
|
|
|
|
/*TABLET*/
|
|
@media screen and (max-width: 735px){
|
|
table{
|
|
max-width: 486px;
|
|
}
|
|
}
|
|
|
|
/*PHABLET*/
|
|
@media screen and (max-width: 540px){
|
|
table{
|
|
margin: 15px auto 55px;
|
|
}
|
|
}
|
|
|
|
/*************************************TABLE CELL************************************/
|
|
|
|
td{
|
|
border-top: 1px solid var(--horizontalRule);
|
|
border-right: 1px solid var(--horizontalRule);
|
|
padding: 15px 30px;
|
|
font-size: 16px;
|
|
background: var(--card);
|
|
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
/*DESKTOP*/
|
|
@media screen and (max-width: 1070px){
|
|
td{
|
|
padding: 14px 20px;
|
|
}
|
|
}
|
|
|
|
/*TABLET*/
|
|
@media screen and (max-width: 735px){
|
|
td{
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
/*************************************TABLE HEAD************************************/
|
|
|
|
thead{
|
|
text-align: left;
|
|
border-collapse: collapse;
|
|
position: relative;
|
|
line-height: 1.756;
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
font-family: var(--serif);
|
|
-webkit-transition: var(--color-mode-transition);
|
|
-o-transition: var(--color-mode-transition);
|
|
transition: var(--color-mode-transition);
|
|
}
|
|
|
|
th{
|
|
border-right: 1px solid var(--horizontalRule);
|
|
padding: 15px 30px;
|
|
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
|
|
/*DESKTOP*/
|
|
@media screen and (max-width: 1070px){
|
|
th{
|
|
padding: 14px 20px;
|
|
}
|
|
}
|
|
|
|
/*TABLET*/
|
|
@media screen and (max-width: 735px){
|
|
th{
|
|
font-size: 14px;
|
|
}
|
|
}
|