Compare commits
2 Commits
main
...
wip/46794-
Author | SHA1 | Date |
---|---|---|
Frédéric Péters | b4bb2ac9b3 | |
Frédéric Péters | 3c1b7d0095 |
|
@ -2,10 +2,11 @@
|
|||
|
||||
$grid-mobile-limit: 601px !default;
|
||||
$very-small-limit: 401px !default;
|
||||
$grid-gutter: 1rem !default;
|
||||
|
||||
div.grid {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
box-sizing: content-box;
|
||||
padding-right: 1em;
|
||||
clear: none;
|
||||
}
|
||||
|
@ -14,20 +15,23 @@ div.grid {
|
|||
@for $j from 1 through $i {
|
||||
div.grid-#{$j}-#{$i} {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
box-sizing: content-box;
|
||||
&.cell {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
padding-right: 1em;
|
||||
width: (100*$j/$i+0%);
|
||||
width: calc( #{100*$j/$i+0%} - #{$grid-gutter});
|
||||
@media screen and (max-width: $grid-mobile-limit) {
|
||||
@if $i == 4 and $j <= 2 { width: 50%; }
|
||||
@else if $i == 4 and $j > 2 { width: 100%; }
|
||||
@else if $i == 6 and $j <= 2 { width: (100/3+0%); }
|
||||
@else if $i == 6 and $j == 3 { width: 50%; }
|
||||
@else if $i == 6 and $j <= 5 { width: (200/3+0%); }
|
||||
@else if $i == 6 and $j == 6 { width: 100%; }
|
||||
@else if $i == 12 and $j <= 4 { width: (100/3+0%); }
|
||||
@else if $i == 12 and $j <= 7 { width: 50%; }
|
||||
@else if $i == 12 and $j <= 11 { width: (200/3+0%); }
|
||||
@else if $i == 12 and $j == 12 { width: 100%; }
|
||||
@if $i == 4 and $j <= 2 { width: calc(50% - #{$grid-gutter}); }
|
||||
@else if $i == 4 and $j > 2 { width: calc(100% - #{$grid-gutter}); }
|
||||
@else if $i == 6 and $j <= 2 { width: calc(#{100/3+0%} - #{$grid-gutter}); }
|
||||
@else if $i == 6 and $j == 3 { width: calc(50% - #{$grid-gutter}); }
|
||||
@else if $i == 6 and $j <= 5 { width: calc(#{200/3+0%} - #{$grid-gutter}); }
|
||||
@else if $i == 6 and $j == 6 { width: calc(100% - #{$grid-gutter}); }
|
||||
@else if $i == 12 and $j <= 4 { width: calc(#{100/3+0%} - #{$grid-gutter}); }
|
||||
@else if $i == 12 and $j <= 7 { width: calc(50% - #{$grid-gutter}); }
|
||||
@else if $i == 12 and $j <= 11 { width: calc(#{200/3+0%} - #{$grid-gutter}); }
|
||||
@else if $i == 12 and $j == 12 { width: calc(100% - #{$grid-gutter}); }
|
||||
}
|
||||
@media screen and (max-width: $very-small-limit) {
|
||||
width: 100%;
|
||||
|
|
|
@ -336,18 +336,16 @@ ul.messages {
|
|||
}
|
||||
}
|
||||
|
||||
ul.messages li,
|
||||
div.infonotice,
|
||||
div.successnotice,
|
||||
div.warningnotice,
|
||||
div.errornotice {
|
||||
@mixin notification-message-base($symbol, $border-color, $left-color-top, $left-color-bottom) {
|
||||
position: relative;
|
||||
font-size: 110%;
|
||||
background: white;
|
||||
color: #3c3c33;
|
||||
font-weight: normal;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.5em;
|
||||
border-radius: 3px;
|
||||
margin: 1rem 0;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid transparent;
|
||||
border-left-width: 25px;
|
||||
|
@ -360,31 +358,37 @@ div.errornotice {
|
|||
text-align: center;
|
||||
font-family: FontAwesome;
|
||||
color: white;
|
||||
content: $symbol;
|
||||
}
|
||||
&.success,
|
||||
&.successnotice {
|
||||
&:before { content: "\f058"; } // check-circle
|
||||
border-color: #00b000;
|
||||
border-image: linear-gradient(#27eb00, lighten(#27eb00, 10%)) 2;
|
||||
border-color: $border-color;
|
||||
border-image: linear-gradient(#{$left-color-top}, #{$left-color-bottom}) 2;
|
||||
|
||||
p {
|
||||
margin: 0 0 0.6rem 0;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&.info,
|
||||
&.infonotice {
|
||||
&:before { content: "\f05a"; } // info-circle
|
||||
border-color: #0000b0;
|
||||
border-image: linear-gradient(#4474f6, lighten(#4474f6, 10%)) 2;
|
||||
}
|
||||
|
||||
@mixin extended-notification-message {
|
||||
&.comment-field {
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
&.warning,
|
||||
&.warningnotice {
|
||||
&:before { content: "\f06a"; } //exclamation-circle
|
||||
border-color: #ffb000;
|
||||
border-image: linear-gradient(#f47f13, lighten(#f47f13, 15%)) 2;
|
||||
&[class*=grid-].comment-field {
|
||||
// adapt when used as comment field in grid system.
|
||||
box-sizing: border-box;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
&.error,
|
||||
&.errornotice {
|
||||
&:before { content: "\f071"; } // exclamation-triangle
|
||||
border-color: #f64474;
|
||||
border-image: linear-gradient(#f64474, lighten(#f64474, 5%)) 2;
|
||||
&:not([class*=grid-]).comment-field {
|
||||
// clear everything if not in a grid.
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&.cell {
|
||||
padding-bottom: 0.5em !important;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
|
@ -409,6 +413,33 @@ div.errornotice {
|
|||
}
|
||||
}
|
||||
|
||||
.messages li.error, div.errornotice, .pk-error {
|
||||
@include notification-message-base("\f071", #f64474, #f64474, lighten(#f64474, 5%));
|
||||
}
|
||||
|
||||
.messages li.warning, .warningnotice, .pk-attention {
|
||||
@include notification-message-base("\f06a", #ffb000, #f47f13, lighten(#f47f13, 15%));
|
||||
}
|
||||
|
||||
.messages li.success, .successnotice, .pk-success {
|
||||
@include notification-message-base("\f058", #00b000, #27eb00, lighten(#27eb00, 10%));
|
||||
}
|
||||
|
||||
.messages li.info, div.infonotice, .pk-information {
|
||||
@include notification-message-base("\f05a", #0000b0, #4474f6, lighten(#4474f6, 10%));
|
||||
}
|
||||
|
||||
.errornotice, .warningnotice, .infonotice, .successnotice,
|
||||
.pk-error, .pk-attention, .pk-information, .pk-success {
|
||||
@include extended-notification-message();
|
||||
}
|
||||
|
||||
.messages li {
|
||||
&.error, &.warning, &.success, &.info {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* main content */
|
||||
|
||||
#main {
|
||||
|
|
Loading…
Reference in New Issue