- as='Post.Header'
-
{
@include display(flex); @include flex(0 auto); @include align-items(center); @include justify-content(center); @include flex-direction(column); @include transition(background-color 0.3s ease); position: fixed; top: 52px; left: 0; right: 0; width: 100%; @include background(linear-gradient(darken($bright-blue, 5%), $bright-blue)); background-size: cover; background-position: center left; border-bottom: 1px solid #E8E8E8; color: lighten($bright-blue, 50%); height: 200px; min-height: 100px;
}
- as='Post.Header'
-
> nav.actions {
top: 0; font-weight: bold;
}
[as='Post.Header'].image > div.drop {
background-color: rgb(122, 199, 122); opacity: 1; z-index: 6;
}
[as='Post.Header'].image > div.title {
opacity: 0;
}
- as='Post.Header'
-
> div.title > input {
visibility: hidden; height: 1px; padding: 0;
}
- as='Post.Header'
-
> h2 {
@include display(flex); @include flex(1); font-size: 2.3em; margin: 1em 0; text-align: center; color: lighten($gray-blue, 50%);
}
- as='Post.Header'
-
> nav {
@include display(flex); @include justify-content(space-between); @include align-items(center); @include flex(0 auto); @include transition(opacity 0.2s); z-index: 100; width: 100%; margin: 12px 0 0 0; padding: 0 1em; position: absolute; &.hidden { opacity: 0; z-index: -1; }
}
- as='Post.Header'
-
> div.title {
@include display(flex); @include flex(1); @include flex-direction(column); @include transition(opacity 0.2s linear); @include justify-content(center); text-align: center; width: 100%; z-index: 5; & > p.browse { @include transition(color 0.3s); font-size: 0.7em; cursor: pointer; &:hover { color: rgb(114, 153, 204); } } svg.clear { @include transition(fill 0.3s); width: 30px; position: absolute; right: 1em; bottom: 1em; fill: #D8ABAB; cursor: pointer; &:hover { fill: #C23131; } }
}
- as='Post.Header'
-
a.title {
@include flex(0 auto); @include transition(box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease); font-size: 2.3em; line-height: 1.4em; cursor: pointer; text-decoration: none; color: inherit; margin: 0 auto; &:hover { color: $link-color; }
}
- as='Post.Header'
- as='Editor.Save'
-
{
margin-right: 2em; border-color: darken($green, 25%); background-color: darken($green, 10%); &:hover { box-shadow: inset 0 1px 0 0 lighten($green, 10%); background-color: darken($green, 10%); } &:active { box-shadow: inset 0 1px 2px 0 darken($green, 25%); background-color: darken($green, 25%); }
}
- as='Post.Header'
-
div.drop {
@include transition(opacity 0.3s ease); @include display(flex); @include flex-direction(column); @include align-items(center); @include justify-content(center); position: absolute; opacity: 0; left: 0; right: 0; top: 0; bottom: 0; font-size: 1em; text-align: center; margin: 0; svg { width: 40px; fill: rgb(66, 152, 66); } p { color: rgb(66, 152, 66); text-shadow: 0 1px 0 rgb(143, 213, 143); }
}
- as='Post.Header'
-
div.progressbar {
position: absolute; bottom: 0; left: 0; right: 0; height: 4px; & > span.progress { @include transition(width 0.3s ease-out); display: block; height: 100%; width: 0%; background: #5FFF6A; }
}
- as='Post.Header'
-
div.drop > div.status.error {
@include flex-direction(column); @include align-items(center); @include justify-content(center); width: 100%; height: 100%; background: $red; color: $dark-red-color; &:not(.hidden) { @include display(flex); } svg { fill: rgb(89, 18, 18); } ul { color: $dark-red-color; text-shadow: 0 1px 0 #BD4141; font-weight: bolder; } button { @include transition(box-shadow 0.2s ease); border: 1px solid #8B0B0B; border-radius: 2px; box-shadow: inset 0 0px 1px 0 #D85D5D; padding: 6px 1em; &:hover { box-shadow: inset 0 0px 3px 0 #D85D5D; } &:active { box-shadow: inset 0 0px 2px 0 #813131; } }
}
- as='Post.Header'
-
div.publish.state {
@include transition(background-color 0.2s); position: relative; padding: 2px; width: 10em; height: 30px; background-color: rgba(black, 0.2); color: darken($bright-blue, 25%); border-radius: 60px; cursor: pointer; overflow: hidden; &:hover label:last-child { background-color: darken(white, 2%); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); } label { display: block; position: absolute; font-weight: bold; line-height: 2em; text-indent: 0; top: 1px; left: 1px; bottom: 1px; cursor: pointer; padding: 0 1em; } label:first-child { @include transition(background 0.2s, text-indent 0.2s); right: 1px; background-color: #f1f1f1; border-radius: 30px; text-indent: 0; } label:last-child { @include transition(background 0.2s, box-shadow 0.2s, margin 0.2s); width: 28px; background-color: white; border-radius: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); text-indent: 30px; } &[published='true'] { background-color: rgba(black, 0.5); label:first-child { background-color: darken($bright-blue, 25%); color: lighten($bright-blue, 50%); } label:last-child { margin-left: calc(10em - 30px); text-indent: 10em; } } &:not([published='true']) { label:first-child { text-indent: -20em; } label:last-child { } }
}