Use haskell-based sass-compilation for alerts.scss
This commit is contained in:
Gregor Kleen
parent
5c5a080f0f
commit
800d063fa7
@ -985,7 +985,7 @@ siteLayout headingOverride widget = do
|
||||
addStylesheet $ StaticR css_vendor_fontawesome_css
|
||||
addStylesheet $ StaticR css_fonts_css
|
||||
addStylesheet $ StaticR css_utils_tabber_css
|
||||
addStylesheet $ StaticR css_utils_alerts_css
|
||||
addStylesheet $ StaticR css_utils_alerts_scss
|
||||
$(widgetFile "default-layout")
|
||||
$(widgetFile "standalone/modal")
|
||||
$(widgetFile "standalone/showHide")
|
||||
|
||||
@ -47,7 +47,7 @@ compile :: MimeType
|
||||
compile sassMime sassLoc fp
|
||||
| sassMime `elem` [ "text/x-sass", "text/x-scss" ]
|
||||
= return . pure $ def
|
||||
{ ebHaskellName = Just $ pathToName ebLocation
|
||||
{ ebHaskellName = Just $ pathToName sassLoc
|
||||
, ebLocation
|
||||
, ebMimeType = "text/css"
|
||||
, ebProductionContent = either (fail <=< Sass.errorMessage) (return . LBS.fromStrict) =<< Sass.compileFile fp def
|
||||
|
||||
2
start.sh
2
start.sh
@ -19,6 +19,4 @@ if [[ -d .stack-work-run ]]; then
|
||||
trap move-back EXIT
|
||||
fi
|
||||
|
||||
node-sass ./static/scss -o ./static/css
|
||||
|
||||
stack exec -- yesod devel $@
|
||||
|
||||
@ -1,182 +0,0 @@
|
||||
/* ALERTS */
|
||||
/**
|
||||
.alert
|
||||
Regular Info Alert
|
||||
Disappears automatically after 30 seconds
|
||||
Disappears after x seconds if explicitly specified via data-decay='x'
|
||||
Can be told not to disappear with data-decay='0'
|
||||
|
||||
.alert-success
|
||||
Disappears automatically after 30 seconds
|
||||
|
||||
.alert-warning
|
||||
Does not disappear
|
||||
Orange regardless of user's selected theme
|
||||
|
||||
.alert-error
|
||||
Does not disappear
|
||||
Red regardless of user's selected theme
|
||||
|
||||
*/
|
||||
.alerts {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 5%;
|
||||
z-index: 20;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column; }
|
||||
|
||||
.alerts__toggler {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 400px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
cursor: pointer; }
|
||||
.alerts__toggler::before {
|
||||
content: '\f077';
|
||||
position: absolute;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
left: 50%;
|
||||
top: 0;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
color: var(--color-grey);
|
||||
font-size: 30px;
|
||||
transform: translateX(-50%); }
|
||||
|
||||
.alerts__toggler--visible {
|
||||
top: -40px;
|
||||
opacity: 1;
|
||||
transition: top 0.5s cubic-bezier(0.73, 1.25, 0.61, 1), opacity 0.5s cubic-bezier(0.73, 1.25, 0.61, 1); }
|
||||
|
||||
@media (max-width: 425px) {
|
||||
.alerts {
|
||||
left: 5%; } }
|
||||
|
||||
.alert {
|
||||
position: relative;
|
||||
display: block;
|
||||
background-color: var(--color-lightblack);
|
||||
font-size: 1rem;
|
||||
color: var(--color-lightwhite);
|
||||
z-index: 0;
|
||||
padding: 0 50px;
|
||||
padding-right: 60px;
|
||||
animation: slide-in-alert .2s ease-out forwards;
|
||||
margin-bottom: 10px;
|
||||
transition: margin-bottom .2s ease-out; }
|
||||
|
||||
.alert a {
|
||||
color: var(--color-lightwhite); }
|
||||
|
||||
@keyframes slide-in-alert {
|
||||
from {
|
||||
transform: translateY(120%); }
|
||||
to {
|
||||
transform: translateY(0); } }
|
||||
|
||||
@keyframes slide-out-alert {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
max-height: 200px; }
|
||||
to {
|
||||
transform: translateY(250%);
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden; } }
|
||||
|
||||
@media (min-width: 425px) {
|
||||
.alert {
|
||||
max-width: 400px; } }
|
||||
|
||||
.alert--invisible {
|
||||
animation: slide-out-alert .2s ease-out forwards;
|
||||
margin-bottom: 0; }
|
||||
|
||||
.alert__content {
|
||||
padding: 8px 0;
|
||||
min-height: 40px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
font-weight: 600;
|
||||
align-items: center;
|
||||
text-align: left; }
|
||||
|
||||
.alert__icon {
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
z-index: 40; }
|
||||
.alert__icon::before {
|
||||
content: '\f05a';
|
||||
position: absolute;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-size: 24px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
width: 30px;
|
||||
height: 30px; }
|
||||
|
||||
.alert__closer {
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
transition: all .3s ease;
|
||||
z-index: 40; }
|
||||
.alert__closer:hover {
|
||||
transform: scale(1.05, 1.05); }
|
||||
.alert__closer:hover::before {
|
||||
box-shadow: 0 0 4px white;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: white; }
|
||||
.alert__closer::before {
|
||||
content: '\f00d';
|
||||
position: absolute;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: all .15s ease; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.alert__closer {
|
||||
width: 40px; } }
|
||||
|
||||
.alert-success {
|
||||
background-color: var(--color-success); }
|
||||
.alert-success .alert__icon::before {
|
||||
content: '\f058'; }
|
||||
|
||||
.alert-warning {
|
||||
background-color: var(--color-warning); }
|
||||
.alert-warning .alert__icon::before {
|
||||
content: '\f06a'; }
|
||||
|
||||
.alert-error {
|
||||
background-color: var(--color-error); }
|
||||
.alert-error .alert__icon::before {
|
||||
content: '\f071'; }
|
||||
Loading…
Reference in New Issue
Block a user