123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- //
- // Layout
- //
- .error-container {
- display: flex;
- flex-direction: row;
- }
- .error-row {
- display: flex;
- flex-direction: row;
- }
- .error-column {
- display: flex;
- flex-direction: column;
- }
- .error-space-between {
- justify-content: space-between;
- }
- .graph-box {
- width: 62%;
- padding: $space-xl $space-md;
- }
- .info-box {
- width: 38%;
- padding: $space-xl $space-md;
- }
- .graph-percentage {
- padding: 0 0 18px;
- }
- .image-box {
- padding: $space-sm;
- }
- .left-margin {
- padding: 0 0 0 64px;
- }
- .current-box {
- justify-content: flex-end;
- }
- //
- // Text
- //
- .current-text {
- color: $blue;
- font-weight: bold;
- line-height: 14px;
- }
- .error-link {
- color: $orange;
- }
- .error-minus {
- color: #7eb26d;
- padding: 0 $space-sm;
- line-height: 21px;
- }
- .graph-percentage p {
- text-align: right;
- margin: 0;
- line-height: 14px;
- }
- .graph-text {
- margin: 0;
- }
- @include media-breakpoint-down(sm) {
- .graph-box {
- width: 50%;
- }
- .info-box {
- width: 50%;
- }
- }
- @include media-breakpoint-down(xs) {
- .error-container {
- flex-direction: column;
- }
- .graph-box {
- width: 100%;
- }
- .info-box {
- width: 100%;
- }
- .error-full-width {
- width: 100%;
- }
- }
|