@candy-kingdom/bonnie-cms 0.1.8 → 0.3.0

package/styles/admin-variables.scss

@@ -13,45 +13,51 @@ $adminMobileViewPortCoeff: 0.35;
 
 $barWidth: 120px;
 
+@mixin checkerboard {
+  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
 ////////////////////////
 //       FONTS
 
 // todo: remove
 @mixin adminBigTextDesktop {
-    letter-spacing: -0.01em;
-    font-size: $atom * 12 * $adminDesktopViewPortCoeff;
-    line-height: $big-text-line-height * $adminDesktopViewPortCoeff;
-    color: var(--text-color);
+  letter-spacing: -0.01em;
+  font-size: $atom * 12 * $adminDesktopViewPortCoeff;
+  line-height: $big-text-line-height * $adminDesktopViewPortCoeff;
+  color: var(--text-color);
 }
 
 @mixin adminBigTextTablet {
-    font-size: $tabletAtom * 12 * $adminTabletViewPortCoeff;
-    line-height: $big-text-line-height-tablet * $adminTabletViewPortCoeff;
-    color: var(--text-color);
+  font-size: $tabletAtom * 12 * $adminTabletViewPortCoeff;
+  line-height: $big-text-line-height-tablet * $adminTabletViewPortCoeff;
+  color: var(--text-color);
 }
 
 @mixin adminBigTextMobile {
-    font-size: math.div($mobileAtom * 12, 2) * $adminMobileViewPortCoeff;
-    line-height: $big-text-line-height-mobile * $adminMobileViewPortCoeff;
-    color: var(--text-color);
+  font-size: math.div($mobileAtom * 12, 2) * $adminMobileViewPortCoeff;
+  line-height: $big-text-line-height-mobile * $adminMobileViewPortCoeff;
+  color: var(--text-color);
 }
 
 @mixin adminSmallTextDesktop {
-    font-size: $atom * 4 * $adminDesktopViewPortCoeff;
-    line-height: $small-text-line-height * $adminDesktopViewPortCoeff;
-    color: var(--text-color);
+  font-size: $atom * 4 * $adminDesktopViewPortCoeff;
+  line-height: $small-text-line-height * $adminDesktopViewPortCoeff;
+  color: var(--text-color);
 }
 
 @mixin adminSmallTextTablet {
-    font-size: $tabletAtom * 4 * $adminTabletViewPortCoeff;
-    line-height: $small-text-line-height-tablet * $adminTabletViewPortCoeff;
-    color: var(--text-color);
+  font-size: $tabletAtom * 4 * $adminTabletViewPortCoeff;
+  line-height: $small-text-line-height-tablet * $adminTabletViewPortCoeff;
+  color: var(--text-color);
 }
 
 @mixin adminSmallTextMobile {
-    font-size: $mobileAtom * 4 * $adminMobileViewPortCoeff;
-    line-height: $small-text-line-height-mobile * $adminMobileViewPortCoeff;
-    color: var(--text-color);
+  font-size: $mobileAtom * 4 * $adminMobileViewPortCoeff;
+  line-height: $small-text-line-height-mobile * $adminMobileViewPortCoeff;
+  color: var(--text-color);
 }
 
 
@@ -59,376 +65,376 @@ $barWidth: 120px;
 //////////////////////////
 
 @mixin adminDesktopGrid {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-column-gap: $desktopHGap * $adminDesktopViewPortCoeff;
-    padding-left: $desktopHGap * $adminDesktopViewPortCoeff;
-    padding-right: $desktopHGap * $adminDesktopViewPortCoeff;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: $desktopHGap * $adminDesktopViewPortCoeff;
+  padding-left: $desktopHGap * $adminDesktopViewPortCoeff;
+  padding-right: $desktopHGap * $adminDesktopViewPortCoeff;
 }
 
 @mixin adminTabletGrid {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-column-gap: $tabletHGap * $adminTabletViewPortCoeff;
-    padding-left: $tabletHGap * $adminTabletViewPortCoeff;
-    padding-right: $tabletHGap * $adminTabletViewPortCoeff;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: $tabletHGap * $adminTabletViewPortCoeff;
+  padding-left: $tabletHGap * $adminTabletViewPortCoeff;
+  padding-right: $tabletHGap * $adminTabletViewPortCoeff;
 }
 
 @mixin adminTabletFlex {
-    display: flex;
-    flex-direction: column;
-    padding-right: $tabletHGap * $adminTabletViewPortCoeff;
-    padding-left: $tabletHGap * $adminTabletViewPortCoeff;
+  display: flex;
+  flex-direction: column;
+  padding-right: $tabletHGap * $adminTabletViewPortCoeff;
+  padding-left: $tabletHGap * $adminTabletViewPortCoeff;
 }
 
 @mixin admin-mobile-flex {
-    display: flex;
-    flex-direction: column;
-    padding-right: $mobileAtom * $adminMobileViewPortCoeff;
-    padding-left: $mobileAtom * $adminMobileViewPortCoeff;
+  display: flex;
+  flex-direction: column;
+  padding-right: $mobileAtom * $adminMobileViewPortCoeff;
+  padding-left: $mobileAtom * $adminMobileViewPortCoeff;
 }
 
 @mixin editingStyles() {
-    background: repeating-linear-gradient(-45deg,
-            $adminAccentColor,
-            $adminAccentColor 10px,
-            $adminNegativeAccentColor 10px,
-            $adminNegativeAccentColor 20px) fixed bottom;
+  background: repeating-linear-gradient(-45deg,
+      $adminAccentColor,
+      $adminAccentColor 10px,
+      $adminNegativeAccentColor 10px,
+      $adminNegativeAccentColor 20px) fixed bottom;
 }
 
 @mixin editingStyles2() {
-    background: repeating-linear-gradient(-45deg,
-            transparentize($adminAccentColor, 0),
-            transparentize($adminAccentColor, 0) 10px,
-            transparentize($adminNegativeAccentColor, 1) 10px,
-            transparentize($adminNegativeAccentColor, 1) 20px) fixed bottom;
+  background: repeating-linear-gradient(-45deg,
+      transparentize($adminAccentColor, 0),
+      transparentize($adminAccentColor, 0) 10px,
+      transparentize($adminNegativeAccentColor, 1) 10px,
+      transparentize($adminNegativeAccentColor, 1) 20px) fixed bottom;
 }
 
 @mixin edit-media-overlay {
-    &:hover::after {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        content: '';
-        position: absolute;
-        color: silver;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        font-weight: bold;
-        font-size: 50pt;
-        pointer-events: none;
-        background-color: transparentize($adminAccentColor, 0.3);
-    }
+  &:hover::after {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    content: '';
+    position: absolute;
+    color: silver;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    font-weight: bold;
+    font-size: 50pt;
+    pointer-events: none;
+    background-color: transparentize($adminAccentColor, 0.3);
+  }
 }
 
 @mixin admin-textarea {
-    display: block;
-    width: 100%;
-    line-height: 140%;
-    padding: 2px 0;
-    margin: 0;
-    box-sizing: content-box;
-    border: none;
-    resize: none;
-
-    &:focus {
-        outline: none;
-    }
+  display: block;
+  width: 100%;
+  line-height: 140%;
+  padding: 2px 0;
+  margin: 0;
+  box-sizing: content-box;
+  border: none;
+  resize: none;
+
+  &:focus {
+    outline: none;
+  }
 
-    &[readonly] {
-        cursor: pointer;
+  &[readonly] {
+    cursor: pointer;
 
-        &::selection {
-            user-select: none;
-        }
+    &::selection {
+      user-select: none;
+    }
 
-        &:hover {
-            @include editingStyles2;
-            color: $adminNegativeAccentColor;
-        }
+    &:hover {
+      @include editingStyles2;
+      color: $adminNegativeAccentColor;
     }
+  }
 }
 
 @mixin empty-media-placeholder($text) {
-    background-color: black;
-
-    &::before {
-        content: $text;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        color: white;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-    }
+  background-color: black;
+
+  &::before {
+    content: $text;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
 }
 
 $highlightColor: #333;
 
 @mixin admin-controls {
-    a.btn {
-        display: block;
-        //border: 1px solid white;
-        padding: 3pt;
-        text-align: center;
-        user-select: none;
-
-        &:hover {
-            border-color: $highlightColor;
-            background-color: $highlightColor;
-        }
+  a.btn {
+    display: block;
+    //border: 1px solid white;
+    padding: 3pt;
+    text-align: center;
+    user-select: none;
+
+    &:hover {
+      border-color: $highlightColor;
+      background-color: $highlightColor;
     }
+  }
 
-    select {
-        color: white;
-        border-color: white;
-        background-color: black;
-        padding: 3pt;
+  select {
+    color: white;
+    border-color: white;
+    background-color: black;
+    padding: 3pt;
 
-        option {
-            color: white;
-        }
+    option {
+      color: white;
     }
+  }
 
-    input[type="checkbox"] {
-        display: inline-block;
-        margin-right: 6pt;
-    }
+  input[type="checkbox"] {
+    display: inline-block;
+    margin-right: 6pt;
+  }
 
-    textarea {
-        resize: none;
-    }
+  textarea {
+    resize: none;
+  }
 
-    input[type="text"],
-    textarea {
-        width: 100%;
-        display: block;
-        background-color: black;
-        color: white;
-        border: 1px solid white;
-        padding: 6pt;
-        resize: none;
-        box-sizing: border-box;
-    }
+  input[type="text"],
+  textarea {
+    width: 100%;
+    display: block;
+    background-color: black;
+    color: white;
+    border: 1px solid white;
+    padding: 6pt;
+    resize: none;
+    box-sizing: border-box;
+  }
 
-    input,
-    textarea,
-    select {
-        &:focus {
-            outline: none;
-            background-color: $highlightColor;
-            border-color: $highlightColor;
-        }
+  input,
+  textarea,
+  select {
+    &:focus {
+      outline: none;
+      background-color: $highlightColor;
+      border-color: $highlightColor;
     }
+  }
 }
 
 @mixin super-form {
-    @include admin-controls;
+  @include admin-controls;
 
-    .form-field {}
+  .form-field {}
 
-    .form-field+.form-field {
-        margin-top: 20pt;
-    }
+  .form-field+.form-field {
+    margin-top: 20pt;
+  }
 
-    .form-section+.form-section {
-        margin-top: 60pt;
-    }
+  .form-section+.form-section {
+    margin-top: 60pt;
+  }
 
-    label {
-        display: block;
-        user-select: none;
+  label {
+    display: block;
+    user-select: none;
 
-        .inner {
-            display: inline-block;
-            padding-bottom: 4pt;
-        }
+    .inner {
+      display: inline-block;
+      padding-bottom: 4pt;
     }
+  }
 }
 
 
 @mixin admin-button {
-    display: block;
-    color: white;
-    background-color: transparent;
-    box-shadow: none;
-    border: none;
-    outline: none;
-    text-decoration: none;
-    cursor: pointer;
+  display: block;
+  color: white;
+  background-color: transparent;
+  box-shadow: none;
+  border: none;
+  outline: none;
+  text-decoration: none;
+  cursor: pointer;
 
-    padding: 3pt 10pt;
-    text-align: center;
-    user-select: none;
+  padding: 3pt 10pt;
+  text-align: center;
+  user-select: none;
 
 
-    &:hover {
-        border-color: $highlightColor;
-        background-color: #333;
-    }
+  &:hover {
+    border-color: $highlightColor;
+    background-color: #333;
+  }
 
-    &:disabled {
-        color: gray;
-    }
+  &:disabled {
+    color: gray;
+  }
 }
 
 @mixin cancel-button {
 
-    &:hover:enabled,
-    &:focus:enabled {
-        //color: white;
-        //background-color: yellow;
-    }
+  &:hover:enabled,
+  &:focus:enabled {
+    //color: white;
+    //background-color: yellow;
+  }
 }
 
 @mixin save-button {
 
-    &:hover:enabled,
-    &:focus:enabled {
-        //color: white;
-        //background-color: yellow;
-    }
+  &:hover:enabled,
+  &:focus:enabled {
+    //color: white;
+    //background-color: yellow;
+  }
 }
 
 @mixin delete-button {
-    padding: 3pt 10pt;
+  padding: 3pt 10pt;
 
-    &:hover,
-    &:focus {
-        //color: white;
-        background-color: red;
-    }
+  &:hover,
+  &:focus {
+    //color: white;
+    background-color: red;
+  }
 }
 
 @mixin editor {
-    display: block;
-    background-color: var(--bg-color);
-    color: var(--text-color);
+  display: block;
+  background-color: var(--bg-color);
+  color: var(--text-color);
 }
 
 @mixin admin-form-layout {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
 
-    padding-bottom: 40px;
+  padding-bottom: 40px;
 
-    form {
-        font-family: $adminFont;
-        font-size: 14px;
-    }
+  form {
+    font-family: $adminFont;
+    font-size: 14px;
+  }
 
-    input,
-    select,
-    textarea {
-        font-family: $adminFont;
-        font-size: 14px;
-    }
+  input,
+  select,
+  textarea {
+    font-family: $adminFont;
+    font-size: 14px;
+  }
 
-    textarea {
-        resize: none;
-    }
+  textarea {
+    resize: none;
+  }
 
-    .controls {
-        position: absolute;
-        bottom: 15px;
+  .controls {
+    position: absolute;
+    bottom: 15px;
 
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-    button+button {
-        margin-left: 4px;
-    }
+  button+button {
+    margin-left: 4px;
+  }
 }
 
 @mixin admin-form-title {
-    font-family: $adminFont;
-    font-size: 14px;
+  font-family: $adminFont;
+  font-size: 14px;
 }
 
 @mixin admin-form {
-    display: block;
+  display: block;
 }
 
 @mixin bone-input {
-    display: block;
-    border: none;
-    background-color:rgba(gray, 0.1);
-    color: var(--text-color);
+  display: block;
+  border: none;
+  background-color: rgba(gray, 0.1);
+  color: var(--text-color);
 
-    &:hover {
-        background-color: lightgray;
-        cursor: pointer;
-    }
+  &:hover {
+    background-color: lightgray;
+    cursor: pointer;
+  }
 
-    &:focus {
-        outline: none;
-        color: black;
-        background-color: $adminAccentColor;
-    }
+  &:focus {
+    outline: none;
+    color: black;
+    background-color: $adminAccentColor;
+  }
 }
 
 @mixin adminInput {
-    display: block;
-    width: 100%;
-    padding: 6px;
-    color: silver;
-    border: 1px solid silver;
-    background-color: transparent;
-    box-sizing: border-box;
+  display: block;
+  width: 100%;
+  padding: 6px;
+  color: silver;
+  border: 1px solid silver;
+  background-color: transparent;
+  box-sizing: border-box;
 
-    &:hover {
-        border-color: transparent;
-        background-color: #333;
-        cursor: pointer;
-    }
+  &:hover {
+    border-color: transparent;
+    background-color: #333;
+    cursor: pointer;
+  }
 
-    &:focus {
-        outline: none;
-        color: white;
-        border-color: transparent;
-        background-color: #555;
-    }
+  &:focus {
+    outline: none;
+    color: white;
+    border-color: transparent;
+    background-color: #555;
+  }
 }
 
 @mixin form-select-basic {
-    width: 100%;
-    margin-bottom: 0.5em;
-    padding: 6px;
+  width: 100%;
+  margin-bottom: 0.5em;
+  padding: 6px;
 
-    font-size: inherit;
-    box-sizing: border-box;
-    background-color: transparent;
-    border: 1px solid silver;
-    outline: none;
-    color: silver;
+  font-size: inherit;
+  box-sizing: border-box;
+  background-color: transparent;
+  border: 1px solid silver;
+  outline: none;
+  color: silver;
 
-    &:hover,
-    &:focus {
-      color: $adminAccentColor;
-    }
+  &:hover,
+  &:focus {
+    color: $adminAccentColor;
+  }
 
-    option {
-      background-color: #444;
+  option {
+    background-color: #444;
 
-      &:checked {
-        color: $adminAccentColor;
-      }
+    &:checked {
+      color: $adminAccentColor;
+    }
 
-      &:not(checked) {
-        color: silver;
-      }
+    &:not(checked) {
+      color: silver;
     }
+  }
 }
 
 @mixin adminInputContainer {