import from la bonne adresse and first refactoring for ouidade.com
This commit is contained in:
Bachir Soussi Chiadmi
@@ -0,0 +1,679 @@
|
||||
$sidebar-width: 20%;
|
||||
$sidebar-padding: 2rem;
|
||||
$topbar-height: 4.2rem;
|
||||
$update-height: 3rem;
|
||||
|
||||
#admin-sidebar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: $sidebar-width;
|
||||
|
||||
background: $accent-bg;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
display: none;
|
||||
width: 75%;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
a {
|
||||
color: shade($accent-fg,20%);
|
||||
&:hover {
|
||||
color: $accent-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#admin-logo {
|
||||
background: $darker-accent-bg;
|
||||
height: $topbar-height;
|
||||
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
@extend %vertical-align;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
|
||||
i {
|
||||
font-size: 1rem;
|
||||
vertical-align: middle;
|
||||
margin-top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#admin-user-details {
|
||||
padding: $sidebar-padding;
|
||||
border-bottom: 1px solid $darker-accent-bg;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
@include transition(all 0.5s ease);
|
||||
border-radius: 100%;
|
||||
float: left;
|
||||
|
||||
@include breakpoint(tablet-range){
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
box-shadow: 0px 0px 0 50px lighten($accent-bg,3%);
|
||||
}
|
||||
|
||||
.admin-user-names {
|
||||
margin-left: 45px;
|
||||
|
||||
@include breakpoint(tablet-range){
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
h4, h5 {
|
||||
color: darken($accent-fg,10%);
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: $font-family-default;
|
||||
color: lighten($accent-bg,55%);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#admin-menu {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
|
||||
|
||||
|
||||
li {
|
||||
font-family: $font-family-header;
|
||||
|
||||
.badges {
|
||||
float: right;
|
||||
margin-right:1rem;
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
margin-right: -5px;
|
||||
|
||||
color: shade($accent-fg,10%);
|
||||
}
|
||||
|
||||
.count {
|
||||
background-color: lighten($accent-bg, 10%);
|
||||
}
|
||||
|
||||
.updates {
|
||||
background-color: $tertiary-accent-bg;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.with-updates {
|
||||
.count {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.updates {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include transition(all 0.2s ease);
|
||||
display: block;
|
||||
padding-left: 25px;
|
||||
padding-top: 0.7rem;
|
||||
padding-bottom: 0.7rem;
|
||||
|
||||
color: lighten($accent-bg,65%);
|
||||
|
||||
@include breakpoint(tablet-range){
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
i {
|
||||
@include transition(all 0.2s ease);
|
||||
color: lighten($accent-bg,55%);
|
||||
margin-right: 8px;
|
||||
|
||||
@include breakpoint(tablet-range){
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $darker-accent-bg;
|
||||
// padding-left: 30px;
|
||||
color: $accent-fg;
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
a {
|
||||
background: $page-bg;
|
||||
color: $accent-fg;
|
||||
padding-left: 16px;
|
||||
border-left: 9px solid $secondary-accent-bg;
|
||||
|
||||
@include breakpoint(tablet-range){
|
||||
padding-left: 11px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: lighten($accent-bg,70%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#admin-main {
|
||||
margin-left: $sidebar-width;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.hint:after, [data-hint]:after {
|
||||
font-size: 0.9rem;
|
||||
width: 400px;
|
||||
line-height: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
text-align: left;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
position: relative;
|
||||
height: $topbar-height;
|
||||
padding: 0 $padding-default;
|
||||
|
||||
h1 {
|
||||
@extend %vertical-align;
|
||||
|
||||
@include breakpoint(mobile-only){
|
||||
> i:first-child:before {
|
||||
content: "\f0c9";
|
||||
}
|
||||
@include transform(inherit);
|
||||
top: 5px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
@extend %vertical-align;
|
||||
padding: 0;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
@include transform(inherit);
|
||||
top: inherit;
|
||||
bottom: 5px;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.preview {
|
||||
color: $secondary-accent-fg;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0.3rem 0.6rem;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
padding: 0.2rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-block .grav-update, .admin-block .alert {
|
||||
margin-top: -2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.grav-update {
|
||||
@include clearfix;
|
||||
padding: 0 $padding-default;
|
||||
margin-top: -$padding-default;
|
||||
background: $info-bg;
|
||||
color: $info-fg;
|
||||
|
||||
&.plugins {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
float: right;
|
||||
margin-top: 0.6rem;
|
||||
margin-left: 1rem;
|
||||
line-height: 1.5;
|
||||
@include button-color(shade($info-bg, 20%));
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: $update-height;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.less {
|
||||
color: rgba($info-fg,0.75);
|
||||
}
|
||||
|
||||
&.grav {
|
||||
margin-top: 0;
|
||||
@include transition (margin-top 0.15s ease-out);
|
||||
|
||||
@include breakpoint(mobile-only){
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
p * {
|
||||
display: none;
|
||||
}
|
||||
p {
|
||||
font-size: 0;
|
||||
button {
|
||||
width: 95%;
|
||||
display: inherit;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-left: 2.5%;
|
||||
margin-right: 2.5%;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grav-update.grav + .content-padding {
|
||||
top: $topbar-height + $update-height;
|
||||
@include transition (top 0.15s ease-out);
|
||||
|
||||
@include breakpoint(mobile-only){
|
||||
top: 5.2rem;
|
||||
padding-bottom: 8rem;
|
||||
padding-top: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.content-padding {
|
||||
position: absolute;
|
||||
top: $topbar-height;
|
||||
bottom: 0;
|
||||
left: $sidebar-width;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
padding: 2.5rem;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-block {
|
||||
background: $content-bg;
|
||||
color: $content-fg;
|
||||
padding: 2rem 0;
|
||||
|
||||
h1 {
|
||||
color: $page-bg;
|
||||
padding: 0 $padding-default 0.5rem;
|
||||
margin: 0 0 1rem;
|
||||
border-bottom: 3px solid darken($content-bg, 5%);
|
||||
|
||||
@include breakpoint(mobile-only){
|
||||
padding: 0 0 0.5rem;
|
||||
margin: 0 0 1rem !important;
|
||||
text-indent: $padding-default;
|
||||
}
|
||||
|
||||
&.no_underline {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
margin-right: $padding-default;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
width: 100%;
|
||||
margin: -.5rem 0 1rem 0;
|
||||
text-align: center;
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flush-bottom {
|
||||
&.button-bar {
|
||||
margin: 1rem -2rem -1rem;
|
||||
height: 70px;
|
||||
padding: 0 1rem;
|
||||
float: none;
|
||||
|
||||
@include breakpoint(mobile-only){
|
||||
height: auto;
|
||||
padding: 2rem 1rem 0rem 1rem;
|
||||
}
|
||||
.button {
|
||||
@extend %vertical-align;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
margin-left: 0 !important;
|
||||
margin-bottom: .5rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.danger, .success {
|
||||
position: relative;
|
||||
|
||||
&.button-bar {
|
||||
margin: 2rem 0 -2rem;
|
||||
height: 70px;
|
||||
padding: 1rem;
|
||||
float: none;
|
||||
.button {
|
||||
@extend %vertical-align;
|
||||
}
|
||||
background: darken($content-bg, 2%);
|
||||
}
|
||||
}
|
||||
|
||||
.danger {
|
||||
&.button-bar {
|
||||
.button {
|
||||
@include button-color($secondary-link);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#admin-dashboard {
|
||||
|
||||
@include clearfix;
|
||||
|
||||
.dashboard-item {
|
||||
float: left;
|
||||
width: 50%;
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> div {
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.dashboard-left {
|
||||
padding-right: 1.25rem;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
padding-right: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-right {
|
||||
padding-left: 1.25rem;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
padding-left: 0rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#updates {
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: rgba($white,0.96);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.updates-chart {
|
||||
width: 50%;
|
||||
float: left;
|
||||
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.backups-chart {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
.numeric {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1;
|
||||
@extend %vertical-align;
|
||||
|
||||
|
||||
em {
|
||||
display:block;
|
||||
font-style: normal;
|
||||
font-size: 1rem;
|
||||
color: rgba($white, .85);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.admin-update-charts {
|
||||
@include clearfix;
|
||||
min-height: 191px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 0.5rem;
|
||||
@include breakpoint(tablet-range){
|
||||
width: 49%;
|
||||
padding: .3rem 0rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#popularity {
|
||||
p {
|
||||
text-align: center;
|
||||
color: rgba($white,0.95);
|
||||
margin: 0;
|
||||
}
|
||||
.button-bar {
|
||||
height: 100px;
|
||||
padding: 0 1rem;
|
||||
|
||||
}
|
||||
.stat {
|
||||
@extend %vertical-align;
|
||||
display:block;
|
||||
float: left;
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
b {
|
||||
display: block;
|
||||
font-size: 2.5rem;
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
}
|
||||
i {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
color: rgba($white, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tertiary-accent {
|
||||
@include linear-gradient($tertiary-accent-bg, lighten($tertiary-accent-bg,20%));
|
||||
}
|
||||
|
||||
.secondary-accent {
|
||||
@include linear-gradient($secondary-accent-bg, lighten($secondary-accent-bg,20%));
|
||||
}
|
||||
}
|
||||
|
||||
.no-flick{-webkit-transform:translate3d(0,0,0);}
|
||||
|
||||
.card-row {
|
||||
@include justify-content(space-between);
|
||||
}
|
||||
|
||||
.card-item {
|
||||
@extend .no-flick;
|
||||
overflow: hidden;
|
||||
padding: 1rem;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
width: 31%;
|
||||
@include breakpoint(tablet-range) {
|
||||
width: 48%;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
border: 1px solid darken($content-bg, 5%);
|
||||
background: $white;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
h4 {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.user-details {
|
||||
text-align: center;
|
||||
img {
|
||||
border-radius: 100%;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
h5 {
|
||||
color: lighten($content-fg,10%);
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
text-align: center;
|
||||
padding: 3rem 0 1rem;
|
||||
}
|
||||
|
||||
// Chart overrides
|
||||
.ct-chart {
|
||||
|
||||
.ct-series {
|
||||
.ct-bar {
|
||||
stroke-width: 20px;
|
||||
|
||||
}
|
||||
&.ct-series-a {
|
||||
.ct-bar {
|
||||
stroke: rgba($white, 0.85) !important;
|
||||
}
|
||||
.ct-slice-donut {
|
||||
stroke: $white !important;
|
||||
}
|
||||
}
|
||||
&.ct-series-b {
|
||||
.ct-slice-donut {
|
||||
stroke: rgba($white, 0.2) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#popularity .ct-chart {
|
||||
margin: 0 -10px -10px;
|
||||
.ct-chart-bar {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#latest {
|
||||
.page-title, .page-route {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.last-modified {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#overlay {
|
||||
position: fixed;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
left: 75%;
|
||||
top: 0;
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
.button {
|
||||
@extend %button;
|
||||
@include button-color(lighten($secondary-accent-bg, 10%));
|
||||
|
||||
&.dropdown-toggle {
|
||||
border-left: 1px solid lighten($secondary-accent-bg, 5%);
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
@include button-color(shade($secondary-accent-bg, 20%));
|
||||
|
||||
&.dropdown-toggle {
|
||||
border-left: 1px solid lighten(shade($secondary-accent-bg, 20%), 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
// real button
|
||||
> .button:first-child:not(:last-child):not(.dropdown-toggle) {
|
||||
border-top-right-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
}
|
||||
|
||||
> .button:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
> .button {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
// toggle caret
|
||||
> .button + .dropdown-toggle {
|
||||
text-align: center;
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
|
||||
i {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .button:last-child:not(:first-child), > .dropdown-toggle:not(:first-child) {
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
}
|
||||
|
||||
.button + .button, .button + .button-group, .button-group + .button, .button-group + .button-group {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
float: left;
|
||||
min-width: 160px;
|
||||
padding: 5px 0;
|
||||
margin: 2px 0 0;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background-color: lighten($secondary-accent-bg, 10%);
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid lighten($secondary-accent-bg, 5%);
|
||||
border: 1px solid rgba(0, 0, 0, .15);
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
|
||||
&.language-switcher {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
&.lang-switcher {
|
||||
min-width: 150px;
|
||||
left: inherit;
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
margin: 9px 0;
|
||||
overflow: hidden;
|
||||
background-color: $secondary-accent-bg;
|
||||
}
|
||||
|
||||
li > a {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
font-weight: 400;
|
||||
line-height: 1.42857143;
|
||||
color: $white;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus, &:hover {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
background-color: $secondary-accent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.language-switcher {
|
||||
a.active {
|
||||
background-color: #349886
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.open > .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 990;
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: $page-bg;
|
||||
color: $core-text;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $core-accent;
|
||||
&:hover {
|
||||
color: darken($core-accent, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: $font-weight-bold
|
||||
}
|
||||
|
||||
.bigger {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
text-align: right;
|
||||
float: right;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.secondary-accent {
|
||||
background: $secondary-accent-bg;
|
||||
color: $secondary-accent-fg;
|
||||
|
||||
.button-bar {
|
||||
background: $secondary-accent-bg;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: lighten($secondary-accent-bg, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.tertiary-accent {
|
||||
background: $tertiary-accent-bg;
|
||||
color: $tertiary-accent-fg;
|
||||
|
||||
.button-bar {
|
||||
background: $tertiary-accent-bg;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: lighten($tertiary-accent-bg, 5%);
|
||||
@include button-color(lighten($tertiary-accent-bg, 10%));
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
font-size: 1.1rem;
|
||||
padding: 1rem $padding-default;
|
||||
}
|
||||
|
||||
.info {
|
||||
background: $info-bg;
|
||||
color: $info-fg;
|
||||
a {
|
||||
color: darken($info-fg, 10%);
|
||||
&:hover {
|
||||
color: $info-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-reverse {
|
||||
color: $info-bg;
|
||||
}
|
||||
|
||||
.notice {
|
||||
background: $tertiary-accent-bg;
|
||||
color: $tertiary-accent-fg;
|
||||
a {
|
||||
color: darken($tertiary-accent-fg, 10%);
|
||||
&:hover {
|
||||
color: $tertiary-accent-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
background: $notice-bg;
|
||||
color: $notice-fg;
|
||||
a {
|
||||
color: darken($notice-fg, 10%);
|
||||
&:hover {
|
||||
color: $notice-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
font-size: 0.9rem;
|
||||
font-family: $font-family-default;
|
||||
font-weight: 700;
|
||||
border-radius: 10px;
|
||||
padding: 0px 6px;
|
||||
min-width: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
// Your custom SCSS should be written here...
|
||||
|
||||
@@ -0,0 +1,234 @@
|
||||
/* The MIT License */
|
||||
|
||||
$preview-width: 150px;
|
||||
$preview-height: 100px;
|
||||
$success-color: lighten($secondary-accent-bg,10%);
|
||||
$error-color: #D55A4E;
|
||||
|
||||
.form-uploads-wrapper h3 {
|
||||
font-size: 1rem;
|
||||
margin: 2rem 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
position: relative;
|
||||
border: 1px $form-border solid;
|
||||
border-radius: $form-border-radius;
|
||||
min-height: 4rem;
|
||||
background: $white;
|
||||
|
||||
&.dz-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.dz-drag-hover {
|
||||
border-color: rgba(0,0,0,0.15);
|
||||
background: rgba(0,0,0,0.04);
|
||||
}
|
||||
&.dz-started .dz-message {
|
||||
display: none;
|
||||
}
|
||||
.dz-message {
|
||||
opacity: 1;
|
||||
-ms-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
.dz-preview {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 1rem;
|
||||
vertical-align: top;
|
||||
|
||||
&.dz-file-preview [data-dz-thumbnail] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.dz-error .dz-error-mark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.dz-success .dz-success-mark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dz-success-mark, .dz-error-mark {
|
||||
color: $white;
|
||||
font-family: FontAwesome;
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.dz-success-mark, .dz-error-mark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dz-success-mark {
|
||||
background-color: $success-color;
|
||||
&::after {
|
||||
content: '\f00c';
|
||||
}
|
||||
}
|
||||
|
||||
.dz-error-mark {
|
||||
background-color: $error-color;
|
||||
&::after {
|
||||
content: '\f12a';
|
||||
}
|
||||
}
|
||||
|
||||
.dz-progress {
|
||||
position: absolute;
|
||||
top: $preview-height;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 4px;
|
||||
background: #d7d7d7;
|
||||
display: none;
|
||||
|
||||
.dz-upload {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 0%;
|
||||
background-color: $success-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dz-error-message {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.2;
|
||||
padding: 8px 10px;
|
||||
background: lighten($content-bg,3%);
|
||||
color: $error-color;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
&.dz-processing .dz-progress {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover:not(.hide-backface) .dz-details img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover.dz-error .dz-error-message {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dz-remove, .dz-insert {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .dz-remove, &:hover .dz-insert {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 22px;
|
||||
border:1px solid darken($content-bg,5%);
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
&:hover {
|
||||
background: $content-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .dz-remove {
|
||||
left: inherit;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
&:hover .dz-insert {
|
||||
right: inherit;
|
||||
}
|
||||
|
||||
&.dz-processing {
|
||||
.dz-details {
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
-webkit-transform: translate(-50%,-50%);
|
||||
-ms-transform: translate(-50%,-50%);
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dz-details {
|
||||
width: $preview-width;
|
||||
height: $preview-height;
|
||||
position: relative;
|
||||
background: lighten($content-bg,3%);
|
||||
border:1px solid darken($content-bg,5%);
|
||||
font-size: 0.8rem;
|
||||
padding: 5px;
|
||||
margin-bottom: 22px;
|
||||
|
||||
.dz-filename {
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $preview-width;
|
||||
height: $preview-height;
|
||||
}
|
||||
|
||||
.dz-size {
|
||||
position: absolute;
|
||||
bottom: -28px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
&.dz-clickable {
|
||||
.dz-message, .dz-message span {
|
||||
cursor: pointer;
|
||||
color: lighten($content-fg,30%);
|
||||
text-align: center;
|
||||
font-size: 1.4rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
}
|
||||
* {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
// Grav Editor
|
||||
.grav-mdeditor {
|
||||
|
||||
.CodeMirror-scroll {
|
||||
margin-right: -36px;
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.grav-mdeditor-fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1500;
|
||||
|
||||
.grav-mdeditor-content, .grav-mdeditor-code, .CodeMirror-wrap, .grav-mdeditor-preview {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.grav-mdeditor-navbar, .grav-mdeditor-navbar ul li:first-child a, .grav-mdeditor-navbar-flip ul li:last-child a {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grav-mdeditor-navbar {
|
||||
@include clearfix;
|
||||
border: 1px solid $form-border;
|
||||
border-top-right-radius: $form-border-radius;
|
||||
border-top-left-radius: $form-border-radius;
|
||||
background: lighten($content-bg,5%);
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
|
||||
|
||||
li {
|
||||
float: left;
|
||||
&:first-child a {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
}
|
||||
.mdeditor-active a {
|
||||
background: white;
|
||||
cursor: auto;
|
||||
border-left: 1px solid $form-border;
|
||||
border-right: 1px solid $form-border;
|
||||
&:hover {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
line-height: 3rem;
|
||||
height: 3rem;
|
||||
padding: 0 1rem;
|
||||
color: $content-fg;
|
||||
|
||||
&:hover {
|
||||
background: lighten($content-bg,2%);
|
||||
color: darken($content-fg,10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.grav-mdeditor-navbar-nav {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.grav-mdeditor-navbar-flip {
|
||||
float: right;
|
||||
ul li:last-child a {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.grav-mdeditor-content {
|
||||
|
||||
@include clearfix;
|
||||
border: 1px solid $form-border;
|
||||
border-top: 0;
|
||||
border-bottom-right-radius: $form-border-radius;
|
||||
border-bottom-left-radius: $form-border-radius;
|
||||
}
|
||||
|
||||
.grav-mdeditor-code {
|
||||
|
||||
|
||||
|
||||
.CodeMirror {
|
||||
padding: 10px 20px 20px 20px;
|
||||
border-bottom-left-radius: $form-border-radius;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.grav-mdeditor-preview {
|
||||
padding: 20px;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
background: #fbfbfb;
|
||||
border-bottom-right-radius: $form-border-radius;
|
||||
}
|
||||
|
||||
.grav-mdeditor-navbar {
|
||||
p {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#admin-main {
|
||||
.grav-mdeditor-preview {
|
||||
font-family: $font-family-default;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: darken($content-fg, 10%);
|
||||
}
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
border: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.1rem
|
||||
}
|
||||
p, h1 {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-mode=tab] {
|
||||
&[data-active-tab=code] .grav-mdeditor-preview, &[data-active-tab=preview] .grav-mdeditor-code {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-mode=split] {
|
||||
.grav-mdeditor-button-code, .grav-mdeditor-button-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.grav-mdeditor-code {
|
||||
border-right: 1px solid $form-border;
|
||||
|
||||
&, .grav-mdeditor-preview {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CodeMirror Theme
|
||||
.cm-s-paper {
|
||||
|
||||
$paper-fg: darken($content-fg,5%);
|
||||
$tag: #349886;
|
||||
|
||||
&.CodeMirror {
|
||||
color: $paper-fg;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
|
||||
pre {
|
||||
font-family: "DejaVu Sans Mono", Menlo, Monaco, Consolas, Courier, monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.cm-link {color: darken($core-accent, 10%);}
|
||||
.cm-comment {color: lighten($paper-fg,10%);}
|
||||
.cm-header {color: darken($paper-fg,10%);}
|
||||
.cm-strong {color: darken($paper-fg,5%);}
|
||||
.cm-em {color: darken($paper-fg, 10%);}
|
||||
.cm-string {color: $core-accent;}
|
||||
.cm-tag {color: $tag}
|
||||
.cm-bracket {color: lighten($tag, 10%);}
|
||||
.cm-variable {color: darken($paper-fg,10%);}
|
||||
.cm-variable-2 {color: lighten($paper-fg,10%);}
|
||||
.cm-variable-3 {color: lighten($paper-fg,15%);}
|
||||
.cm-hr {color: lighten($paper-fg,40%);font-weight: bold;}
|
||||
|
||||
.cm-keyword {color: $core-accent;}
|
||||
.cm-atom {color: $info-bg;}
|
||||
.cm-meta {color: $paper-fg;}
|
||||
|
||||
.cm-number {color: #7f8c8d;}
|
||||
.cm-def {color: #00f;}
|
||||
.cm-variable {color: black;}
|
||||
.cm-variable-2 {color: #555;}
|
||||
.cm-variable-3 {color: #085;}
|
||||
.cm-property {color: black;}
|
||||
.cm-operator {color: black;}
|
||||
|
||||
|
||||
.cm-string-2 {color: #f50;}
|
||||
.cm-meta {color: #555;}
|
||||
.cm-error {color: #f00;}
|
||||
.cm-qualifier {color: #555;}
|
||||
.cm-builtin {color: #555;}
|
||||
|
||||
|
||||
.cm-attribute {color: #7f8c8d;}
|
||||
|
||||
.cm-quote {color: #888;}
|
||||
|
||||
|
||||
.cm-header-1 {font-size: 140%;}
|
||||
.cm-header-2 {font-size: 120%;}
|
||||
.cm-header-3 {font-size: 110%;}
|
||||
|
||||
.cm-negative {color: #d44;}
|
||||
.cm-positive {color: #292;}
|
||||
.cm-header, .cm-strong {font-weight: bold;}
|
||||
.cm-em {font-style: italic;}
|
||||
.cm-link {text-decoration: underline;}
|
||||
|
||||
.cm-invalidchar {color: #f00;}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
// Error specific styling
|
||||
#error {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding-bottom: 6rem;
|
||||
|
||||
h1 {
|
||||
font-size: $core-font-size + 4.0rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.default-animation {
|
||||
@include transition(all 0.5s ease);
|
||||
}
|
||||
|
||||
.default-border-radius {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.default-glow-shadow {
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.default-box-shadow {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.padding-horiz {
|
||||
padding-left: $padding-horiz;
|
||||
padding-right: $padding-horiz;
|
||||
@include breakpoint(desktop-only) {
|
||||
padding-left: $padding-horiz - 3rem;
|
||||
padding-right: $padding-horiz - 3rem;
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
padding-left: $padding-horiz - 6rem;
|
||||
padding-right: $padding-horiz - 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-vert {
|
||||
padding-top: $padding-vert;
|
||||
padding-bottom: $padding-vert;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
// Import Google Web Fonts
|
||||
@import url(//fonts.googleapis.com/css?family=Montserrat:400|Lato:300,400,700|Ubuntu+Mono:400,700);
|
||||
|
||||
@@ -0,0 +1,535 @@
|
||||
|
||||
|
||||
// fieldset {
|
||||
// border: 1px solid $core-border-color;
|
||||
// }
|
||||
|
||||
// textarea, #{$all-text-inputs}, select[multiple=multiple] {
|
||||
// background-color: white;
|
||||
// border: 1px solid $core-border-color;
|
||||
// box-shadow: $core-box-shadow;
|
||||
|
||||
// &:hover {
|
||||
// border-color: $core-border-color-hover;
|
||||
// }
|
||||
|
||||
// &:focus {
|
||||
// border-color: $core-border-color-focus;
|
||||
// box-shadow: $core-box-shadow-focus;
|
||||
// }
|
||||
// }
|
||||
|
||||
// label {
|
||||
// @extend strong;
|
||||
// }
|
||||
|
||||
// Forms
|
||||
$form-label-width: 30%;
|
||||
$form-border: darken($content-bg,10%);
|
||||
$form-border-radius: 4px;
|
||||
$form-border-width: 1px;
|
||||
$form-label-pad: 5px 0 5px 3rem;
|
||||
$form-input-pad: 5px 10px;
|
||||
$form-select-pad: 5px 30px 5px 10px;
|
||||
|
||||
// Load Third Party Libraries
|
||||
@import "template/modules/toggle-switch";
|
||||
|
||||
form {
|
||||
|
||||
h1 {
|
||||
color: $page-bg;
|
||||
padding: 0 $padding-default 0.5rem;
|
||||
margin: 0 0 1rem;
|
||||
border-bottom: 3px solid darken($content-bg, 5%);
|
||||
font-size: 1.5rem;
|
||||
text-align: left;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0 $padding-default;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 1.5rem 3rem;
|
||||
}
|
||||
|
||||
.note {
|
||||
font-family: $font-family-default;
|
||||
color: $notice-bg;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
margin-bottom: 1rem;
|
||||
padding-left: $padding-default;
|
||||
}
|
||||
|
||||
.form-data {
|
||||
padding-right: $padding-default;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: $secondary-link;
|
||||
font-family: helvetica, arial;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
font-size: 30px;
|
||||
margin-left: 5px;
|
||||
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 5px 0;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
|
||||
&.toggleable {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
input, select, textarea, button, .selectize-input {
|
||||
font-family: $font-family-default;
|
||||
font-size: $core-font-size;
|
||||
line-height: $core-line-height;
|
||||
border-radius: $form-border-radius;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.selectize-dropdown {
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
// override horizontal layout
|
||||
.form-column {
|
||||
> .form-field.grid {
|
||||
display: block;
|
||||
> .block {
|
||||
@include flex(0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// vertical alignment of forms
|
||||
.grid.vertical {
|
||||
@include flex-flow(column);
|
||||
}
|
||||
|
||||
.form-select-wrapper, .selectize-control.single .selectize-input {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
margin-top: 0;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
content: '\f078';
|
||||
font-family: 'FontAwesome';
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
line-height: 0;
|
||||
color: lighten($content-fg,15%);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-control {
|
||||
height: 39px;
|
||||
}
|
||||
|
||||
.selectize-input {
|
||||
box-shadow: none;
|
||||
color: $content-fg;
|
||||
padding: $form-select-pad;
|
||||
margin: 0;
|
||||
|
||||
> input {
|
||||
font-size: $core-font-size;
|
||||
line-height: $core-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.selectize-control.multi .selectize-input {
|
||||
|
||||
padding: ($leading-margin / 4) ($leading-margin / 4);
|
||||
|
||||
&.has-items {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
> div {
|
||||
color: $content-fg;
|
||||
// background: $content-bg;
|
||||
border-radius: 2px;
|
||||
line-height: 1.5;
|
||||
&.active {
|
||||
background: darken($content-bg,10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-control.single .selectize-input {
|
||||
|
||||
&:after {
|
||||
right: 27px;
|
||||
}
|
||||
&.dropdown-active {
|
||||
&:after {
|
||||
content: '\f077';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.x-small {
|
||||
|
||||
max-width: 5rem !important;
|
||||
|
||||
}
|
||||
|
||||
.small {
|
||||
|
||||
max-width: 10rem !important;
|
||||
|
||||
}
|
||||
|
||||
.medium {
|
||||
|
||||
max-width: 20rem;
|
||||
|
||||
textarea {
|
||||
height: 7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.large {
|
||||
|
||||
max-width: 30rem !important;
|
||||
|
||||
textarea {
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
border: $form-border-width solid $form-border;
|
||||
background: $white;
|
||||
-webkit-appearance:none;
|
||||
-moz-appearance:none;
|
||||
appearance:none;
|
||||
padding: $form-select-pad;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type=text], input[type=password], input[type=email] {
|
||||
width: 100%;
|
||||
border: $form-border-width solid $form-border;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
input[readonly=readonly] {
|
||||
background: darken($white, 5%);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
border: $form-border-width solid $form-border;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.form-frontmatter-wrapper {
|
||||
border: $form-border-width solid $form-border;
|
||||
border-radius: $form-border-radius;
|
||||
}
|
||||
|
||||
|
||||
// input[type=text] {
|
||||
// width: 65%;
|
||||
// border: $form-border-width solid $form-border;
|
||||
// padding: $form-input-pad;
|
||||
// }
|
||||
|
||||
// input[type=date] {
|
||||
// width: 200px;
|
||||
// border: $form-border-width solid $form-border;
|
||||
// padding: $form-input-pad;
|
||||
// }
|
||||
|
||||
|
||||
// textarea {
|
||||
// width: 65%;
|
||||
// height: 100px;
|
||||
// border: $form-border-width solid $form-border;
|
||||
// padding: $form-input-pad;
|
||||
// }
|
||||
|
||||
|
||||
.switch-toggle {
|
||||
// margin-left: 30%;
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a,label {
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dynfields, [data-grav-field="array"] {
|
||||
|
||||
input[type=text] {
|
||||
width: 40%;
|
||||
float: left;
|
||||
margin: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: inline-block;
|
||||
span {
|
||||
padding: 0.5rem;
|
||||
display: inline-block;
|
||||
line-height: 1.7;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.array-field-value_only {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
margin-top: 1rem;
|
||||
background: lighten($form-border,7%);
|
||||
padding: 1.2rem 3rem;
|
||||
width: 100%;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.checkboxes {
|
||||
display: inline-block;
|
||||
padding: 5px 0;
|
||||
|
||||
label {
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 0 0 0 2rem;
|
||||
margin-right: 15px;
|
||||
|
||||
}
|
||||
label:before {
|
||||
content:"";
|
||||
display: inline-block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -0.75rem;
|
||||
margin-right: 10px;
|
||||
position: absolute;
|
||||
|
||||
background: $white;
|
||||
border: $form-border-width solid $form-border;
|
||||
border-radius: $form-border-radius;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
display: none;
|
||||
}
|
||||
input[type=checkbox]:checked + label:before {
|
||||
content:"\f00c";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.toggleable label{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Display
|
||||
.form-display-wrapper {
|
||||
p {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// YAML CodeMirror
|
||||
.form-frontmatter-wrapper {
|
||||
margin-bottom: 3rem;
|
||||
|
||||
.dragbar {
|
||||
height:4px;
|
||||
background: $form-border;
|
||||
cursor:row-resize;
|
||||
}
|
||||
}
|
||||
|
||||
#frontmatter {
|
||||
& + .CodeMirror {
|
||||
border-radius: $form-border-radius;
|
||||
padding: 10px;
|
||||
height: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
// Sortables
|
||||
.form-order-wrapper {
|
||||
ul#ordering {
|
||||
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
padding: 0.2rem 1rem;
|
||||
border-radius: $form-border-radius;
|
||||
border: 1px solid $form-border;
|
||||
background: lighten($content-bg, 4%);
|
||||
color: lighten($content-fg,10%);
|
||||
margin: 3px 0;
|
||||
position: relative;
|
||||
font-family: $font-family-default;
|
||||
|
||||
&.drag-handle {
|
||||
cursor: move;
|
||||
background: lighten($content-bg, 7%);
|
||||
color: darken($content-fg,10%);
|
||||
&::after {
|
||||
content: '\f0c9';
|
||||
font-family: FontAwesome;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sortables
|
||||
.form-list-wrapper {
|
||||
ul[data-collection-holder] {
|
||||
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
cursor: move;
|
||||
padding: 1rem;
|
||||
border-radius: $form-border-radius;
|
||||
border: 1px solid $form-border;
|
||||
background: lighten($content-bg, 4%);
|
||||
color: lighten($content-fg,10%);
|
||||
margin: 3px 0;
|
||||
position: relative;
|
||||
font-family: $font-family-default;
|
||||
|
||||
.item-actions {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 4px;
|
||||
color: darken($content-fg,10%);
|
||||
|
||||
.fa-bars {
|
||||
}
|
||||
|
||||
.fa-trash-o {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collection-actions {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.form-label.block {
|
||||
z-index: 10000;
|
||||
|
||||
&:hover {
|
||||
z-index: 10005;
|
||||
}
|
||||
}
|
||||
|
||||
// Fieldset
|
||||
#admin-main .admin-block h2 {
|
||||
font-size: 1.25rem;
|
||||
margin: 0 0 .5rem;
|
||||
|
||||
letter-spacing: normal;
|
||||
}
|
||||
.form-fieldset {
|
||||
background-color: #f7f7f7;
|
||||
border: 2px solid #e1e1e1;
|
||||
margin: 1rem 2rem;
|
||||
}
|
||||
|
||||
.form-fieldset--label {
|
||||
background-color: #f3f3f3;
|
||||
|
||||
&:hover,
|
||||
.form-fieldset input:checked + & {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
label {
|
||||
display: table;
|
||||
font-size: 1.25rem;
|
||||
padding: .5rem 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.actions {
|
||||
font-size: initial;
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& + .form-data {
|
||||
margin-top: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.form-fieldset--cursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-fieldset--info {
|
||||
font-size: small;
|
||||
}
|
||||
.form-fieldset > input:checked ~ .form-data,
|
||||
.form-fieldset--collapsible .open,
|
||||
.form-fieldset input:checked ~ .form-label .form-fieldset--collapsible .close {
|
||||
display: block;
|
||||
}
|
||||
.form-fieldset > .form-data,
|
||||
.form-fieldset--collapsible .close,
|
||||
.form-fieldset input:checked ~ .form-label .form-fieldset--collapsible .open {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
.gpm {
|
||||
|
||||
> table > tbody {
|
||||
> tr {
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
td {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.gpm-name {
|
||||
white-space: nowrap;
|
||||
color: lighten($content-fg, 25%);
|
||||
}
|
||||
|
||||
.gpm-version {
|
||||
padding-left:0.5rem;
|
||||
color: lighten($content-fg,10%);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.gpm-update {
|
||||
.gpm-name {
|
||||
color: $secondary-accent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.gpm-actions {
|
||||
|
||||
.enabled, .disabled {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: lighten($content-fg,10%);
|
||||
}
|
||||
}
|
||||
|
||||
.gpm-item-info {
|
||||
position: relative;
|
||||
border-bottom: 3px solid darken($content-bg, 5%);
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
overflow: hidden;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.gpm-item-icon {
|
||||
color: darken($content-bg, 3%);
|
||||
position: absolute;
|
||||
right: $padding-default;
|
||||
font-size: 20rem;
|
||||
}
|
||||
table {
|
||||
position: relative;
|
||||
}
|
||||
td {
|
||||
border: 0;
|
||||
text-align: left !important;
|
||||
|
||||
&:first-child {
|
||||
color: lighten($content-fg,15%);
|
||||
white-space: nowrap;
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
tr:hover {
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.badge.update {
|
||||
display: inline-block;
|
||||
background: $info-bg;
|
||||
border-radius: 4px;
|
||||
padding: 2px 10px;
|
||||
color: $info-fg;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.gpm-ribbon {
|
||||
background-color: $info-bg;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: -2rem;
|
||||
@include transform(rotate(45deg));
|
||||
|
||||
|
||||
a {
|
||||
color: $info-fg;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
font-size: 0.9rem;
|
||||
padding: 5px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.themes {
|
||||
padding: $padding-default;
|
||||
|
||||
.gpm-name {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.gpm-actions {
|
||||
|
||||
background: darken($content-bg, 2%);
|
||||
margin: 1rem -1rem -1rem -1rem;
|
||||
height: 4rem;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.active-theme .gpm-actions, &.inactive-theme .gpm-actions {
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.active-theme {
|
||||
border: 1px solid $secondary-accent-bg;
|
||||
.gpm-actions {
|
||||
background: $secondary-accent-bg;
|
||||
color: $content-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.inactive-theme .gpm-actions {
|
||||
display: block;
|
||||
color: darken($content-bg, 30%);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
// Header styling
|
||||
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
#admin-login {
|
||||
@extend %vertical-align;
|
||||
background: $accent-bg;
|
||||
max-width: 24rem;
|
||||
margin: 0 auto;
|
||||
|
||||
.form-field {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-data {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
background: $darker-accent-bg url(../images/logo.png) 50% 50% no-repeat;
|
||||
font-size: 0;
|
||||
color: transparent;
|
||||
height: 216px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 2rem 3rem;
|
||||
input {
|
||||
margin-bottom: 2rem;
|
||||
background: $page-bg;
|
||||
color: $core-text;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
-webkit-font-smoothing: auto;
|
||||
border: 1px solid shade($accent-bg, 20%);
|
||||
@include placeholder {
|
||||
color: tint($page-bg,40%);
|
||||
}
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
text-align: center;
|
||||
margin: 0 -3rem -3rem -3rem;
|
||||
padding: 1.5rem 3rem;
|
||||
|
||||
button:first-child {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
text-align: center;
|
||||
padding: 1rem 3rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,307 @@
|
||||
.pages-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
border-top: 1px solid darken($content-bg, 5%);
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
.row {
|
||||
@include transition(all 0.2s ease);
|
||||
border-bottom: 1px solid darken($content-bg, 5%);
|
||||
line-height: 2.5rem;
|
||||
padding-right: 3rem;
|
||||
|
||||
&:hover {
|
||||
background: lighten($content-bg,2%);
|
||||
}
|
||||
|
||||
p.page-route {
|
||||
display: block;
|
||||
margin: -10px 0 5px 25px;
|
||||
line-height: 1;
|
||||
font-size: 0.9rem;
|
||||
color: darken($content-bg,40%);
|
||||
text-shadow: 1px 1px 0 $white;
|
||||
|
||||
.spacer {
|
||||
color: darken($content-bg,10%);
|
||||
display: inline-block;
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
// fix for hint alignment
|
||||
.hint--bottom:before, .hint--bottom:after {
|
||||
left: 4px;
|
||||
}
|
||||
.hint:after, [data-hint]:after {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.badge.lang {
|
||||
background-color: #aaa;
|
||||
color: white;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.badge.lang.info {
|
||||
background-color: $info-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.page-tools {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
font-size: 1.4rem;
|
||||
i {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-home {
|
||||
font-size: 1.4rem;
|
||||
margin-left: 10px;
|
||||
color: darken($content-bg, 20%);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 1.1rem;
|
||||
margin-left: 10px;
|
||||
color: darken($content-bg, 20%);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.page-icon {
|
||||
|
||||
color: #0082BA;
|
||||
font-weight: 700;
|
||||
|
||||
&.children-open:before {
|
||||
content: '\f056';
|
||||
}
|
||||
|
||||
&.children-closed:before{
|
||||
content: '\f055';
|
||||
}
|
||||
|
||||
&.not-routable {
|
||||
color: #CE431D;
|
||||
}
|
||||
|
||||
&.not-visible {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&.modular {
|
||||
color: #9055AF;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#page-filtering {
|
||||
margin: -2rem $padding-default 1rem;
|
||||
@include clearfix;
|
||||
|
||||
.page-filters {
|
||||
width: 60%;
|
||||
float: left;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.page-search {
|
||||
position: relative;
|
||||
width: 40%;
|
||||
float: left;
|
||||
padding-left: 2rem;
|
||||
text-indent: 2.5rem;
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
content: '\f002';
|
||||
font-family: 'FontAwesome';
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
width: 100%;
|
||||
padding-top: 1rem;
|
||||
padding-left: 0rem;
|
||||
|
||||
&:after {
|
||||
top: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-shortcuts {
|
||||
@include clearfix;
|
||||
clear: both;
|
||||
padding-top:5px;
|
||||
|
||||
.button {
|
||||
@include button-color(#aaa);
|
||||
}
|
||||
}
|
||||
|
||||
.selectize-control.multi .selectize-input {
|
||||
|
||||
padding: ($leading-margin / 4) ($leading-margin / 4);
|
||||
|
||||
&.has-items {
|
||||
padding-top: 6px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: $core-font-size;
|
||||
line-height: $core-line-height;
|
||||
}
|
||||
|
||||
|
||||
> div, > div.active {
|
||||
color: #777;
|
||||
padding: 2px 10px;
|
||||
&[data-value='Routable'] {
|
||||
background: #CE431D;
|
||||
color: $white;
|
||||
}
|
||||
&[data-value='NonRoutable'] {
|
||||
color: #CE431D;
|
||||
}
|
||||
&[data-value='Visible'] {
|
||||
background: #71B15E;
|
||||
color: $white;
|
||||
}
|
||||
&[data-value='NonVisible'] {
|
||||
color: #71B15E;
|
||||
}
|
||||
&[data-value='Modular'] {
|
||||
background: #9055AF;
|
||||
color: $white;
|
||||
}
|
||||
&[data-value='NonModular'] {
|
||||
color: #9055AF;
|
||||
}
|
||||
&[data-value='Published'] {
|
||||
background: #0093B8;
|
||||
color: $white;
|
||||
}
|
||||
&[data-value='NonPublished'] {
|
||||
color: #0093B8;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.admin-form-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#admin-topbar {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
height: 3.5rem;
|
||||
|
||||
@include breakpoint(mobile-only){
|
||||
width: 100%;
|
||||
right: 0;
|
||||
top: .25rem;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
#admin-mode-toggle, #admin-lang-toggle {
|
||||
@extend %vertical-align;
|
||||
height: 37px;
|
||||
display: inline-block;
|
||||
vertical-align: inherit;
|
||||
|
||||
@include breakpoint(mobile-only){
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#admin-lang-toggle {
|
||||
z-index:10;
|
||||
button {
|
||||
@include button-color(shade($info-bg, 20%));
|
||||
}
|
||||
.dropdown-menu {
|
||||
background: $info-bg;
|
||||
button {
|
||||
|
||||
background: transparent;
|
||||
color: $white;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-grav {
|
||||
|
||||
border: 0;
|
||||
background-color: lighten($accent-bg,10%);
|
||||
}
|
||||
|
||||
.switch-toggle {
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input:checked + label {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
input + label {
|
||||
color: lighten($accent-bg,65%);
|
||||
}
|
||||
|
||||
input.highlight:checked {
|
||||
~ a {
|
||||
background: lighten($tertiary-accent-bg,10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
body .selectize-dropdown .optgroup-header {
|
||||
color: $black;
|
||||
border-bottom: 1px solid #eee;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
@for $i from 0 to 10 {
|
||||
.depth-#{$i} .row {
|
||||
padding-left: 3rem * ($i + 1);
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
.switch-toggle input[type="radio"] {
|
||||
display: none!important;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
#phpinfo {
|
||||
img { display: none;}
|
||||
|
||||
table {
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
|
||||
td {
|
||||
word-wrap: break-word;
|
||||
|
||||
h1 {
|
||||
margin: 0rem (- $padding-default) 0rem !important;
|
||||
}
|
||||
&:first-child {
|
||||
color: $secondary-accent-bg;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
hr {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.3rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.7rem;
|
||||
margin: 3rem ($padding-default) 0rem !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
/*
|
||||
* Remodal - v0.2.0
|
||||
* Flat, responsive, lightweight, easy customizable modal window plugin with declarative state notation and hash tracking.
|
||||
* http://vodkabears.github.io/remodal/
|
||||
*
|
||||
* Made by Ilya Makarov
|
||||
* Under MIT License
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Remodal necessary styles
|
||||
========================================================================== */
|
||||
|
||||
/* Hide scroll bar */
|
||||
|
||||
html.remodal_lock, body.remodal_lock {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Anti FOUC */
|
||||
|
||||
.remodal, [data-remodal-id] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Overlay necessary styles */
|
||||
|
||||
.remodal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
|
||||
display: none;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
margin-left: -0.05em;
|
||||
content: '';
|
||||
}
|
||||
|
||||
/* Fix iPad, iPhone glitches */
|
||||
> * {
|
||||
-webkit-transform: translateZ(0px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Modal dialog necessary styles */
|
||||
.remodal {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Background for effects */
|
||||
|
||||
.remodal-bg {
|
||||
@include transition-property (filter);
|
||||
@include transition-duration(0.2s);
|
||||
@include transition-timing-function(linear);
|
||||
}
|
||||
|
||||
// body.remodal_active .remodal-bg {
|
||||
// @include filter(blur(5px));
|
||||
// }
|
||||
|
||||
/* Overlay default theme styles */
|
||||
|
||||
.remodal-overlay {
|
||||
opacity: 0;
|
||||
background: rgba(33, 36, 46, 0.8);
|
||||
@include transition(opacity 0.2s linear);
|
||||
}
|
||||
|
||||
body.remodal_active .remodal-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Modal dialog default theme styles */
|
||||
|
||||
.remodal {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding-top: 2rem;
|
||||
@include box-sizing(border-box);
|
||||
font-size: 16px;
|
||||
background: $content-bg;
|
||||
background-clip: padding-box;
|
||||
color: $content-fg;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
|
||||
@include transform(scale(0.95));
|
||||
@include transition-property (transform);
|
||||
@include transition-duration(0.2s);
|
||||
@include transition-timing-function(linear);
|
||||
|
||||
}
|
||||
|
||||
body.remodal_active .remodal {
|
||||
@include transform(scale(1));
|
||||
}
|
||||
|
||||
/* Modal dialog vertical align */
|
||||
.remodal, .remodal-overlay:after {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Close button */
|
||||
|
||||
.remodal-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: $content-fg;
|
||||
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
|
||||
@include transition(background 0.2s linear);
|
||||
}
|
||||
|
||||
.remodal-close:after {
|
||||
display: block;
|
||||
font-family: FontAwesome;
|
||||
content: "\f00d";
|
||||
|
||||
font-size: 28px;
|
||||
line-height: 28px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.remodal-close:hover, .remodal-close:active {
|
||||
color: darken($content-fg, 20%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Media queries
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (min-width: 40.063em) /* min-width 641px */ {
|
||||
.remodal {
|
||||
max-width: 700px;
|
||||
margin: 20px auto;
|
||||
min-height: 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
table,
|
||||
tbody,
|
||||
thead {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gpm-details {
|
||||
width: 100%;
|
||||
@include flex(auto);
|
||||
}
|
||||
|
||||
td {
|
||||
border: 0;
|
||||
border-bottom: 1px solid darken($content-bg, 5%);
|
||||
}
|
||||
|
||||
tr {
|
||||
@include transition(all 0.2s ease);
|
||||
|
||||
@include display(flex);
|
||||
@include flex-wrap(wrap);
|
||||
|
||||
th {
|
||||
display: block;
|
||||
@include flex(1);
|
||||
font-weight: bold;
|
||||
|
||||
&:first-child {
|
||||
padding-left: $padding-default;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: $padding-default;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
display: block;
|
||||
@include flex(1);
|
||||
|
||||
&.double {
|
||||
@include flex(2);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: $padding-default;
|
||||
|
||||
@include breakpoint(mobile-only) {
|
||||
padding-left: .5rem;
|
||||
|
||||
.plugin-update-button {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:last-child, &.gpm-actions {
|
||||
padding-right: $padding-default;
|
||||
}
|
||||
|
||||
&.gpm-actions {
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
|
||||
.gpm-details-expand {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.gpm-details {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
@include breakpoint(mobile-only){
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
> .table-wrapper {
|
||||
display: none;
|
||||
|
||||
td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: lighten($content-bg,2%);
|
||||
}
|
||||
}
|
||||
|
||||
//Fixes for Kendo calendar on Firefox
|
||||
.k-calendar-container {
|
||||
table,
|
||||
tbody,
|
||||
thead {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
thead {
|
||||
th:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
th:last-child {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
|
||||
$tab-label-height:3.5em;
|
||||
|
||||
.tab-bar {
|
||||
@include clearfix;
|
||||
|
||||
|
||||
background: $accent-bg;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
font-family: $font-family-header;
|
||||
|
||||
li {
|
||||
|
||||
display: block;
|
||||
float: left;
|
||||
height: $tab-label-height;
|
||||
&.active {
|
||||
span, a {
|
||||
background: $content-bg;
|
||||
color: $content-fg;
|
||||
}
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
width: 100%;
|
||||
span, a {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span, a {
|
||||
@extend .default-animation;
|
||||
display: inline-block;
|
||||
padding: 0 4rem;
|
||||
line-height: $tab-label-height;
|
||||
color: lighten($accent-bg,65%);
|
||||
&:hover {
|
||||
color: $white;
|
||||
background: darken($accent-bg,10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* used for wrapper animation after the load of the page */
|
||||
@include keyframes(show) {
|
||||
from {
|
||||
opacity:0;
|
||||
}
|
||||
to {
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-tabs {
|
||||
|
||||
background: $accent-bg;
|
||||
font-family: $font-family-header;
|
||||
margin-top: -4rem;
|
||||
|
||||
@include breakpoint(mobile-only){
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
> input[type=radio] {
|
||||
display:none;
|
||||
|
||||
&:checked{
|
||||
+ label {
|
||||
background: $content-bg;
|
||||
color: $content-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
> label {
|
||||
@extend .default-animation;
|
||||
|
||||
display:inline-block;
|
||||
cursor:pointer;
|
||||
color: lighten($accent-bg,65%);
|
||||
|
||||
height: $tab-label-height;
|
||||
|
||||
text-align:center;
|
||||
line-height: $tab-label-height;
|
||||
padding: 0 2rem;
|
||||
|
||||
@include breakpoint(mobile-only){
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background: lighten($accent-bg,3%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.tab-body {
|
||||
position:absolute;
|
||||
top:-9999px;
|
||||
opacity:0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-body-wrapper {
|
||||
padding-top: $tab-label-height;
|
||||
background: $content-bg;
|
||||
|
||||
}
|
||||
|
||||
#tab1:checked ~ .tab-body-wrapper #tab-body-1,
|
||||
#tab2:checked ~ .tab-body-wrapper #tab-body-2,
|
||||
#tab3:checked ~ .tab-body-wrapper #tab-body-3,
|
||||
#tab4:checked ~ .tab-body-wrapper #tab-body-4,
|
||||
#tab5:checked ~ .tab-body-wrapper #tab-body-5,
|
||||
#tab6:checked ~ .tab-body-wrapper #tab-body-6,
|
||||
#tab7:checked ~ .tab-body-wrapper #tab-body-7,
|
||||
#tab8:checked ~ .tab-body-wrapper #tab-body-8,
|
||||
#tab9:checked ~ .tab-body-wrapper #tab-body-9,
|
||||
#tab10:checked ~ .tab-body-wrapper #tab-body-10 {
|
||||
position:relative;
|
||||
top:0px;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
.toast-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.toast-message {
|
||||
-ms-word-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.toast-message a,
|
||||
.toast-message label {
|
||||
color: #ffffff;
|
||||
}
|
||||
.toast-message a:hover {
|
||||
color: #cccccc;
|
||||
text-decoration: none;
|
||||
}
|
||||
.toast-close-button {
|
||||
position: relative;
|
||||
right: -0.3em;
|
||||
top: -0.3em;
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
-webkit-text-shadow: 0 1px 0 #ffffff;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
opacity: 0.8;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
filter: alpha(opacity=80);
|
||||
}
|
||||
.toast-close-button:hover,
|
||||
.toast-close-button:focus {
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
|
||||
filter: alpha(opacity=40);
|
||||
}
|
||||
/*Additional properties for button version
|
||||
iOS requires the button element instead of an anchor tag.
|
||||
If you want the anchor version, it requires `href="#"`.*/
|
||||
button.toast-close-button {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
//.toast-top-center {
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// width: 100%;
|
||||
//}
|
||||
//.toast-bottom-center {
|
||||
// bottom: 0;
|
||||
// right: 0;
|
||||
// width: 100%;
|
||||
//}
|
||||
//.toast-top-full-width {
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// width: 100%;
|
||||
//}
|
||||
//.toast-bottom-full-width {
|
||||
// bottom: 0;
|
||||
// right: 0;
|
||||
// width: 100%;
|
||||
//}
|
||||
//.toast-top-left {
|
||||
// top: 12px;
|
||||
// left: 12px;
|
||||
//}
|
||||
.toast-top-right {
|
||||
top: 5rem;
|
||||
right: 1.5rem;
|
||||
}
|
||||
//.toast-bottom-right {
|
||||
// right: 12px;
|
||||
// bottom: 12px;
|
||||
//}
|
||||
//.toast-bottom-left {
|
||||
// bottom: 12px;
|
||||
// left: 12px;
|
||||
//}
|
||||
#toast-container {
|
||||
position: fixed;
|
||||
z-index: 999999;
|
||||
/*overrides*/
|
||||
|
||||
}
|
||||
#toast-container * {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#toast-container > div {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 0 6px;
|
||||
padding: 15px 15px 15px 50px;
|
||||
width: 300px;
|
||||
border-radius: 3px;
|
||||
background-position: 15px center;
|
||||
background-repeat: no-repeat;
|
||||
color: #ffffff;
|
||||
opacity: 0.9;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
|
||||
filter: alpha(opacity=90);
|
||||
}
|
||||
#toast-container > :hover {
|
||||
opacity: 1;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
filter: alpha(opacity=100);
|
||||
cursor: pointer;
|
||||
}
|
||||
#toast-container > .toast-info {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
#toast-container > .toast-error {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
#toast-container > .toast-success {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
|
||||
}
|
||||
#toast-container > .toast-warning {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
#toast-container.toast-top-center > div,
|
||||
#toast-container.toast-bottom-center > div {
|
||||
width: 300px;
|
||||
margin: auto;
|
||||
}
|
||||
#toast-container.toast-top-full-width > div,
|
||||
#toast-container.toast-bottom-full-width > div {
|
||||
width: 96%;
|
||||
margin: auto;
|
||||
}
|
||||
.toast {
|
||||
background-color: #030303;
|
||||
}
|
||||
.toast-success {
|
||||
background-color: $info-bg;
|
||||
|
||||
.button {
|
||||
background: lighten($info-bg, 5%);
|
||||
@include button-color(lighten($info-bg, 10%));
|
||||
}
|
||||
|
||||
}
|
||||
.toast-error {
|
||||
background-color: $notice-bg;
|
||||
}
|
||||
.toast-info {
|
||||
background-color: $tertiary-accent-bg;
|
||||
}
|
||||
.toast-warning {
|
||||
background-color: #f89406;
|
||||
}
|
||||
.toast-progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
background-color: #000000;
|
||||
opacity: 0.4;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
|
||||
filter: alpha(opacity=40);
|
||||
}
|
||||
/*Responsive Design*/
|
||||
@media all and (max-width: 240px) {
|
||||
#toast-container > div {
|
||||
padding: 8px 8px 8px 50px;
|
||||
width: 11em;
|
||||
}
|
||||
#toast-container .toast-close-button {
|
||||
right: -0.2em;
|
||||
top: -0.2em;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 241px) and (max-width: 480px) {
|
||||
#toast-container > div {
|
||||
padding: 8px 8px 8px 50px;
|
||||
width: 18em;
|
||||
}
|
||||
#toast-container .toast-close-button {
|
||||
right: -0.2em;
|
||||
top: -0.2em;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 481px) and (max-width: 768px) {
|
||||
#toast-container > div {
|
||||
padding: 15px 15px 15px 50px;
|
||||
width: 25em;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
// Body Base
|
||||
body {
|
||||
font-family: $font-family-default;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $font-family-header;
|
||||
font-weight: 400;
|
||||
text-rendering: optimizeLegibility;
|
||||
letter-spacing: -0px;
|
||||
}
|
||||
|
||||
// Simple fonts for Cyrillic and other fonts.
|
||||
body.simple-fonts {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
|
||||
|
||||
h1, h2, h3, h4, h5, h6, #admin-menu li, .button, .tab-bar, .badge, #admin-main .grav-mdeditor-preview, .form .note,
|
||||
.form-tabs, input, select, textarea, button, .selectize-input, .form-order-wrapper ul#ordering li {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $h1-font-size;
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: $h2-font-size - .40;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: $h2-font-size - .50;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: $h3-font-size - .40;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: $h3-font-size - .50;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include breakpoint(tablet-range) {
|
||||
font-size: $h4-font-size - .40;
|
||||
}
|
||||
@include breakpoint(mobile-only) {
|
||||
font-size: $h4-font-size - .50;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
letter-spacing: -3px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
border-left: 10px solid $rule-color;
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
color: #999;
|
||||
}
|
||||
cite {
|
||||
display: block;
|
||||
text-align: right;
|
||||
color: #666;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
// NOTES!!!
|
||||
blockquote > blockquote > blockquote {
|
||||
|
||||
margin: 0;
|
||||
|
||||
p {
|
||||
|
||||
padding: 15px;
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
margin-top: 0rem;
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
> p {
|
||||
// Yellow
|
||||
margin-left: -71px;
|
||||
border-left: 10px solid #F0AD4E;
|
||||
background: #FCF8F2;
|
||||
color: darken(#F0AD4E,15%);
|
||||
}
|
||||
|
||||
> blockquote > p {
|
||||
// Red
|
||||
margin-left: -94px;
|
||||
border-left: 10px solid #D9534F;
|
||||
background: #FDF7F7;
|
||||
color: darken(#D9534F,15%);
|
||||
}
|
||||
|
||||
> blockquote > blockquote > p {
|
||||
// Blue
|
||||
margin-left: -118px;
|
||||
border-left: 10px solid #5BC0DE;
|
||||
background: #F4F8FA;
|
||||
color: darken(#5BC0DE,15%);
|
||||
}
|
||||
|
||||
> blockquote > blockquote > blockquote > p {
|
||||
// Green
|
||||
margin-left: -142px;
|
||||
border-left: 10px solid #5CB85C;
|
||||
background: #F1F9F1;
|
||||
color: darken(#5CB85C,15%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Inline and Code
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: $font-family-mono;
|
||||
}
|
||||
|
||||
code {
|
||||
background: $code-bg;
|
||||
color: darken($code-text,10%);
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 2rem;
|
||||
background: $pre-bg;
|
||||
border: 1px solid $core-border-color;
|
||||
border-radius: 3px;
|
||||
code {
|
||||
color: $pre-text;
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Extras
|
||||
hr {
|
||||
border-bottom: 4px solid $rule-color;
|
||||
}
|
||||
|
||||
// Label
|
||||
.label {
|
||||
vertical-align: middle;
|
||||
background: $core-accent;
|
||||
border-radius: 100%;
|
||||
color: $white;
|
||||
height: 1rem;
|
||||
min-width: 1rem;
|
||||
line-height: 1rem;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: $core-font-size - 0.3rem;
|
||||
font-family: $font-family-header;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
// Buttons
|
||||
@import "buttons";
|
||||
@@ -0,0 +1,46 @@
|
||||
%button {
|
||||
display: inline-block;
|
||||
padding: 0.3rem 1.5rem;
|
||||
font-weight: 300;
|
||||
-webkit-font-smoothing: auto;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
|
||||
font-family: $font-family-default;
|
||||
|
||||
&:active {
|
||||
margin: 1px 0 -1px 0;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&.button-small {
|
||||
padding: 2px 10px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&.button-x-small {
|
||||
padding: 2px 8px 2px 5px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin button-color($color) {
|
||||
background: $color;
|
||||
color: rgba($white, 0.85);
|
||||
border-radius: $border-radius;
|
||||
&:hover {
|
||||
background: lighten($color,5%);
|
||||
color: $white;
|
||||
}
|
||||
&.dropdown-toggle {
|
||||
background: lighten($color, 5%);
|
||||
border-left: 1px solid darken($color, 5%);
|
||||
}
|
||||
// &:active {
|
||||
// box-shadow: 0 1px 0 darken($color, 12%);
|
||||
// }
|
||||
}
|
||||
@@ -0,0 +1,308 @@
|
||||
/*
|
||||
* CSS TOGGLE SWITCHES
|
||||
* Unlicense
|
||||
*
|
||||
* Ionuț Colceriu - ghinda.net
|
||||
* https://github.com/ghinda/css-toggle-switch
|
||||
*
|
||||
*/
|
||||
|
||||
// @import "../bower_components/bourbon/app/assets/stylesheets/bourbon";
|
||||
@import "configuration/template/colors";
|
||||
|
||||
/* Toggle Switches
|
||||
*/
|
||||
|
||||
$switch-height: 46px;
|
||||
|
||||
/* Shared
|
||||
*/
|
||||
.switch-wrapper {
|
||||
// height: $switch-height;
|
||||
}
|
||||
|
||||
@mixin switch-shared() {
|
||||
|
||||
|
||||
|
||||
display: inline-block;
|
||||
// height: $switch-height;
|
||||
|
||||
* {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
@include transition(all 0.1s ease-out);
|
||||
}
|
||||
|
||||
label,
|
||||
> span {
|
||||
// line-height: $switch-height;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Outline the toggles when the inputs are focused
|
||||
*/
|
||||
input:focus ~ a,
|
||||
input:focus + label {
|
||||
outline: 1px dotted #888;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Checkbox
|
||||
*/
|
||||
@mixin switch-light() {
|
||||
|
||||
@include switch-shared();
|
||||
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
margin-left: 100px;
|
||||
|
||||
/* Position the label over all the elements, except the slide-button (<a>)
|
||||
* Clicking anywhere on the label will change the switch-state
|
||||
*/
|
||||
label {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Don't hide the input from screen-readers and keyboard access
|
||||
*/
|
||||
input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 5;
|
||||
|
||||
&:checked ~ a {
|
||||
right: 0%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
left: -100px;
|
||||
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding-right: 100px;
|
||||
|
||||
text-align: left;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
|
||||
display: block;
|
||||
width: 50%;
|
||||
margin-left: 100px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
&:last-child {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Radio Switch
|
||||
*/
|
||||
@mixin switch-toggle() {
|
||||
|
||||
@include switch-shared();
|
||||
|
||||
position: relative;
|
||||
|
||||
/* For callout panels in foundation
|
||||
*/
|
||||
padding: 0 !important;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
input + label {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
float: left;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
z-index: 1;
|
||||
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
input:last-of-type:checked ~ a {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
/* Generate styles for the multiple states */
|
||||
@for $i from 1 through 3 {
|
||||
$state: $i + 2;
|
||||
$width: 100 / ($i + 2);
|
||||
|
||||
&.switch-#{$state} {
|
||||
label,
|
||||
a {
|
||||
width: $width * 1%;
|
||||
}
|
||||
}
|
||||
|
||||
@for $j from 2 through ($i + 1) {
|
||||
&.switch-#{$state} input:checked:nth-of-type(#{$j}) ~ a {
|
||||
left: $width * ($j - 1) * 1%;
|
||||
}
|
||||
}
|
||||
|
||||
&.switch-#{$state} input:checked:last-of-type ~ a {
|
||||
left: 100 - $width * 1%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Hide by default
|
||||
*/
|
||||
.switch-toggle a,
|
||||
.switch-light span span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* We can't test for a specific feature,
|
||||
* so we only target browsers with support for media queries.
|
||||
*/
|
||||
@media only screen {
|
||||
|
||||
/* Checkbox switch
|
||||
*/
|
||||
.switch-light {
|
||||
@include switch-light();
|
||||
}
|
||||
|
||||
/* Radio switch
|
||||
*/
|
||||
.switch-toggle {
|
||||
@include switch-toggle();
|
||||
}
|
||||
|
||||
/* Standalone Themes */
|
||||
|
||||
/* Grav Theme
|
||||
*/
|
||||
.switch-grav {
|
||||
background-color: $white;
|
||||
border: $form-border-width solid $form-border;
|
||||
border-radius: $form-border-radius;
|
||||
|
||||
label {
|
||||
color: $content-fg;
|
||||
@include transition(color 0.2s ease-out);
|
||||
padding: 5px 20px;
|
||||
|
||||
}
|
||||
|
||||
> span span {
|
||||
opacity: 0;
|
||||
|
||||
@include transition(all 0.1s);
|
||||
|
||||
&:first-of-type {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
background: #777;
|
||||
border-radius: $form-border-radius - 1px;
|
||||
}
|
||||
|
||||
&.switch-toggle input.highlight:checked {
|
||||
~ a {
|
||||
background: lighten($secondary-accent-bg,10%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Selected ON switch-light
|
||||
*/
|
||||
&.switch-light input:checked {
|
||||
|
||||
~ a {
|
||||
background-color: #777;
|
||||
}
|
||||
|
||||
~ span span {
|
||||
&:first-of-type {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
input:checked + label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Bugfix for older Webkit, including mobile Webkit. Adapted from
|
||||
* http://css-tricks.com/webkit-sibling-bug/
|
||||
*/
|
||||
.switch-light,
|
||||
.switch-toggle {
|
||||
@media only screen and (-webkit-max-device-pixel-ratio: 2) and (max-device-width: 1280px) {
|
||||
-webkit-animation: webkitSiblingBugfix infinite 1s;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes webkitSiblingBugfix {
|
||||
from {
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
} to {
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user