webseite-grav/plugins/admin/themes/grav/scss/template/_pages.scss

857 lines
19 KiB
SCSS
Raw Normal View History

2021-04-30 11:23:26 +02:00
#pages-filters {
margin-bottom: 1rem;
margin-top: -1rem;
padding: 1rem;
.button-border {
padding: .375rem .375rem;
white-space: nowrap;
&.adv-options {
&:after {
content: "\f078";
font-family: "FontAwesome", sans-serif;
margin-left: 5px;
}
&.open:after {
content: "\f077";
}
}
}
.filters-bar {
display: flex;
align-items: center;
.button-border {
margin-left: 0.5rem;
}
}
.filters-advanced {
overflow: hidden;
transition:max-height 0.3s ease-out;
height:auto;
max-height:600px;
&.hide {
max-height: 0;
}
.button-border {
display: inline-block;
margin-top: 0.5rem;
}
fieldset {
margin: 1rem 0 0;
border-radius: $border-radius;
legend {
margin-left: -0.5rem;
padding: 0 0.5rem;
}
.checkboxes {
margin-right: 1.5rem;
label {
padding-left: 1.7rem;
&:before {
margin-top: -0.6rem;
margin-right: 0;
width: 1.25rem;
height: 1.25rem;
}
}
}
}
}
}
#pages-content-wrapper {
display: flex;
flex-direction: column;
margin-bottom: -1rem;
height: calc(100vh - 190px);
.grav-loading {
min-height: 600px;
.grav-loader {
margin: 0 auto;
position: relative;
top: 230px;
}
}
.fjs-container {
min-height: initial;
flex-grow: 1;
}
.fjs-path-bar {
//margin-bottom: -1rem;
border-bottom: 0;
padding: 0.5rem;
overflow: inherit;
}
.fjs-col {
width: 33.33333334%;
min-width: 300px;
min-height: 300px;
max-height: initial;
}
.fjs-item {
max-width: 100%;
> .fjs-item-wrapper {
display: flex;
justify-content: flex-start;
padding: 0;
margin: 1px 0;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
outline: 0;
}
a {
padding: 7px 2px 7px 5px;
& * {
@include transition(all 0.5s ease);
}
}
.fjs-title {
display: flex;
align-items: center;
flex-grow: 1;
max-width: 100%;
overflow: auto;
[data-flexpages-dotx3] {
.dropdown-toggle {
padding: 0;
background: transparent;
border: 0;
}
/* FIXME: properly move colors to presets */
.dropdown-menu {
top: inherit;
left: inherit;
right: inherit;
bottom: inherit;
position: fixed;
cursor: default;
padding: 0 0 0.5rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
width: 350px;
.tags {
padding-top: 0;
}
a {
cursor: pointer;
}
table {
display: table;
tbody {
width: 100%;
display: inherit;
}
tr {
display: table-row;
}
td {
display: table-cell;
text-align: left;
flex: none;
word-break: break-all;
white-space: normal;
&:first-child {
padding-left: 0;
width: 80px;
}
&:last-child {
padding-right: 0;
width: calc(100% - 80px);
}
}
}
.divider {
height: 0;
margin: .5rem 0;
overflow: hidden;
}
.action-bar {
border-radius: $border-radius $border-radius 0 0;
& + .divider {
margin-top: 0;
}
a.dropdown-item:hover {
border-radius: 0;
&:first-child {
border-top-left-radius: 4px;
}
&:last-child {
border-top-right-radius: 4px;
}
}
}
.dropdown-item {
display: block;
width: 100%;
padding: 0.5rem;
clear: both;
font-weight: 400;
text-align: inherit;
white-space: nowrap;
border: 0;
border-radius: $border-radius;
&:hover {
text-decoration: none;
}
}
.fa {
display: inline-block;
width: 16px;
height: inherit;
text-align: left;
}
.action-bar {
display: flex;
a, i {
text-align: center;
}
}
.details, .tags, .langs {
padding: 0 .5rem 0;
}
.infos {
margin: 0 .15rem;
ul {
margin: 0;
padding: 0;
}
}
.langs {
.lang {
display: inline-block;
.fa {
font-size: 0.6rem;
padding: 0 0.15rem;
}
}
}
}
}
& > a {
flex-grow: 1;
overflow: hidden;
}
}
.button-group {
.fa {
font-size: 0.9rem;
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
&.disabled {
opacity: 0;
}
}
}
.fjs-icon {
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: visible !important;
width: 34px;
height: 34px;
min-width: 34px;
border-radius: 50%;
margin-right: 5px;
margin-left: 5px;
&:before {
position: relative;
content: url('../images/icons/book-edit.svg');
flex: 1;
max-width: 20px;
margin-right: 0px;
margin-bottom: -2px;
}
&.modular:before {
content: url('../images/icons/module-four.svg');
}
&.home:before {
content: url('../images/icons/house.svg');
}
&.lock:before {
content: url('../images/icons/touchid-lock.svg');
}
&.badge-published:after, &.badge-unpublished:after {
content: '';
}
&:after, .badge-clock {
display: block;
position: absolute;
top: -2px;
right: -2px;
height: 12px;
width: 12px;
border-radius: 50%;
}
.badge-clock {
border-radius: 0;
content: url('../images/icons/clock-hands.svg');
z-index: 2;
}
.badge-lang {
position: absolute;
bottom: -4px;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
line-height: 1.2;
font-weight: 600;
font-size: 0.6rem;
border-radius: $border-radius;
padding: 0 3px;
}
}
.fjs-info {
flex-grow: 1;
flex-direction: column;
line-height: 1.2;
> b, > em {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-style: normal;
}
> b {
font-size: 110%;
}
}
.fjs-actions {
display: flex;
align-items: center;
padding-right: 3px;
position: relative;
> * {
margin-right: 3px;
&:last-child {
margin-right: 0;
}
}
}
}
.fjs-children {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 28px;
min-width: 50px;
outline: 0;
background-color: transparent;
.badge {
font-size: 0.7rem;
margin-right: 5px;
padding: 0px 3px;
line-height: 1.3;
}
.fa {
display: inline-block !important;
width: auto !important;
font-size: 14px;
}
}
.breadcrumb-node {
font-size: 0.9rem;
&:hover span {
text-decoration: none;
}
& > i.fa {
margin: 0 0.4rem -4px;
}
& > i:not(.fa) {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: inherit;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 0.35rem;
&:before {
position: relative;
content: url('../images/icons/book-edit.svg');
flex: 1;
max-width: 10px;
}
&.modular:before {
content: url('../images/icons/module-four.svg');
}
&.home:before {
content: url('../images/icons/house.svg');
}
&.lock:before {
content: url('../images/icons/touchid-lock.svg');
}
&.badge-published:after, &.badge-unpublished:after {
content: '';
}
}
}
}
.pages-list {
list-style: none;
margin: 0;
padding: 0;
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}
.row {
@include transition(all 0.2s ease);
line-height: 2.5rem;
padding-right: 3rem;
@include breakpoint(mobile-only) {
padding-right: 1rem;
}
[data-hint]:after {
line-height: 1 !important;
width: auto !important;
white-space: nowrap !important;
}
p.page-route {
display: block;
margin: 0;
line-height: 1;
font-size: 0.9rem;
word-break: break-all;
.spacer {
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 {
margin-left: 8px;
}
}
.page-home {
font-size: 1.4rem;
margin-left: 10px;
vertical-align: middle;
}
.page-info {
font-size: 1.1rem;
margin-left: 10px;
vertical-align: middle;
}
.page-edit {
text-overflow: ellipsis;
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow-x: hidden;
}
.page-item__row {
display: flex;
}
.page-item__toggle {
width: 25px;
line-height: 1;
padding-top: 7px;
}
.page-item__content {
padding: 5px 0;
width: calc(100% - 50px);
}
.page-item__content-name {
line-height: 1;
}
.page-item__content-hint {
line-height: 1.3;
vertical-align: middle;
max-width: 100%;
}
.page-item__tools {
width: 90px;
text-align: right;
font-size: 1.4rem;
.page-view {
margin-right: 4px;
}
}
.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;
}
}
#pages-legend {
margin-top: 1.5rem;
text-align: center;
h2, ul, li {
display: inline-block;
}
li {
margin-right: 0.75rem;
}
}
}
#page-filtering {
margin: 0 $padding-default 1rem;
@include clearfix;
@include breakpoint(mobile-only) {
margin: -1rem 1rem 1rem;
}
.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;
}
.selectize-control.single.plugin-remove_button .selectize-input,
.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;
}
.item {
color: #777;
background: #eee;
padding: 2px 10px;
&[data-value='Routable'] {
background: #CE431D;
color: $white;
}
&[data-value='NonRoutable'] {
color: #CE431D;
}
&[data-value='Visible'] {
background: #0082BA;
color: $white;
}
&[data-value='NonVisible'] {
color: #0082BA;
}
&[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: 5px;
height: 50px;
@include breakpoint(mobile-only) {
position: relative;
width: 100%;
right: 0;
padding: 0 .5rem;
margin: -2rem 0 2rem 0;
}
#admin-mode-toggle, #admin-lang-toggle {
@extend %vertical-align;
height: 38px;
display: inline-flex;
vertical-align: inherit;
@include breakpoint(mobile-only) {
float: right;
}
}
#admin-lang-toggle {
z-index: 3;
float: left;
margin-right: 5px;
button {
padding: 0.3rem 0.5rem;
height: 100%;
}
.dropdown-menu {
button {
width: 100%;
}
}
}
.switch-grav {
border: 0;
line-height: 38px;
}
.switch-toggle {
@include breakpoint(mobile-only) {
width: 100%;
}
}
}
@for $i from 0 to 10 {
.depth-#{$i} .row {
padding-left: 3rem * ($i + 1);
}
@include breakpoint(mobile-only) {
.depth-#{$i} .row {
padding-left: 1rem * ($i + 1);
}
}
}
.selectize-route-option {
display: flex;
> :first-child {
flex: 0 0 auto;
width: auto;
margin-right: 10px;
}
> :last-child {
flex: 1 1 auto;
> * {
display: block;
}
}
}
.hidden {
display: none!important;
}
.switch-toggle input[type="radio"] {
display: none!important;
}
[data-acl_picker] {
.permissions-item {
display: flex;
align-items: center;
vertical-align: center;
.selectize-control, a, input, button {
display: inline-flex;
margin: 0 .5rem;
align-items: center;
vertical-align: center;
}
.selectize-control {
flex-grow: 1;
}
.selectize-control {
margin-left: 0;
}
.switch-toggle {
margin: 0;
}
&:last-child {
margin-right: 0;
}
}
}