188 lines
9.1 KiB
SCSS
188 lines
9.1 KiB
SCSS
@import "common/sass/variables";
|
|
@import "common/sass/mixins";
|
|
|
|
.Notifications {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: $zindex-alerts;
|
|
}
|
|
|
|
.Notification {
|
|
position: relative;
|
|
padding: 1.25rem 1rem;
|
|
margin: 0 0 1px;
|
|
font-weight: 300;
|
|
font-size: $font-size-bump;
|
|
box-shadow: 0 1px rgba(#fff, 0.4);
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Make sure headers blend in
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
&-message {
|
|
position: relative;
|
|
padding: 0 10rem 0 5rem;
|
|
|
|
@media screen and (max-width: $screen-xs) {
|
|
padding: 3rem 1rem 0 4rem;
|
|
}
|
|
|
|
// Message contents
|
|
a {
|
|
color: #fff;
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
// Icons
|
|
&:after {
|
|
content: '';
|
|
background-position: 50%;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
display: block;
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 1%;
|
|
width: $space * 2;
|
|
|
|
@media screen and (max-width: $screen-sm) {
|
|
left: 3%;
|
|
}
|
|
@media screen and (max-width: $screen-xs) {
|
|
left: 1%;
|
|
}
|
|
}
|
|
|
|
&:after,
|
|
.alert-info &:after {
|
|
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20x%3D%2230%22%20y%3D%2230%22%20viewBox%3D%220%200%2065%2065%22%20width%3D%22512%22%20height%3D%22512%22%3E%3Cpath%20d%3D%22M32.5%200C14.58%200%200%2014.579%200%2032.5S14.58%2065%2032.5%2065%2065%2050.421%2065%2032.5%2050.42%200%2032.5%200zm0%2061C16.785%2061%204%2048.215%204%2032.5S16.785%204%2032.5%204%2061%2016.785%2061%2032.5%2048.215%2061%2032.5%2061z%22%20fill%3D%22%23FFF%22/%3E%3Ccircle%20cx%3D%2233.018%22%20cy%3D%2219.541%22%20r%3D%223.345%22%20fill%3D%22%23FFF%22/%3E%3Cpath%20d%3D%22M32.137%2028.342a2%202%200%200%200-2%202v17a2%202%200%200%200%204%200v-17a2%202%200%200%200-2-2z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E');
|
|
}
|
|
|
|
.alert-success &:after {
|
|
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20478.2%20478.2%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M457.575%20325.1c9.8-12.5%2014.5-25.9%2013.9-39.7-.6-15.2-7.4-27.1-13-34.4%206.5-16.2%209-41.7-12.7-61.5-15.9-14.5-42.9-21-80.3-19.2-26.3%201.2-48.3%206.1-49.2%206.3h-.1c-5%20.9-10.3%202-15.7%203.2-.4-6.4.7-22.3%2012.5-58.1%2014-42.6%2013.2-75.2-2.6-97-16.6-22.9-43.1-24.7-50.9-24.7-7.5%200-14.4%203.1-19.3%208.8-11.1%2012.9-9.8%2036.7-8.4%2047.7-13.2%2035.4-50.2%20122.2-81.5%20146.3-.6.4-1.1.9-1.6%201.4-9.2%209.7-15.4%2020.2-19.6%2029.4-5.9-3.2-12.6-5-19.8-5h-61c-23%200-41.6%2018.7-41.6%2041.6v162.5c0%2023%2018.7%2041.6%2041.6%2041.6h61c8.9%200%2017.2-2.8%2024-7.6l23.5%202.8c3.6.5%2067.6%208.6%20133.3%207.3%2011.9.9%2023.1%201.4%2033.5%201.4%2017.9%200%2033.5-1.4%2046.5-4.2%2030.6-6.5%2051.5-19.5%2062.1-38.6%208.1-14.6%208.1-29.1%206.8-38.3%2019.9-18%2023.4-37.9%2022.7-51.9-.4-8.1-2.2-15-4.1-20.1zm-409.3%20122.2c-8.1%200-14.6-6.6-14.6-14.6V270.1c0-8.1%206.6-14.6%2014.6-14.6h61c8.1%200%2014.6%206.6%2014.6%2014.6v162.5c0%208.1-6.6%2014.6-14.6%2014.6h-61v.1zm383.7-133.9c-4.2%204.4-5%2011.1-1.8%2016.3%200%20.1%204.1%207.1%204.6%2016.7.7%2013.1-5.6%2024.7-18.8%2034.6-4.7%203.6-6.6%209.8-4.6%2015.4%200%20.1%204.3%2013.3-2.7%2025.8-6.7%2012-21.6%2020.6-44.2%2025.4-18.1%203.9-42.7%204.6-72.9%202.2h-1.4c-64.3%201.4-129.3-7-130-7.1h-.1l-10.1-1.2c.6-2.8.9-5.8.9-8.8V270.1c0-4.3-.7-8.5-1.9-12.4%201.8-6.7%206.8-21.6%2018.6-34.3%2044.9-35.6%2088.8-155.7%2090.7-160.9.8-2.1%201-4.4.6-6.7-1.7-11.2-1.1-24.9%201.3-29%205.3.1%2019.6%201.6%2028.2%2013.5%2010.2%2014.1%209.8%2039.3-1.2%2072.7-16.8%2050.9-18.2%2077.7-4.9%2089.5%206.6%205.9%2015.4%206.2%2021.8%203.9%206.1-1.4%2011.9-2.6%2017.4-3.5.4-.1.9-.2%201.3-.3%2030.7-6.7%2085.7-10.8%20104.8%206.6%2016.2%2014.8%204.7%2034.4%203.4%2036.5-3.7%205.6-2.6%2012.9%202.4%2017.4.1.1%2010.6%2010%2011.1%2023.3.4%208.9-3.8%2018-12.5%2027z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E');
|
|
}
|
|
|
|
.alert-warning &:after {
|
|
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M505.403%20406.394L295.389%2058.102c-8.274-13.721-23.367-22.245-39.39-22.245s-31.116%208.524-39.391%2022.246L6.595%20406.394c-8.551%2014.182-8.804%2031.95-.661%2046.37%208.145%2014.42%2023.491%2023.378%2040.051%2023.378h420.028c16.56%200%2031.907-8.958%2040.052-23.379%208.143-14.421%207.89-32.189-.662-46.369zm-28.364%2029.978a12.684%2012.684%200%200%201-11.026%206.436H45.985a12.68%2012.68%200%200%201-11.025-6.435%2012.683%2012.683%200%200%201%20.181-12.765L245.156%2075.316A12.732%2012.732%200%200%201%20256%2069.192c4.41%200%208.565%202.347%2010.843%206.124l210.013%20348.292a12.677%2012.677%200%200%201%20.183%2012.764z%22%20fill%3D%22%23FFF%22/%3E%3Cpath%20d%3D%22M256.154%20173.005c-12.68%200-22.576%206.804-22.576%2018.866%200%2036.802%204.329%2089.686%204.329%20126.489.001%209.587%208.352%2013.607%2018.248%2013.607%207.422%200%2017.937-4.02%2017.937-13.607%200-36.802%204.329-89.686%204.329-126.489%200-12.061-10.205-18.866-22.267-18.866zM256.465%20353.306c-13.607%200-23.814%2010.824-23.814%2023.814%200%2012.68%2010.206%2023.814%2023.814%2023.814%2012.68%200%2023.505-11.134%2023.505-23.814%200-12.99-10.826-23.814-23.505-23.814z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E');
|
|
}
|
|
|
|
.alert-danger &:after {
|
|
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Cpath%20d%3D%22M505.403%20406.394L295.389%2058.102c-8.274-13.721-23.367-22.245-39.39-22.245s-31.116%208.524-39.391%2022.246L6.595%20406.394c-8.551%2014.182-8.804%2031.95-.661%2046.37%208.145%2014.42%2023.491%2023.378%2040.051%2023.378h420.028c16.56%200%2031.907-8.958%2040.052-23.379%208.143-14.421%207.89-32.189-.662-46.369zm-28.364%2029.978a12.684%2012.684%200%200%201-11.026%206.436H45.985a12.68%2012.68%200%200%201-11.025-6.435%2012.683%2012.683%200%200%201%20.181-12.765L245.156%2075.316A12.732%2012.732%200%200%201%20256%2069.192c4.41%200%208.565%202.347%2010.843%206.124l210.013%20348.292a12.677%2012.677%200%200%201%20.183%2012.764z%22%20fill%3D%22%23FFF%22/%3E%3Cpath%20d%3D%22M256.154%20173.005c-12.68%200-22.576%206.804-22.576%2018.866%200%2036.802%204.329%2089.686%204.329%20126.489.001%209.587%208.352%2013.607%2018.248%2013.607%207.422%200%2017.937-4.02%2017.937-13.607%200-36.802%204.329-89.686%204.329-126.489%200-12.061-10.205-18.866-22.267-18.866zM256.465%20353.306c-13.607%200-23.814%2010.824-23.814%2023.814%200%2012.68%2010.206%2023.814%2023.814%2023.814%2012.68%200%2023.505-11.134%2023.505-23.814%200-12.99-10.826-23.814-23.505-23.814z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E');
|
|
}
|
|
}
|
|
|
|
&-close {
|
|
@include reset-button;
|
|
background-position: 50%;
|
|
background-repeat: no-repeat;
|
|
background-size: 1rem;
|
|
cursor: pointer;
|
|
opacity: .7;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 9rem;
|
|
bottom: 0;
|
|
border-radius: 0;
|
|
transition: $transition;
|
|
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%20348.333%20348.334%22%3E%3Cpath%20d%3D%22M336.559%2068.611L231.016%20174.165l105.543%20105.549c15.699%2015.705%2015.699%2041.145%200%2056.85-7.844%207.844-18.128%2011.769-28.407%2011.769-10.296%200-20.581-3.919-28.419-11.769L174.167%20231.003%2068.609%20336.563c-7.843%207.844-18.128%2011.769-28.416%2011.769-10.285%200-20.563-3.919-28.413-11.769-15.699-15.698-15.699-41.139%200-56.85l105.54-105.549L11.774%2068.611c-15.699-15.699-15.699-41.145%200-56.844%2015.696-15.687%2041.127-15.687%2056.829%200l105.563%20105.554L279.721%2011.767c15.705-15.687%2041.139-15.687%2056.832%200%2015.705%2015.699%2015.705%2041.145.006%2056.844z%22%20fill%3D%22%23FFF%22/%3E%3C/svg%3E');
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 10px;
|
|
bottom: 10px;
|
|
left: 0;
|
|
border-left: 1px solid rgba(0, 0, 0, .1);
|
|
transition: $transition;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(#000, 0.1);
|
|
border-color: rgba(#fff, .5);
|
|
|
|
&:after {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
&:active {
|
|
background-color: rgba(#000, 0.1);
|
|
border-color: rgba(#fff, .7);
|
|
opacity: 1;
|
|
}
|
|
|
|
@media screen and (max-width: $screen-sm) {
|
|
width: 7rem;
|
|
}
|
|
|
|
@media screen and (max-width: $screen-xs) {
|
|
width: 100%;
|
|
height: 3rem;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: auto;
|
|
border-left: 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, .7);
|
|
}
|
|
}
|
|
}
|
|
|
|
.NotificationAnimation {
|
|
&-enter,
|
|
&-exit {
|
|
transition: opacity 250ms ease, transform 250ms ease;
|
|
}
|
|
|
|
&-enter {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
|
|
&-active {
|
|
opacity: 1;
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
|
|
&-exit {
|
|
opacity: 1;
|
|
transform: translateY(0%);
|
|
|
|
&-active {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
}
|
|
}
|