mirror of
https://github.com/getgrav/grav-plugin-admin.git
synced 2025-11-15 17:56:07 +01:00
Added checkbox support
This commit is contained in:
Andy Miller
@@ -172,7 +172,7 @@ class AdminPlugin extends Plugin
|
||||
$twig->twig_vars['admin'] = $this->admin;
|
||||
|
||||
// fake grav update
|
||||
$twig->twig_vars['grav_update'] = array('current'=>'0.9.1', 'available'=>'0.9.2');
|
||||
$twig->twig_vars['grav_update'] = array('current'=>'0.9.1', 'available'=>'0.9.1');
|
||||
|
||||
switch ($this->template) {
|
||||
case 'dashboard':
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
@import url(//fonts.googleapis.com/css?family=Montserrat:400|Lato:300,400,700);
|
||||
#admin-login, #admin-logo h3, #admin-main .titlebar h1, #admin-main .titlebar .button-bar, #admin-dashboard .dashboard-item .button-bar .button, #admin-dashboard #updates .numeric, #admin-dashboard #popularity .stat {
|
||||
position: relative;
|
||||
@@ -11,7 +12,6 @@
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.3rem 1.5rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
|
||||
@@ -35,7 +35,7 @@ a {
|
||||
a:hover {
|
||||
color: #0e6e90; }
|
||||
|
||||
b, strong, label, th {
|
||||
b, strong {
|
||||
font-weight: 600; }
|
||||
|
||||
.button-bar {
|
||||
@@ -61,7 +61,8 @@ b, strong, label, th {
|
||||
.info {
|
||||
background: #9055af;
|
||||
color: white;
|
||||
font-size: 1.1rem; }
|
||||
font-size: 1.1rem;
|
||||
padding: 1rem 3rem; }
|
||||
|
||||
.badge {
|
||||
font-size: 0.9rem;
|
||||
@@ -227,42 +228,329 @@ hr {
|
||||
font-family: "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
|
||||
margin-right: 0.75rem; }
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #dddddd; }
|
||||
/*
|
||||
* CSS TOGGLE SWITCHES
|
||||
* Unlicense
|
||||
*
|
||||
* Ionuț Colceriu - ghinda.net
|
||||
* https://github.com/ghinda/css-toggle-switch
|
||||
*
|
||||
*/
|
||||
/* Toggle Switches
|
||||
*/
|
||||
/* Shared
|
||||
*/
|
||||
/* Checkbox
|
||||
*/
|
||||
/* Radio Switch
|
||||
*/
|
||||
/* Hide by default
|
||||
*/
|
||||
.switch-toggle a,
|
||||
.switch-light span span {
|
||||
display: none; }
|
||||
|
||||
textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select[multiple=multiple] {
|
||||
background-color: white;
|
||||
border: 1px solid #dddddd;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); }
|
||||
textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, select[multiple=multiple]:hover {
|
||||
border-color: #c4c4c4; }
|
||||
textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus {
|
||||
border-color: #1bb3e9;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(21, 163, 214, 0.7); }
|
||||
/* 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 {
|
||||
display: inline-block;
|
||||
/* Outline the toggles when the inputs are focused
|
||||
*/
|
||||
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
|
||||
*/
|
||||
/* Don't hide the input from screen-readers and keyboard access
|
||||
*/ }
|
||||
.switch-light * {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.switch-light a {
|
||||
display: block;
|
||||
-webkit-transition: all 0.1s ease-out;
|
||||
-moz-transition: all 0.1s ease-out;
|
||||
transition: all 0.1s ease-out; }
|
||||
.switch-light label,
|
||||
.switch-light > span {
|
||||
vertical-align: middle; }
|
||||
.switch-light input:focus ~ a,
|
||||
.switch-light input:focus + label {
|
||||
outline: 1px dotted #888; }
|
||||
.switch-light label {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
width: 100%; }
|
||||
.switch-light input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 5; }
|
||||
.switch-light input:checked ~ a {
|
||||
right: 0%; }
|
||||
.switch-light > span {
|
||||
position: absolute;
|
||||
left: -100px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding-right: 100px;
|
||||
text-align: left; }
|
||||
.switch-light > span span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
display: block;
|
||||
width: 50%;
|
||||
margin-left: 100px;
|
||||
text-align: center; }
|
||||
.switch-light > span span:last-child {
|
||||
left: 50%; }
|
||||
.switch-light a {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
padding: 0; }
|
||||
|
||||
.form-field .required {
|
||||
color: #F3443F;
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
vertical-align: top;
|
||||
height: 1.5rem;
|
||||
/* Radio switch
|
||||
*/
|
||||
.switch-toggle {
|
||||
display: inline-block;
|
||||
/* Outline the toggles when the inputs are focused
|
||||
*/
|
||||
position: relative;
|
||||
/* For callout panels in foundation
|
||||
*/
|
||||
padding: 0 !important;
|
||||
/* Generate styles for the multiple states */ }
|
||||
.switch-toggle * {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box; }
|
||||
.switch-toggle a {
|
||||
display: block;
|
||||
-webkit-transition: all 0.1s ease-out;
|
||||
-moz-transition: all 0.1s ease-out;
|
||||
transition: all 0.1s ease-out; }
|
||||
.switch-toggle label,
|
||||
.switch-toggle > span {
|
||||
vertical-align: middle; }
|
||||
.switch-toggle input:focus ~ a,
|
||||
.switch-toggle input:focus + label {
|
||||
outline: 1px dotted #888; }
|
||||
.switch-toggle input {
|
||||
position: absolute;
|
||||
opacity: 0; }
|
||||
.switch-toggle input + label {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
text-align: center; }
|
||||
.switch-toggle a {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
z-index: 1;
|
||||
width: 50%;
|
||||
height: 100%; }
|
||||
.switch-toggle input:last-of-type:checked ~ a {
|
||||
left: 50%; }
|
||||
.switch-toggle.switch-3 label,
|
||||
.switch-toggle.switch-3 a {
|
||||
width: 33.33333%; }
|
||||
.switch-toggle.switch-3 input:checked:nth-of-type(2) ~ a {
|
||||
left: 33.33333%; }
|
||||
.switch-toggle.switch-3 input:checked:last-of-type ~ a {
|
||||
left: 66.66667%; }
|
||||
.switch-toggle.switch-4 label,
|
||||
.switch-toggle.switch-4 a {
|
||||
width: 25%; }
|
||||
.switch-toggle.switch-4 input:checked:nth-of-type(2) ~ a {
|
||||
left: 25%; }
|
||||
.switch-toggle.switch-4 input:checked:nth-of-type(3) ~ a {
|
||||
left: 50%; }
|
||||
.switch-toggle.switch-4 input:checked:last-of-type ~ a {
|
||||
left: 75%; }
|
||||
.switch-toggle.switch-5 label,
|
||||
.switch-toggle.switch-5 a {
|
||||
width: 20%; }
|
||||
.switch-toggle.switch-5 input:checked:nth-of-type(2) ~ a {
|
||||
left: 20%; }
|
||||
.switch-toggle.switch-5 input:checked:nth-of-type(3) ~ a {
|
||||
left: 40%; }
|
||||
.switch-toggle.switch-5 input:checked:nth-of-type(4) ~ a {
|
||||
left: 60%; }
|
||||
.switch-toggle.switch-5 input:checked:last-of-type ~ a {
|
||||
left: 80%; }
|
||||
|
||||
/* Standalone Themes */
|
||||
/* Grav Theme
|
||||
*/
|
||||
.switch-grav {
|
||||
background-color: white;
|
||||
border: 1px solid #d4d4d4;
|
||||
border-radius: 4px;
|
||||
/* Selected ON switch-light
|
||||
*/ }
|
||||
.switch-grav label {
|
||||
color: #737c81;
|
||||
-webkit-transition: color 0.2s ease-out;
|
||||
-moz-transition: color 0.2s ease-out;
|
||||
transition: color 0.2s ease-out;
|
||||
padding: 5px 20px; }
|
||||
.switch-grav > span span {
|
||||
opacity: 0;
|
||||
-webkit-transition: all 0.1s;
|
||||
-moz-transition: all 0.1s;
|
||||
transition: all 0.1s; }
|
||||
.switch-grav > span span:first-of-type {
|
||||
opacity: 1; }
|
||||
.switch-grav a {
|
||||
background: #777;
|
||||
border-radius: 3px; }
|
||||
.switch-grav.switch-toggle input.highlight:checked ~ a {
|
||||
background: #41bea8; }
|
||||
.switch-grav.switch-light input:checked ~ a {
|
||||
background-color: #777; }
|
||||
.switch-grav.switch-light input:checked ~ span span:first-of-type {
|
||||
opacity: 0; }
|
||||
.switch-grav.switch-light input:checked ~ span span:last-of-type {
|
||||
opacity: 1; }
|
||||
.switch-grav input:checked + label {
|
||||
color: #fff; } }
|
||||
/* Bugfix for older Webkit, including mobile Webkit. Adapted from
|
||||
* http://css-tricks.com/webkit-sibling-bug/
|
||||
*/
|
||||
@media only screen and (-webkit-max-device-pixel-ratio: 2) and (max-device-width: 1280px) {
|
||||
.switch-light,
|
||||
.switch-toggle {
|
||||
-webkit-animation: webkitSiblingBugfix infinite 1s; } }
|
||||
|
||||
@-webkit-keyframes webkitSiblingBugfix {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0); }
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0); } }
|
||||
form .form-field {
|
||||
margin-bottom: 1rem; }
|
||||
form label {
|
||||
padding: 5px 0 5px 3rem;
|
||||
font-weight: 400;
|
||||
margin: 0; }
|
||||
form input, form select, form textarea, form button {
|
||||
font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
border-radius: 4px;
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
form .form-select-wrapper {
|
||||
position: relative;
|
||||
display: inline-block; }
|
||||
|
||||
form .buttons {
|
||||
text-align: center; }
|
||||
form input {
|
||||
font-weight: 400; }
|
||||
|
||||
table {
|
||||
border: 1px solid #eaeaea; }
|
||||
|
||||
th {
|
||||
background: #f7f7f7;
|
||||
padding: 0.5rem; }
|
||||
form .form-select-wrapper:after {
|
||||
position: absolute;
|
||||
content: '\f078';
|
||||
font-family: 'FontAwesome';
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
line-height: 0;
|
||||
color: #9ba2a6;
|
||||
pointer-events: none; }
|
||||
form .small select, form .small input {
|
||||
min-width: 10rem; }
|
||||
form .medium select, form .medium input {
|
||||
min-width: 20rem; }
|
||||
form .large select, form .large input {
|
||||
min-width: 30rem; }
|
||||
form select {
|
||||
border: 1px solid #d4d4d4;
|
||||
background: white;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 5px 30px 5px 10px;
|
||||
cursor: pointer;
|
||||
margin: 0; }
|
||||
form .switch-toggle label {
|
||||
cursor: pointer; }
|
||||
form .switch-toggle a, form .switch-toggle label {
|
||||
outline: none !important; }
|
||||
form .dynfields input[type=text] {
|
||||
width: 40%; }
|
||||
form .dynfields .inline > div {
|
||||
margin-left: 30%; }
|
||||
form .dynfields .button {
|
||||
padding: 0.5rem;
|
||||
display: inline-block;
|
||||
background: #999; }
|
||||
form .button-bar {
|
||||
margin-top: 50px;
|
||||
background: #e6e6e6;
|
||||
padding: 5px 10px;
|
||||
padding-left: 30%; }
|
||||
form .checkboxes {
|
||||
display: inline-block;
|
||||
padding: 5px 0; }
|
||||
form .checkboxes label {
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 0 0 0 2rem;
|
||||
margin-right: 15px; }
|
||||
form .checkboxes 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: 1px solid #d4d4d4;
|
||||
border-radius: 4px; }
|
||||
form .checkboxes input[type=checkbox] {
|
||||
display: none; }
|
||||
form .checkboxes input[type=checkbox]:checked + label:before {
|
||||
content: "\f00c";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.5rem;
|
||||
text-align: center; }
|
||||
|
||||
td {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #eaeaea; }
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e1e1e1; }
|
||||
|
||||
tr {
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease; }
|
||||
tr td:first-child {
|
||||
padding-left: 3rem; }
|
||||
tr td:last-child {
|
||||
text-align: right;
|
||||
padding-right: 3rem; }
|
||||
tr:last-child td {
|
||||
border-bottom: 0; }
|
||||
tr:hover {
|
||||
background: #f3f3f3; }
|
||||
|
||||
.button {
|
||||
background: #41bea8;
|
||||
@@ -462,22 +750,6 @@ td {
|
||||
border-bottom: 3px solid #e1e1e1; }
|
||||
#admin-main .admin-block .button-bar {
|
||||
margin-right: 3rem; }
|
||||
#admin-main td {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e1e1e1; }
|
||||
#admin-main tr {
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease; }
|
||||
#admin-main tr td:first-child {
|
||||
padding-left: 3rem; }
|
||||
#admin-main tr td:last-child {
|
||||
text-align: right;
|
||||
padding-right: 3rem; }
|
||||
#admin-main tr:last-child td {
|
||||
border-bottom: 0; }
|
||||
#admin-main tr:hover {
|
||||
background: #f3f3f3; }
|
||||
|
||||
#admin-dashboard:after {
|
||||
content: "";
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
themes/grav/css/pure-0.5.0/grids-min.css
vendored
2
themes/grav/css/pure-0.5.0/grids-min.css
vendored
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
Pure v0.5.0-rc-1
|
||||
Pure v0.5.0
|
||||
Copyright 2014 Yahoo! Inc. All rights reserved.
|
||||
Licensed under the BSD License.
|
||||
https://github.com/yui/pure/blob/master/LICENSE.md
|
||||
|
||||
@@ -196,36 +196,6 @@ $update-height: 3rem;
|
||||
margin-right: $padding-default;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border: 0;
|
||||
border-bottom: 1px solid darken($content-bg, 5%);
|
||||
}
|
||||
|
||||
tr {
|
||||
@include transition(all 0.2s ease);
|
||||
|
||||
td {
|
||||
|
||||
&:first-child {
|
||||
padding-left: $padding-default;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
padding-right: $padding-default;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: lighten($content-bg,2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#admin-dashboard {
|
||||
|
||||
@@ -55,6 +55,7 @@ b, strong {
|
||||
background: $info-bg;
|
||||
color: $info-fg;
|
||||
font-size: 1.1rem;
|
||||
padding: 1rem $padding-default;
|
||||
}
|
||||
|
||||
.badge {
|
||||
|
||||
@@ -1,43 +1,202 @@
|
||||
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;
|
||||
}
|
||||
// fieldset {
|
||||
// border: 1px solid $core-border-color;
|
||||
// }
|
||||
|
||||
&:focus {
|
||||
border-color: $core-border-color-focus;
|
||||
box-shadow: $core-box-shadow-focus;
|
||||
}
|
||||
}
|
||||
// textarea, #{$all-text-inputs}, select[multiple=multiple] {
|
||||
// background-color: white;
|
||||
// border: 1px solid $core-border-color;
|
||||
// box-shadow: $core-box-shadow;
|
||||
|
||||
label {
|
||||
@extend strong;
|
||||
}
|
||||
// &: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-field {
|
||||
.required {
|
||||
color: #F3443F;
|
||||
font-size: $core-font-size + 2rem;
|
||||
line-height: $core-font-size + 2rem;
|
||||
vertical-align: top;
|
||||
height: 1.5rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
// 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 {
|
||||
.buttons {
|
||||
text-align: center;
|
||||
}
|
||||
input {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 5px 0 5px $padding-default;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
input, select, textarea, button {
|
||||
font-family: $font-family-default;
|
||||
font-size: $core-font-size;
|
||||
line-height: $core-line-height;
|
||||
border-radius: $form-border-radius;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.form-select-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '\f078';
|
||||
font-family: 'FontAwesome';
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
line-height: 0;
|
||||
color: lighten($content-fg,15%);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
select, input {
|
||||
min-width: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
.medium {
|
||||
select, input {
|
||||
min-width: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.large {
|
||||
select, input {
|
||||
min-width: 30rem;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
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] {
|
||||
// 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 {
|
||||
|
||||
input[type=text] {
|
||||
width: 40%;
|
||||
}
|
||||
.inline > div {
|
||||
margin-left: 30%;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0.5rem;
|
||||
display: inline-block;
|
||||
background: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
margin-top: 50px;
|
||||
background: lighten($form-border,7%);
|
||||
padding: $form-input-pad;
|
||||
padding-left: $form-label-width;
|
||||
}
|
||||
|
||||
.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.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -1,14 +1,33 @@
|
||||
table {
|
||||
border: 1px solid lighten($core-border-color,5%);
|
||||
}
|
||||
|
||||
th {
|
||||
@extend strong;
|
||||
background: lighten($core-border-color,10%);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid lighten($core-border-color,5%);
|
||||
border: 0;
|
||||
border-bottom: 1px solid darken($content-bg, 5%);
|
||||
}
|
||||
|
||||
tr {
|
||||
@include transition(all 0.2s ease);
|
||||
|
||||
td {
|
||||
|
||||
&:first-child {
|
||||
padding-left: $padding-default;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
padding-right: $padding-default;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: lighten($content-bg,2%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
%button {
|
||||
display: inline-block;
|
||||
padding: 0.3rem 1.5rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
309
themes/grav/scss/template/modules/_toggle-switch.scss
Normal file
309
themes/grav/scss/template/modules/_toggle-switch.scss
Normal file
@@ -0,0 +1,309 @@
|
||||
/*
|
||||
* 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;
|
||||
width: 50%;
|
||||
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);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{% set value = (value is null ? field.default : value) %}
|
||||
|
||||
<div class="form-field">
|
||||
<label class="inline">
|
||||
<input type="checkbox"
|
||||
name="{{ (scope ~ field.name)|fieldName }}"
|
||||
{% if value == true %} checked="checked" {% endif %}
|
||||
{% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
|
||||
{% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
|
||||
{% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
|
||||
/>
|
||||
{{ field.label|e }} {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
|
||||
</label>
|
||||
</div>
|
||||
11
themes/grav/templates/forms/fields/checkbox/checkbox.yaml
Normal file
11
themes/grav/templates/forms/fields/checkbox/checkbox.yaml
Normal file
@@ -0,0 +1,11 @@
|
||||
field:
|
||||
checkbox:
|
||||
node: boolean
|
||||
key: name
|
||||
fields:
|
||||
name:
|
||||
type: text
|
||||
validation:
|
||||
required: true
|
||||
value:
|
||||
type: text
|
||||
@@ -0,0 +1,31 @@
|
||||
{% set value = (value is null ? field.default : value) %}
|
||||
|
||||
<div class="form-field grid pure-g">
|
||||
<div class="form-label block size-1-3 pure-u-1-3">
|
||||
<label>
|
||||
{% if field.help %}
|
||||
<span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label|e }}</span>
|
||||
{% else %}
|
||||
{{ field.label|e }}
|
||||
{% endif %}
|
||||
{{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-data block size-2-3 pure-u-2-3">
|
||||
{% for key, text in field.options %}
|
||||
{% set checked = (field.use == 'keys' ? value[key] : key in value) %}
|
||||
{% set name = field.name|fieldName ~ '[' ~ (field.use == 'keys' ? key : '') ~ ']' %}
|
||||
{% set key = (field.use == 'keys' ? '1' : key) %}
|
||||
<span class="checkboxes">
|
||||
<input type="checkbox"
|
||||
id="{{ name|e }}"
|
||||
value="{{ key|e }}"
|
||||
name="{{ (scope ~ name)|fieldName }}"
|
||||
{% if checked %}checked="checked"{% endif %}
|
||||
{% if field.validate.required %}required="required"{% endif %}
|
||||
>
|
||||
<label for="{{ name|e }}">{{ text|e }}</label>
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
48
themes/grav/templates/forms/fields/pages/pages.html.twig
Normal file
48
themes/grav/templates/forms/fields/pages/pages.html.twig
Normal file
@@ -0,0 +1,48 @@
|
||||
{% set value = (value is null ? field.default : value) %}
|
||||
{% set base_depth = 0 %}
|
||||
|
||||
{% macro options(field, pages, value, depth) %}
|
||||
|
||||
{% if field.show_root and depth == 0 %}
|
||||
<option value="/">/ (Root)</option>
|
||||
{% set depth = depth +1 %}
|
||||
{% endif %}
|
||||
|
||||
{% set indent = depth == 0 ? '' : repeat('-',depth) ~ ' ' %}
|
||||
|
||||
{% for page in pages.children %}
|
||||
{% if page.routable() or field.show_all %}
|
||||
<option {% if page.route == value %}selected="selected"{% endif %} value="{{ page.route }}">
|
||||
{{indent}} {{ page.menu }}
|
||||
</option>
|
||||
{% endif %}
|
||||
{% if page.children|length > 0 and (field.show_modular or not page.modular()) %}
|
||||
|
||||
{{ _self.options(field, page,value, depth + 1) }}
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endmacro %}
|
||||
|
||||
<div class="form-field grid pure-g">
|
||||
<div class="form-label block size-1-3 pure-u-1-3">
|
||||
<label>
|
||||
{% if field.help %}
|
||||
<span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
|
||||
{% else %}
|
||||
{{ field.label }}
|
||||
{% endif %}
|
||||
{{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-data block size-2-3 pure-u-2-3">
|
||||
<div class="form-select-wrapper {{ field.size }}">
|
||||
<select name="{{ (scope ~ field.name)|fieldName }}">
|
||||
{% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
|
||||
{% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
|
||||
{% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
|
||||
{{ _self.options(field,pages,value, 0) }}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
18
themes/grav/templates/forms/fields/section/section.html.twig
Normal file
18
themes/grav/templates/forms/fields/section/section.html.twig
Normal file
@@ -0,0 +1,18 @@
|
||||
{% if field.title %}
|
||||
<h1 {% if not field.underline %}class="no_underline"{% endif %}>{{ field.title }}</h1>
|
||||
{% endif %}
|
||||
|
||||
{% if field.text %}
|
||||
<p>{{ field.text }}<p>
|
||||
{% endif %}
|
||||
|
||||
{% if field.fields %}
|
||||
<div class="form-section">
|
||||
{% for field in field.fields %}
|
||||
{% if field.type %}
|
||||
{% set value = data.value(field.name) %}
|
||||
{% include ["forms/fields/#{field.type}/#{field.type}.html.twig", 'forms/fields/text/text.html.twig'] %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
27
themes/grav/templates/forms/fields/select/select.html.twig
Normal file
27
themes/grav/templates/forms/fields/select/select.html.twig
Normal file
@@ -0,0 +1,27 @@
|
||||
{% set value = (value is null ? field.default : value) %}
|
||||
|
||||
<div class="form-field">
|
||||
<label class="inline select">
|
||||
<span>
|
||||
{% if field.help %}
|
||||
<span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
|
||||
{% else %}
|
||||
{{ field.label }}
|
||||
{% endif %}
|
||||
{{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
|
||||
</span>
|
||||
|
||||
|
||||
<select name="{{ (scope ~ field.name)|fieldName }}"
|
||||
{% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
|
||||
{% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
|
||||
{% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
|
||||
>
|
||||
{% for key, text in field.options %}
|
||||
<option {% if key == value %}selected="selected"{% endif %} value="{{ key }}">
|
||||
{{ text }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
@@ -0,0 +1,37 @@
|
||||
{% set value = (value is null ? field.default : value) %}
|
||||
|
||||
<div class="form-field grid pure-g">
|
||||
<div class="form-label block size-1-3 pure-u-1-3">
|
||||
<label>
|
||||
{% if field.help %}
|
||||
<span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
|
||||
{% else %}
|
||||
{{ field.label }}
|
||||
{% endif %}
|
||||
{{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-data block size-2-3 pure-u-2-3">
|
||||
<div class="form-select-wrapper {{ field.size }}">
|
||||
<select name="{{ (scope ~ field.name)|fieldName }}"
|
||||
{% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
|
||||
{% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
|
||||
{% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
|
||||
>
|
||||
{% for option, name in field.options %}
|
||||
<option {% if key in option %}selected="selected"{% endif %} value="{{ option }}">
|
||||
{{ name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
{% for theme in admin.themes %}
|
||||
{% set blueprints = theme.blueprints %}
|
||||
<option
|
||||
{% if config.system.pages.theme == blueprints.name %}selected="selected"{% endif %}
|
||||
value="{{ blueprints.name }}">
|
||||
{{ blueprints.get('name') }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
34
themes/grav/templates/forms/fields/toggle/toggle.html.twig
Normal file
34
themes/grav/templates/forms/fields/toggle/toggle.html.twig
Normal file
@@ -0,0 +1,34 @@
|
||||
{% set value = (value is null ? field.default : value) %}
|
||||
{% set value = (value is same as(false) ? 0 : value) %}
|
||||
|
||||
<div class="form-field grid pure-g">
|
||||
<div class="form-label block size-1-3 pure-u-1-3">
|
||||
<label>
|
||||
{% if field.help %}
|
||||
<span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
|
||||
{% else %}
|
||||
{{ field.label }}
|
||||
{% endif %}
|
||||
{{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-data block size-2-3 pure-u-2-3">
|
||||
<div class="switch-toggle switch-grav switch-{{ field.options|length }}">
|
||||
{% for key, text in field.options %}
|
||||
{% set id = "toggle_" ~ field.name ~ key %}
|
||||
<input type="radio"
|
||||
value="{{ key }}"
|
||||
id="{{ id }}"
|
||||
name="{{ (scope ~ field.name)|fieldName }}"
|
||||
{% if field.highlight is defined %}
|
||||
class="{{ field.highlight == '' ~ key ? 'highlight' : '' }}"
|
||||
{% endif %}
|
||||
{% if '' ~ key == '' ~ value %}checked="checked" {% endif %}
|
||||
{% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
|
||||
/>
|
||||
<label for="{{ id }}">{{ text }}</label>
|
||||
{% endfor %}
|
||||
<a></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -56,7 +56,7 @@
|
||||
<div class="titlebar secondary-accent">
|
||||
{% block titlebar %}{% endblock %}
|
||||
</div>
|
||||
{% if grav_update %}
|
||||
{% if grav_update and grav_update['available'] > grav_update['current'] %}
|
||||
<div class="grav-update">
|
||||
|
||||
<p>
|
||||
|
||||
Reference in New Issue
Block a user