separate and clean up atomic css

This commit is contained in:
xarvh 2024-11-06 18:57:27 +01:00
parent aa449b12b2
commit f88b088b50
3 changed files with 73 additions and 21 deletions

View file

@ -0,0 +1,72 @@
/*
* Atomic CSS
*
* Small, reusable classes
*/
/*
* Padding
*/
.p1 { padding: 5px; }
.pt1 { padding-top: 5px; }
.pl1 { padding-left: 5px; }
.pr1 { padding-right: 5px; }
.pb1 { padding-bottom: 5px; }
.p2 { padding: 10px; }
.pt2 { padding-top: 10px; }
.pl2 { padding-left: 10px; }
.pr2 { padding-right: 10px; }
.pb2 { padding-bottom: 10px; }
/*
* Margin
*/
.mt1 { margin-top: 5px; }
.ml1 { margin-left: 5px; }
.mr1 { margin-right: 5px; }
.mb1 { margin-bottom: 5px; }
.mt2 { margin-top: 10px; }
.ml2 { margin-left: 10px; }
.mr2 { margin-right: 10px; }
.mb2 { margin-bottom: 10px; }
/*
* Layout
*/
.row {
display: flex;
}
.col {
display: flex;
flex-direction: column;
}
.items-center {
display: flex;
align-items: center;
}
.justify-center {
display: flex;
justify-content: flex;
}
.grow {
flex-grow: 1;
}
/*
* Borders and rounding
*/
.rounded {
overflow: hidden;
border-radius: 5px;
}

View file

@ -96,25 +96,6 @@ section.restore-backup form input {
} }
} }
/* Atomic */
.p1 { padding: 5px; }
.mr2 { margin-right: 10px; }
.mb2 { margin-bottom: 10px; }
.items-center {
display: flex;
align-items: center;
}
.grow {
flex-grow: 1;
}
.rounded {
overflow: hidden;
border-radius: 5px;
}
.form-label { .form-label {
height: 30px; height: 30px;
width: 90px; width: 90px;
@ -126,8 +107,6 @@ section.restore-backup form input {
.form-input { .form-input {
height: 30px; height: 30px;
padding-bottom: 2px;
padding-top: 8px;
} }
.form-button { .form-button {

View file

@ -1,3 +1,4 @@
@import url("atomic.css");
@import url("colors.css"); @import url("colors.css");
@import url("forms.css"); @import url("forms.css");
@import url("typography.css"); @import url("typography.css");