pages_core 3.12.0 → 3.12.1

data/app/assets/stylesheets/{pages/admin/components/image_uploader.scss → pages_core/admin/components/image_uploader.css}

@@ -1,52 +1,52 @@
 .image-uploader {
   border: 2px solid transparent;
-  background: $c-background-disabled;
+  background: var(--background-disabled-color);
   max-width: 500px;
   min-height: 150px;
   display: flex;
-  color: $c-text-light;
+  color: var(--text-light-color);
   line-height: 1.6;
   box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.1);
   padding: 1px;
 
-  @include breakpoint-mobile {
+  @media --mobile {
     flex-direction: column;
   }
 
-  &.uploading {}
-
   &.dragover {
-    border: 2px dashed $c-border;
+    border: 2px dashed var(--border-color);
   }
 
-  .image {
+  & .image {
     display: flex;
     align-items: center;
     justify-content: center;
     max-width: 250px;
     max-height: 400px;
-    .editable-image img {
+
+    & .editable-image img {
       width: auto;
       max-height: 400px;
     }
-    @include breakpoint-mobile {
+
+    @media --mobile {
       max-width: 100%;
     }
   }
 
-  .ui-wrapper {
+  & .ui-wrapper {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .ui {
+  & .ui {
     text-align: center;
     padding: 20px;
   }
 
-  .remove-image {
+  & .remove-image {
     display: block;
     margin-top: 20px;
   }

data/app/assets/stylesheets/{pages/admin/components/layout.scss → pages_core/admin/components/layout.css}

@@ -1,12 +1,11 @@
 *,
 *:before,
 *:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   margin: 0px;
   padding: 0px;
   height: 100vh;
@@ -17,8 +16,9 @@ html, body {
   display: flex;
   flex-flow: column nowrap;
   height: 100vh;
-  > *,
-  .main-wrapper {
+
+  & > *,
+  & .main-wrapper {
     flex-shrink: 0;
   }
 }
@@ -27,18 +27,22 @@ html, body {
   flex: 1 0 auto;
   display: flex;
   flex-flow: row nowrap;
-  @include breakpoint-mobile {
+
+  @media --mobile {
     flex-flow: column nowrap;
   }
-  > main {
+
+  & > main {
     flex: 1;
     padding: 0px 0px 60px 0px;
   }
-  > aside {
+
+  & > aside {
     min-width: 300px;
     width: 20%;
     padding: 0px 16px;
-    @include breakpoint-mobile {
+
+    @media --mobile {
       width: 100%;
     }
   }

data/app/assets/stylesheets/pages_core/admin/components/links.css

@@ -0,0 +1,40 @@
+a,
+a:visited {
+  color: var(--link-color);
+  text-decoration: underline;
+}
+
+a:hover,
+a:focus {
+  color: var(--link-color);
+}
+
+a.create,
+a.create:visited {
+  color: var(--green);
+}
+
+a.create:hover,
+a.create:focus {
+  color: var(--green-hover);
+}
+
+a.cancel,
+a.cancel:visited,
+a.delete,
+a.delete:visited {
+  color: var(--red);
+}
+
+a.cancel:hover,
+a.cancel:focus,
+a.delete:hover,
+a.delete:focus {
+  color: var(--red-hover);
+}
+
+button a {
+  padding: 5px 0;
+  color: var(--text-color) !important;
+  text-decoration: none;
+}

data/app/assets/stylesheets/pages_core/admin/components/list_table.css

@@ -0,0 +1,66 @@
+table.list {
+  border-collapse: collapse;
+  margin: 16px 0;
+  width: 100%;
+
+  & td,
+  & th {
+    padding: 8px 16px;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  & th {
+    background: linear-gradient(to bottom, var(--background-color) 0%, var(--background-disabled-color) 100%);
+    color: var(--text-light-color);
+    font-weight: bold;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  & td {
+    border-bottom: 1px solid var(--border-color);
+
+    &.note {
+      color: var(--text-light-color);
+    }
+
+    &.name {
+      font-weight: bold;
+    }
+  }
+
+  & tr td:first-child,
+  & tr th:first-child {
+    padding-left: 32px;
+  }
+
+  & tr td:last-child,
+  & tr th:last-child {
+    padding-right: 32px;
+  }
+
+  & tr.disabled td {
+    opacity: 0.5;
+  }
+
+  & tr.disabled td:first-child {
+    background: transparent radial-gradient(ellipse at center, #bdbdbd 50%, transparent 50%) no-repeat left 12px top 50%;
+    background-size: 10px 10px;
+  }
+
+  & tr.active td:first-child {
+    background: transparent radial-gradient(ellipse at center, #92b6c4 50%, transparent 50%) no-repeat left 12px top 50%;
+    background-size: 10px 10px;
+  }
+
+  & .actions {
+    float: right;
+    margin-bottom: 2px;
+    margin-left: 16px;
+  }
+
+  & p {
+    margin: 0;
+    padding: 0;
+  }
+}

data/app/assets/stylesheets/{pages/admin/components/login.scss → pages_core/admin/components/login.css}

@@ -1,23 +1,24 @@
 main .login-form {
   padding-top: 10px;
 
-  label {
+  & label {
     display: block;
     font-weight: bold;
     margin-bottom: 8px;
     font-size: 1.2em;
-    color: $c-text;
+    color: var(--text-color);
   }
 
-  ul {
+  & ul {
     margin: 0px;
     padding: 0px;
     margin-top: 30px;
     list-style-position: inside;
     list-style-type: disc;
-    color: $c-border;
+    color: var(--border-color);
     line-height: 1.5;
-    li {
+
+    & li {
       margin: 0px;
       padding: 0px;
       font-size: 1.2em;

data/app/assets/stylesheets/{pages/admin/components/modal.scss → pages_core/admin/components/modal.css}

@@ -1,11 +1,9 @@
-body > .wrapper {
-}
-
 body.modal {
-  > .wrapper {
+  & > .wrapper {
     transition: filter 1000ms linear;
     filter: blur(10px);
-    @include breakpoint-mobile {
+
+    @media --mobile {
       filter: none;
     }
   }
@@ -16,10 +14,8 @@ body.modal {
   align-items: center;
   justify-content: center;
 
-  .background {
-    background: radial-gradient(rgba(255, 255, 255, 0.9),
-                                rgba(255, 255, 255, 0.9) 50%,
-                                rgba(80, 80, 80, 0.9));
+  & .background {
+    background: radial-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9) 50%, rgba(80, 80, 80, 0.9));
     cursor: pointer;
     position: absolute;
     top: 0px;
@@ -32,9 +28,9 @@ body.modal {
     animation-timing-function: ease-out;
   }
 
-  .modal {
+  & .modal {
     max-width: 90%;
-    background: $c-background;
+    background: var(--background-color);
     padding: 20px;
     border-radius: 5px;
     box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
@@ -45,7 +41,7 @@ body.modal {
     animation-fill-mode: forwards;
     z-index: 2;
 
-    @include breakpoint-mobile {
+    @media --mobile {
       max-width: 100%;
       width: 100vw;
       height: 100vh;
@@ -70,6 +66,7 @@ body.modal {
     opacity: 0.1;
     transform: scale(0.97) translate(0px, 10px);
   }
+
   100% {
     opacity: 1.0;
     transform: scale(1.0);
@@ -80,6 +77,7 @@ body.modal {
   0% {
     opacity: 0.0;
   }
+
   100% {
     opacity: 1.0;
   }

data/app/assets/stylesheets/{pages/admin/components/page_tree.scss → pages_core/admin/components/page_tree.css}

@@ -1,42 +1,33 @@
-%no-select {
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
 .page-tree {
-  @extend %no-select;
+  user-select: none;
   position: relative;
   overflow: hidden;
-
   margin: 20px 0 40px 0;
   margin-left: -20px;
   margin-right: -10px;
 
-  .draggable {
-    @extend %no-select;
+  & .draggable {
+    user-select: none;
     position: absolute;
     opacity: 0.8;
   }
 
-  .node {
+  & .node {
     &.placeholder > * {
       visibility: hidden;
     }
 
     &.placeholder {
-      border: 1px dashed $c-border;
+      border: 1px dashed var(--border-color);
     }
 
-    .inner {
+    & .inner {
       position: relative;
       cursor: pointer;
       padding-left: 10px;
     }
 
-    .collapse {
+    & .collapse {
       position: absolute;
       left: 0;
       cursor: pointer;
@@ -45,62 +36,68 @@
     }
   }
 
-  .page {
-    @extend %clearfix;
+  & .page {
     font-size: 15px;
     padding: 6px 10px;
     border: 1px solid transparent;
-    //border-radius: 5px;
+
+    &:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
 
     &:hover {
-      border: 1px solid $c-border-light;
-      @include vertical-gradient($c-background, $c-background-disabled);
+      border: 1px solid var(--border-color-light);
+      background: linear-gradient(to bottom, var(--background-color) 0%, var(--background-disabled-color) 100%);
     }
 
-    .date {
+    & .date {
       font-size: 12px;
       margin-left: 10px;
-      color: $c-text-light;
+      color: var(--text-light-color);
     }
 
-    .name {
+    & .name {
       font-weight: bold;
     }
 
-    .icon {
+    & .icon {
       margin-right: 8px;
     }
 
-    .status-label,
-    .collapsed-label {
+    & .status-label,
+    & .collapsed-label {
       margin-left: 3px;
       font-size: 12px;
     }
 
-    form {
+    & form {
       display: inline;
       margin: 0;
       padding: 0;
-      input {
+
+      & input {
         font-size: 15px;
         padding: 2px 4px;
-
         margin-top: -2px;
         margin-bottom: -2px;
         margin-right: 5px;
       }
-      button {
+
+      & button {
         margin-left: 5px;
       }
     }
 
-    a,
-    a:visited {
-      color: $c-text;
+    & a,
+    & a:visited {
+      color: var(--text-color);
       text-decoration: none;
     }
-    a:hover,
-    a:focus {
+
+    & a:hover,
+    & a:focus {
       text-decoration: underline;
     }
 
@@ -108,26 +105,28 @@
     &.status-1,
     &.status-3 {
       &,
-      a,
-      a:visited {
-        color: $c-text-light;
+      & a,
+      & a:visited {
+        color: var(--text-light-color);
       }
     }
   }
 
-  .page .actions {
+  & .page .actions {
     float: right;
     visibility: hidden;
     margin: -4px -6px -4px 5px;
-    button {
+
+    & button {
       margin-left: 5px;
     }
   }
-  .page:hover .actions {
+
+  & .page:hover .actions {
     visibility: visible;
   }
 
-  button {
+  & button {
     padding: 0;
     border: 0;
     background: transparent;
@@ -135,45 +134,45 @@
     font-size: 13px;
     padding: 3px 5px;
     border-radius: 3px;
-    color: $c-link;
+    color: var(--link-hover-color);
 
-    .icon {
+    & .icon {
       margin-right: 8px;
     }
 
     &:hover,
     &:focus {
-      color: $c-link-hover;
-      background: transparentize($c-link, 0.75);
+      color: var(--blue-hover);
+      background: var(--blue-transparent);
     }
 
     &.add {
-      color: $c-create;
+      color: var(--green);
 
       &:hover,
       &:focus {
-        color: $c-create-hover;
-        background: transparentize($c-create, 0.75);
+        color: var(--green-hover);
+        background: var(--green-transparent);
       }
     }
 
     &.delete,
     &.cancel {
-      color: $c-delete;
+      color: var(--red);
 
       &:hover,
       &:focus {
-        color: $c-delete-hover;
-        background: transparentize($c-delete, 0.75);
+        color: var(--red-hover);
+        background: var(--red-transparent);
       }
     }
   }
 
-  button.add-inline {
+  & button.add-inline {
     margin: 5px 0 5px 30px;
   }
 
-  .node .node .node .page .name {
+  & .node .node .node .page .name {
     font-weight: normal;
   }
 }

data/app/assets/stylesheets/{pages/admin/components/pagination.scss → pages_core/admin/components/pagination.css}

@@ -3,13 +3,10 @@
   line-height: 20px;
   font-size: 14px;
 
-  .content & {
-    margin: 20px -2px;
-  }
-
-  a,
-  .current,
-  .disabled, .gap {
+  & a,
+  & .current,
+  & .disabled,
+  & .gap {
     display: inline-block;
     font-style: normal;
     margin: 0px 1px;
@@ -20,30 +17,33 @@
     text-align: center;
   }
 
-  a:hover, a:focus {
+  & a:hover,
+  & a:focus {
     text-decoration: underline;
   }
 
-  .current {
-    //background: $c-blue;
-    //color: $c-text-invert;
+  & .current {
     font-weight: bold;
   }
 
-  .disabled {
-    color: $c-text-light;
+  & .disabled {
+    color: var(--text-light-color);
   }
 
-  .next,
-  .previous {
+  & .next,
+  & .previous {
     background: none;
   }
 
-  .next {
+  & .next {
     margin-left: 10px;
   }
 
-  .previous {
+  & .previous {
     margin-right: 10px;
   }
 }
+
+.content .pagination {
+  margin: 20px -2px;
+}

data/app/assets/stylesheets/{pages/admin/components/sidebar.scss → pages_core/admin/components/sidebar.css}

@@ -1,27 +1,28 @@
 .sidebar {
-  background: $c-background-disabled;
+  background: var(--background-disabled-color);
   box-shadow: inset 5px 0px 5px rgba(0, 0, 0, 0.05);
   line-height: 1.3;
-  color: $c-text;
+  color: var(--text-color);
 
-  h2 {
+  & h2 {
     margin: 20px 0 0px 0;
     padding: 0 0 10px 0;
-    color: $c-text;
+    color: var(--text-color);
     font-size: 18px;
-    border-bottom: 1px solid $c-border;
+    border-bottom: 1px solid var(--border-color);
+
     &:first-child {
       margin-top: 16px;
     }
   }
 
-  ul {
+  & ul {
     list-style-type: disc;
     margin: 1em 0 1em 14px;
     padding: 0;
   }
 
-  ul li {
+  & ul li {
     margin: 0;
     padding: 0;
   }