X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/0dedb252acdced77dc403ff4acdbb42734eb991f..bf3f18ce9313f4929ff327fbf12803157de171cb:/apps/wolnelektury_core/static/scss/funding/funding.scss diff --git a/apps/wolnelektury_core/static/scss/funding/funding.scss b/apps/wolnelektury_core/static/scss/funding/funding.scss index 20952733d..3b63e2037 100644 --- a/apps/wolnelektury_core/static/scss/funding/funding.scss +++ b/apps/wolnelektury_core/static/scss/funding/funding.scss @@ -4,7 +4,12 @@ @include size(padding, 5px 0); position: relative; .close { - @include size(font-size, 10px); + @include mono; + @include size(font-size, 16px); + position: absolute; + top: 0px; + right: 0; + @include size(padding, 1px 5px 10px 10px); } .call-area { float:left; @@ -16,19 +21,28 @@ @include size(padding, 5.25px 7.5px); @include size(margin, 7.5px); display: inline-block; - vertical-align: top; + vertical-align: middle; text-align: center; background: lighten(#018189, .05); @include size(width, 135px); + + @include min-screen(420px) { + vertical-align: top; + } } .learn-more { text-align: center; margin: auto; @include size(font-size, 10px); padding: .5em; + + @include min-screen(300px) { + display: inline; + } @include min-screen(420px) { padding: 0; + display: block; } } .description { @@ -55,6 +69,40 @@ background-repeat: repeat-y; background-color: #F68900; @include box-shadow(1px 1px 1px #888); + + .progress-collected { + float:left; + &:after { + content: " / "; + } + @include min-screen(500px) { + &:after { + content: none; + } + } + } + .progress-target { + float: left; + padding-left: 0; + @include min-screen(500px) { + float: right; + @include size(padding-left, 6px); + } + } + .progress-extralabel { + display: none; + @include min-screen(500px) { + display: inline; + } + } + .progress-until { + display: inline-block; + margin-right: 0em; + text-align: right; + @include min-screen(500px) { + text-align: center; + } + } } .with-button { clear: left; @@ -66,17 +114,16 @@ .funding-title { @include size(font-size, 11px); + display: block; + @include min-screen(640px) { + display: inline; + } } .funding-title-strong { @extend .funding-title; font-weight: bold; @include size(font-size, 15px); } - .close { - position: absolute; - top: 0px; - @include size(right, 5px); - } } .funding-top-header { @@ -148,7 +195,10 @@ } } -.funding-handle { +#funding-closeable { + display: none; +} +#funding-handle { position: absolute; top: 0; right: 0;