nfp_sites/app/widgets/common.scss

345 lines
5.3 KiB
SCSS
Raw Normal View History

2019-09-13 13:33:10 +00:00
2019-02-22 14:53:43 +00:00
fileupload {
position: relative;
display: flex;
align-items: stretch;
2019-09-13 13:33:10 +00:00
flex-direction: column;
justify-content: stretch;
2019-02-22 14:53:43 +00:00
.showicon,
2019-09-13 13:33:10 +00:00
.showbordericon,
2019-02-22 14:53:43 +00:00
.display {
2019-09-13 13:33:10 +00:00
flex-grow: 2;
}
.showbordericon {
2019-02-22 14:53:43 +00:00
border: 3px solid $title-fg;
border-style: dashed;
2019-09-14 19:03:38 +00:00
background-image: url('./img/upload.svg');
2019-09-13 13:33:10 +00:00
background-position: center;
background-repeat: no-repeat;
2019-09-14 19:03:38 +00:00
background-size: 50px;
2019-02-22 14:53:43 +00:00
}
.showicon {
2019-09-13 13:33:10 +00:00
position: absolute;
2019-09-14 19:03:38 +00:00
top: 5px;
right: 5px;
width: 50px;
height: 50px;
background-image: url('./img/upload.svg');
2019-02-22 14:53:43 +00:00
background-position: center;
background-repeat: no-repeat;
2019-09-14 19:03:38 +00:00
background-size: contain;
2019-02-22 14:53:43 +00:00
}
2019-09-13 13:33:10 +00:00
img {
max-width: 600px;
2019-09-14 19:03:38 +00:00
width: 100%;
2019-09-13 13:33:10 +00:00
align-self: center;
2019-09-14 19:03:38 +00:00
min-height: 100px;
2019-09-13 13:33:10 +00:00
}
2019-02-22 14:53:43 +00:00
.display {
2019-09-13 13:33:10 +00:00
background-size: cover;
background-repeat: no-repeat;
background-position: center;
2019-02-22 14:53:43 +00:00
}
.loading-spinner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #33333388;
width: 100%;
}
input {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.01;
width: 100%;
cursor: pointer;
text-indent: -9999px;
z-index: 2;
}
2019-09-14 19:03:38 +00:00
.remove {
border: none;
position: absolute;
top: 5px;
right: 60px;
width: 50px;
height: 50px;
background-image: url('./img/delete.svg');
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
background-size: contain;
z-index: 3;
outline: none;
cursor: pointer;
}
2019-02-22 14:53:43 +00:00
}
2019-09-13 13:33:10 +00:00
dialogue {
background: white;
display: flex;
flex-direction: column;
text-align: center;
width: calc(100% - 40px);
max-width: 500px;
2019-09-14 19:03:38 +00:00
h2 {
background: $secondary-dark-bg;
color: $secondary-dark-fg;
font-size: 1.5em;
padding: 10px;
}
2019-09-13 13:33:10 +00:00
2019-09-14 19:03:38 +00:00
p {
padding: 10px;
}
2019-09-13 13:33:10 +00:00
2019-09-14 19:03:38 +00:00
.buttons {
display: flex;
justify-content: space-around;
padding: 10px;
}
2019-09-13 13:33:10 +00:00
2019-09-14 19:03:38 +00:00
button {
border: 1px solid $secondary-dark-bg;
background: transparent;
color: $secondary-dark-bg;
padding: 5px 15px;
min-width: 150px;
}
2019-09-13 13:33:10 +00:00
2019-09-14 19:03:38 +00:00
button.alert {
border-color: red;
color: red;
}
2019-09-13 13:33:10 +00:00
2019-09-14 19:03:38 +00:00
button.cancel {
border-color: #999;
color: #999;
}
2019-09-13 13:33:10 +00:00
}
newsentry {
display: flex;
color: $meta-fg;
font-size: 12px;
2019-09-14 19:03:38 +00:00
.title {
display: flex;
margin-bottom: 10px !important;
a {
text-decoration: none;
color: $secondary-dark-bg;
font-size: 14px;
font-weight: bold;
}
}
a.cover {
flex-shrink: 0;
margin-right: 10px;
width: 124px;
text-align: center;
img {
max-height: 70px;
width: auto;
}
}
a.nobg {
height: 70px;
width: 124px;
background: #ddd;
}
.entrycontent {
display: flex;
flex-direction: column;
flex: 2 1 auto;
padding: 0 5px 5px;
h3 {
margin-bottom: 0 !important;
font-size: 1.3em;
font-weight: bold;
}
}
.entrymeta {
font-size: 10px;
color: $meta-fg;
font-weight: bold;
display: none;
}
}
fileinfo {
padding: 0 5px;
margin-bottom: 5px;
&.slim {
padding: 0;
margin: 0;
}
.filetitle {
display: block;
line-height: 16px;
.prefix {
font-weight: bold;
margin-right: 5px;
}
a {
color: $secondary-dark-bg;
font-weight: bold;
text-decoration: none;
padding-right: 5px;
border-right: 1px solid $border;
margin-right: 5px;
display: inline-block;
2019-09-13 13:33:10 +00:00
}
2019-09-14 19:03:38 +00:00
}
ul {
margin: 10px 0;
padding-left: 0;
list-style-type: disc;
list-style-position: inside;
li {
padding-left: 20px;
}
}
}
newsitem {
display: flex;
flex-direction: column;
font-size: 15px;
.title {
text-decoration: none;
background: $secondary-bg;
color: $secondary-fg;
font-size: 1.2em;
font-weight: bold;
text-align: center;
padding: 5px 10px;
margin-bottom: 10px;
}
.newsitemcontent {
display: flex;
}
a.cover {
flex-shrink: 0;
margin-right: 10px;
width: 400px;
text-align: center;
2019-09-13 13:33:10 +00:00
2019-09-14 19:03:38 +00:00
img {
max-height: 225px;
width: auto;
2019-09-13 13:33:10 +00:00
}
}
2019-09-14 19:03:38 +00:00
a.nobg {
height: 225px;
width: 400px;
background: #ddd;
}
2019-09-13 13:33:10 +00:00
.entrycontent {
display: flex;
flex-direction: column;
flex: 2 1 auto;
padding: 0 5px 5px;
h3 {
2019-09-14 19:03:38 +00:00
margin-bottom: 0 !important;
2019-09-13 13:33:10 +00:00
font-size: 1.3em;
font-weight: bold;
}
2019-09-14 19:03:38 +00:00
.fr-view {
margin-bottom: 10px;
}
fileinfo {
font-size: 0.8em;
}
}
.entrymeta {
flex-grow: 2;
font-size: 11px;
color: $meta-fg;
font-weight: bold;
display: flex;
align-items: flex-end;
padding: 10px 0;
}
}
pages {
display: flex;
justify-content: center;
width: 100%;
a, div {
display: block;
font-size: 0.9em;
max-width: 80px;
flex-grow: 2;
text-align: center;
padding: 10px !important;
margin-top: 10px;
}
a {
color: $secondary-dark-bg;
cursor: pointer;
2019-09-13 13:33:10 +00:00
}
}
@media screen and (max-width: 1000px){
newsitem a.cover {
width: 300px;
}
}
@media screen and (max-width: 639px){
newsitem {
a.cover {
width: 100%;
margin-bottom: 20px;
img {
max-height: max-content;
}
}
.newsitemcontent {
flex-direction: column;
}
}
}