Commit d866d8fa authored by Nicolas Frandeboeuf's avatar Nicolas Frandeboeuf
Browse files

[CSS] Move reports wells layout to dedicated file

parent 7a1db288
......@@ -36,6 +36,7 @@
@import '~./sections/charts.css';
@import '~./sections/categories.css';
@import '~./sections/about.css';
@import '~./sections/operations/wells.css';
@import '~./sections/operations/search.css';
/* Charts colors */
......
/* Wells (panels with amount at the top) */
.operation-wells {
margin: 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.operation-wells .well {
padding: 19px;
margin-bottom: 20px;
border-radius: 4px;
flex-shrink: 0;
width: 24.5%;
overflow: hidden;
text-align: right;
}
.operation-wells .well-icon {
margin-top: 10px;
margin-right: 0;
float: left;
font-size: 30px;
height: 60px;
line-height: 60px;
text-align: center;
width: 60px;
}
.operation-wells .well-title {
font-size: 16px;
}
.operation-wells .well-sub {
font-size: 12px;
}
.operation-wells .operation-amount {
font-size: 30px;
font-weight: bold;
margin-left: 2px;
}
@media (max-width: 1350px) {
.operation-wells .well {
padding: 7px;
}
.operation-wells .well-icon {
height: 40px;
width: 40px;
line-height: 40px;
font-size: 20px;
}
.operation-wells .operation-amount {
font-size: 1.65em;
margin: 0;
word-break: break-all;
}
}
@media (max-width: 1024px) {
nav:not(.menu-hidden) + #content .operation-wells .well {
width: 48.5%;
}
}
@media (max-width: 768px) {
.operation-wells .well {
width: 48.5%;
}
}
@media (max-width: 620px) {
.operation-wells .well {
text-align: center;
}
.operation-wells .well-icon {
float: none;
display: block;
margin: 0 auto;
}
}
......@@ -340,113 +340,40 @@ main nav .bank-details > li > .accounts > li a {
/* Operations list component */
/* Wells (panels with amount at the top) */
.operation-wells {
margin: 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.operation-wells .well {
padding: 19px;
margin-bottom: 20px;
border-radius: 4px;
flex-shrink: 0;
width: 24.5%;
overflow: hidden;
color: #FFFFFF;
text-align: right;
border: none;
background-image: none;
background-color: transparent;
}
.operation-wells .well.amount-well-balance {
background-color: var(--wells-balance-color);
}
.operation-wells .well.amount-well-received {
background-color: var(--wells-received-color);
}
.operation-wells .well.amount-well-spent {
background-color: var(--wells-spent-color);
}
.operation-wells .well.amount-well-saved {
background-color: var(--wells-saved-color);
}
.operation-wells .well-icon {
margin-top: 10px;
margin-right: 0;
border-radius: 100%;
background-color: rgba(255, 255, 255, 0.2);
float: left;
font-size: 30px;
height: 60px;
line-height: 60px;
text-align: center;
width: 60px;
}
.operation-wells .well-title {
font-size: 16px;
color: #EEEEEE;
}
.operation-wells .well-sub {
font-size: 12px;
color: #EEEEEE;
}
.operation-wells .operation-amount {
font-size: 30px;
font-weight: bold;
margin-left: 2px;
}
@media (max-width: 1350px) {
.operation-wells .well {
padding: 7px;
}
.operation-wells .well-icon {
height: 40px;
width: 40px;
line-height: 40px;
font-size: 20px;
}
.operation-wells .operation-amount {
font-size: 1.65em;
margin: 0;
word-break: break-all;
}
.operation-wells .well.amount-well-balance {
background-color: var(--wells-balance-color);
}
@media (max-width: 1024px) {
nav:not(.menu-hidden) + #content .operation-wells .well {
width: 48.5%;
}
.operation-wells .well.amount-well-received {
background-color: var(--wells-received-color);
}
@media (max-width: 768px) {
.operation-wells .well {
width: 48.5%;
}
.operation-wells .well.amount-well-spent {
background-color: var(--wells-spent-color);
}
@media (max-width: 620px) {
.operation-wells .well {
text-align: center;
}
.operation-wells .well-icon {
float: none;
display: block;
margin: 0 auto;
}
.operation-wells .well.amount-well-saved {
background-color: var(--wells-saved-color);
}
.operation-toolbar {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment