I swapped out sass for scss file for styling because scss is a bit more
accessible because of its similarity with base css. I also plugged in stylint to normalize a css standard throughout the project to work with prettier, which handles formatting The structure scss file has been brought in line with the new standard but the remaining need to be adjusted as well. Those will be added with an additional commit.
This commit is contained in:
Are0h
parent
aa3301fb66
commit
61b9acb280
37 changed files with 5249 additions and 2567 deletions
21
.prettierrc
21
.prettierrc
|
|
@ -1,11 +1,27 @@
|
||||||
|
{
|
||||||
|
"overrides": [
|
||||||
{
|
{
|
||||||
|
"files": ".prettierrc",
|
||||||
|
"options": { "parser": "json" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": "*.scss",
|
||||||
|
"options": {
|
||||||
|
"tabWidth": 4,
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 90
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": "*.js",
|
||||||
|
"options": {
|
||||||
"arrowParens": "avoid",
|
"arrowParens": "avoid",
|
||||||
"bracketSpacing": true,
|
"bracketSpacing": true,
|
||||||
"htmlWhitespaceSensitivity": "css",
|
"htmlWhitespaceSensitivity": "css",
|
||||||
"insertPragma": false,
|
"insertPragma": false,
|
||||||
"bracketSameLine": false,
|
"bracketSameLine": false,
|
||||||
"jsxSingleQuote": true,
|
"jsxSingleQuote": true,
|
||||||
"parser": "babel",
|
|
||||||
"proseWrap": "preserve",
|
"proseWrap": "preserve",
|
||||||
"requirePragma": false,
|
"requirePragma": false,
|
||||||
"semi": true,
|
"semi": true,
|
||||||
|
|
@ -15,3 +31,6 @@
|
||||||
"tabWidth": 4,
|
"tabWidth": 4,
|
||||||
"printWidth": 90
|
"printWidth": 90
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
|
||||||
6
.stylelintrc
Normal file
6
.stylelintrc
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"extends": [
|
||||||
|
"stylelint-config-standard-scss",
|
||||||
|
"stylelint-config-prettier-scss"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="notifications" class="notifications">
|
<div id="notifications" class="notifications">
|
||||||
<div id="notifyMessage" class="notifyMessage">
|
<div id="notify-message" class="notify-message">
|
||||||
<div id="notify-good" class="notify-icon">
|
<div id="notify-good" class="notify-icon">
|
||||||
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-emoji-flirt"/></svg>
|
<svg viewbox="0 0 20 20" class="icons"><use xlink:href="/assets/images/global/sprite.svg#entypo-emoji-flirt"/></svg>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -37,9 +37,9 @@
|
||||||
|
|
||||||
{% block stylesheets %}
|
{% block stylesheets %}
|
||||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=vbhj">
|
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=vbhj">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block mainContent %}
|
{% block mainContent %}
|
||||||
<div id="post-edit-index" data-index="{{ id }}" data-uuid="{{ uuid }}" data-slug="{{ slug }}" data-layout="{{ layout }}">
|
<div id="post-edit-index" data-index="{{ id }}" data-uuid="{{ uuid }}" data-slug="{{ slug }}" data-layout="{{ layout }}">
|
||||||
<div id="post-edit-index-wrapper">
|
<div id="post-edit-index-wrapper">
|
||||||
<div id="post-feature">
|
<div id="post-feature">
|
||||||
|
|
@ -66,15 +66,15 @@
|
||||||
<div id="page-images-list">
|
<div id="page-images-list">
|
||||||
{% if media|length > 1 %}
|
{% if media|length > 1 %}
|
||||||
{% for item in media %}
|
{% for item in media %}
|
||||||
{% if item.type == "mp4"%}
|
{% if item.type == "mp4" %}
|
||||||
<div id="{{loop.index0}}" class="video-item" data-source="{{ item.file }}"></div>
|
<div id="{{ loop.index0 }}" class="video-item" data-source="{{ item.file }}"></div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div id="{{loop.index0}}" class="img-item" style="background: url({{ item.file }}) no-repeat center center / cover"></div>
|
<div id="{{ loop.index0 }}" class="img-item" style="background: url({{ item.file }}) no-repeat center center / cover"></div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% if media[0] != '' %}
|
{% if media[0] != '' %}
|
||||||
{% if media[0].type == "mp4"%}
|
{% if media[0].type == "mp4" %}
|
||||||
<div id="0" class="video-item" data-source="{{ media[0].file }}"></div>
|
<div id="0" class="video-item" data-source="{{ media[0].file }}"></div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div id="0" class="img-item" style="background: url({{ media[0].file }}) no-repeat center center / cover"></div>
|
<div id="0" class="img-item" style="background: url({{ media[0].file }}) no-repeat center center / cover"></div>
|
||||||
|
|
@ -88,15 +88,15 @@
|
||||||
<div id="page-files-list">
|
<div id="page-files-list">
|
||||||
{% if files|length > 1 %}
|
{% if files|length > 1 %}
|
||||||
{% for item in files %}
|
{% for item in files %}
|
||||||
{% if item.type == "mp3"%}
|
{% if item.type == "mp3" %}
|
||||||
<div id="{{loop.index0}}" class="audio-item" data-source="{{ item.file }}"></div>
|
<div id="{{ loop.index0 }}" class="audio-item" data-source="{{ item.file }}"></div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div id="{{loop.index0}}" class="file-item" data-source="{{ item.file }}"></div>
|
<div id="{{ loop.index0 }}" class="file-item" data-source="{{ item.file }}"></div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% else %}
|
{% else %}
|
||||||
{% if files[0] != '' %}
|
{% if files[0] != '' %}
|
||||||
{% if files[0].type == "mp3"%}
|
{% if files[0].type == "mp3" %}
|
||||||
<div id="0" class="audio-item" data-source="{{ files[0].file }}"></div>
|
<div id="0" class="audio-item" data-source="{{ files[0].file }}"></div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div id="0" class="file-item" data-source="{{ files[0].file }}"></div>
|
<div id="0" class="file-item" data-source="{{ files[0].file }}"></div>
|
||||||
|
|
@ -119,7 +119,7 @@
|
||||||
<div id="post-title" class="column">
|
<div id="post-title" class="column">
|
||||||
<label>TITLE</label>
|
<label>TITLE</label>
|
||||||
<textarea id="post_title" type="text" name="post_title" class="post-edit" placeholder="TITLE">
|
<textarea id="post_title" type="text" name="post_title" class="post-edit" placeholder="TITLE">
|
||||||
{{- _title -}}
|
{{ - _title - }}
|
||||||
</textarea>
|
</textarea>
|
||||||
|
|
||||||
<div id="layouts">
|
<div id="layouts">
|
||||||
|
|
@ -143,7 +143,7 @@
|
||||||
<div id="post-meta" class="column">
|
<div id="post-meta" class="column">
|
||||||
<label>TAGS</label>
|
<label>TAGS</label>
|
||||||
<textarea id="post_tags" type="text" name="post_tags" class="form-control" placeholder="tags [comma seperated]">
|
<textarea id="post_tags" type="text" name="post_tags" class="form-control" placeholder="tags [comma seperated]">
|
||||||
{{- tags -}}
|
{{ - tags - }}
|
||||||
</textarea>
|
</textarea>
|
||||||
<label>OPTIONS</label>
|
<label>OPTIONS</label>
|
||||||
{% apply spaceless %}
|
{% apply spaceless %}
|
||||||
|
|
@ -155,8 +155,7 @@
|
||||||
</span>
|
</span>
|
||||||
<input id="page-files-upload" type="file" name="page-files-upload" multiple/>
|
<input id="page-files-upload" type="file" name="page-files-upload" multiple/>
|
||||||
<input id="post-image-upload" type="file" name="post-image-upload"/>
|
<input id="post-image-upload" type="file" name="post-image-upload"/>
|
||||||
<input id="form_token" name="token" type="hidden" value="{{ token }}">
|
<input id="form_token" name="token" type="hidden" value="{{ token }}"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="edit-post">
|
<div id="edit-post">
|
||||||
|
|
@ -164,7 +163,7 @@
|
||||||
{{ include("dash/partials/editor.twig") }}
|
{{ include("dash/partials/editor.twig") }}
|
||||||
{% endapply %}
|
{% endapply %}
|
||||||
<div id="edit-post-wrapper">
|
<div id="edit-post-wrapper">
|
||||||
<textarea id="edit" spellcheck="false">{{- content -}}</textarea>
|
<textarea id="edit" spellcheck="false">{{ - content - }}</textarea>
|
||||||
<pre id="highlight">
|
<pre id="highlight">
|
||||||
<code id="highlight-content" class="language-md">
|
<code id="highlight-content" class="language-md">
|
||||||
|
|
||||||
|
|
@ -174,8 +173,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block javascripts %}
|
{% block javascripts %}
|
||||||
<script src="/assets/scripts/Start.js?=dfdfvd" type="text/javascript"></script>
|
<script src="/assets/scripts/Start.js?=dfdfvd" type="text/javascript"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
2207
package-lock.json
generated
2207
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -13,7 +13,10 @@
|
||||||
"eslint": "^8.11.0",
|
"eslint": "^8.11.0",
|
||||||
"eslint-plugin-babel": "^5.3.1",
|
"eslint-plugin-babel": "^5.3.1",
|
||||||
"parcel": "^2.0.1",
|
"parcel": "^2.0.1",
|
||||||
"prettier": "^2.6.0"
|
"prettier": "^2.6.0",
|
||||||
|
"stylelint": "^14.8.2",
|
||||||
|
"stylelint-config-prettier-scss": "^0.0.1",
|
||||||
|
"stylelint-config-standard-scss": "^3.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/core": "^7.16.5",
|
"@babel/core": "^7.16.5",
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,43 +0,0 @@
|
||||||
@use "sass:color"
|
|
||||||
//CSS
|
|
||||||
//Bulma
|
|
||||||
@import '../../node_modules/bulma/sass/utilities/_all'
|
|
||||||
@import '../../node_modules/bulma/sass/grid/columns'
|
|
||||||
|
|
||||||
//Colors
|
|
||||||
@import 'main/_colors'
|
|
||||||
|
|
||||||
//Mixins
|
|
||||||
@import 'main/_mixins'
|
|
||||||
|
|
||||||
//Normalize
|
|
||||||
@import 'main/_normalize'
|
|
||||||
|
|
||||||
//Typography
|
|
||||||
@import 'main/_typography'
|
|
||||||
|
|
||||||
//Main Structure
|
|
||||||
@import 'main/_structure'
|
|
||||||
|
|
||||||
//Index
|
|
||||||
@import 'main/_index'
|
|
||||||
|
|
||||||
//Settings
|
|
||||||
@import 'main/_settings'
|
|
||||||
|
|
||||||
//Error
|
|
||||||
@import 'main/_error'
|
|
||||||
|
|
||||||
//Navigation
|
|
||||||
@import 'main/_navigation'
|
|
||||||
|
|
||||||
//Forms
|
|
||||||
@import 'main/_forms'
|
|
||||||
|
|
||||||
//Posts
|
|
||||||
@import 'main/_posts'
|
|
||||||
|
|
||||||
//Editor
|
|
||||||
@import 'main/_calendar'
|
|
||||||
@import 'main/_editor'
|
|
||||||
@import 'main/_editor-highlight'
|
|
||||||
43
src/styles/dash.scss
Normal file
43
src/styles/dash.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
@use "sass:color";
|
||||||
|
//CSS
|
||||||
|
//Bulma
|
||||||
|
@import "../../node_modules/bulma/sass/utilities/_all";
|
||||||
|
@import "../../node_modules/bulma/sass/grid/columns";
|
||||||
|
|
||||||
|
//Colors
|
||||||
|
@import "main/_colors";
|
||||||
|
|
||||||
|
//Mixins
|
||||||
|
@import "main/_mixins";
|
||||||
|
|
||||||
|
//Normalize
|
||||||
|
@import "main/_normalize";
|
||||||
|
|
||||||
|
//Typography
|
||||||
|
@import "main/_typography";
|
||||||
|
|
||||||
|
//Main Structure
|
||||||
|
@import "main/_structure";
|
||||||
|
|
||||||
|
//Index
|
||||||
|
@import "main/_index";
|
||||||
|
|
||||||
|
//Settings
|
||||||
|
@import "main/_settings";
|
||||||
|
|
||||||
|
//Error
|
||||||
|
@import "main/_error";
|
||||||
|
|
||||||
|
//Navigation
|
||||||
|
@import "main/_navigation";
|
||||||
|
|
||||||
|
//Forms
|
||||||
|
@import "main/_forms";
|
||||||
|
|
||||||
|
//Posts
|
||||||
|
@import "main/_posts";
|
||||||
|
|
||||||
|
//Editor
|
||||||
|
@import "main/_calendar";
|
||||||
|
@import "main/_editor";
|
||||||
|
@import "main/_editor-highlight";
|
||||||
|
|
@ -1,242 +0,0 @@
|
||||||
// TINY DATE
|
|
||||||
.dp-modal
|
|
||||||
position: fixed
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
right: 0
|
|
||||||
bottom: 0
|
|
||||||
// background rgba(255, 255, 255, 0.75)
|
|
||||||
@include background-opacity(color.adjust($primary, $lightness: -70%), 0.75)
|
|
||||||
z-index: 2000
|
|
||||||
|
|
||||||
.dp
|
|
||||||
position: relative
|
|
||||||
background: $primary
|
|
||||||
box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25)
|
|
||||||
line-height: 1.4
|
|
||||||
border-radius: 4px
|
|
||||||
max-height: 400px
|
|
||||||
z-index: 5000
|
|
||||||
padding-top: 6px
|
|
||||||
overflow: hidden
|
|
||||||
-webkit-tap-highlight-color: transparent
|
|
||||||
|
|
||||||
.dp:before
|
|
||||||
content: ' '
|
|
||||||
height: 6px
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
right: 0
|
|
||||||
background: $highlight
|
|
||||||
// background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%)
|
|
||||||
|
|
||||||
.dp-permanent .dp
|
|
||||||
padding-top: 0
|
|
||||||
border: 1px solid #EEE
|
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
.dp-permanent .dp:before
|
|
||||||
display: none
|
|
||||||
|
|
||||||
.dp-cal
|
|
||||||
min-height: 300px
|
|
||||||
|
|
||||||
.dp-below
|
|
||||||
position: absolute
|
|
||||||
font-size: 0.8em
|
|
||||||
width: 400px
|
|
||||||
max-width: 90vw
|
|
||||||
|
|
||||||
.dp-permanent
|
|
||||||
position: relative
|
|
||||||
font-size: 0.8em
|
|
||||||
width: 400px
|
|
||||||
max-width: 100vw
|
|
||||||
|
|
||||||
.dp-permanent .dp
|
|
||||||
z-index: 0
|
|
||||||
|
|
||||||
.dp-modal .dp
|
|
||||||
position: absolute
|
|
||||||
top: 50%
|
|
||||||
left: 50%
|
|
||||||
max-width: 600px
|
|
||||||
width: calc(100% - 4em)
|
|
||||||
transform: translate(-50%, -50%)
|
|
||||||
animation: slide-up 0.3s forwards
|
|
||||||
|
|
||||||
.dp-months
|
|
||||||
padding: 24px
|
|
||||||
|
|
||||||
.dp-years
|
|
||||||
box-sizing: border-box
|
|
||||||
max-height: 400px
|
|
||||||
padding: 8px 0
|
|
||||||
/* HACK for Chrome on Android */
|
|
||||||
overflow: auto !important
|
|
||||||
|
|
||||||
.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year
|
|
||||||
box-sizing: border-box
|
|
||||||
text-align: center
|
|
||||||
text-decoration: none
|
|
||||||
position: relative
|
|
||||||
color: $white
|
|
||||||
border-radius: 2px
|
|
||||||
border: 0
|
|
||||||
background: transparent
|
|
||||||
|
|
||||||
.dp-cal-header
|
|
||||||
position: relative
|
|
||||||
text-align: center
|
|
||||||
padding-bottom: 16px
|
|
||||||
background: color.adjust($primary, $lightness: -10%)
|
|
||||||
|
|
||||||
.dp-next, .dp-prev
|
|
||||||
position: absolute
|
|
||||||
width: 30px
|
|
||||||
height: 30px
|
|
||||||
overflow: hidden
|
|
||||||
top: 14px
|
|
||||||
color: color.adjust($primary, $lightness: -50%)
|
|
||||||
border-radius: 2px
|
|
||||||
border: 0
|
|
||||||
background: transparent
|
|
||||||
|
|
||||||
.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover
|
|
||||||
outline: none
|
|
||||||
color: inherit
|
|
||||||
|
|
||||||
.dp-prev
|
|
||||||
left: 24px
|
|
||||||
|
|
||||||
.dp-next
|
|
||||||
right: 24px
|
|
||||||
|
|
||||||
.dp-prev:before, .dp-next:before
|
|
||||||
content: ''
|
|
||||||
border: 2px solid
|
|
||||||
width: 10px
|
|
||||||
height: 10px
|
|
||||||
display: inline-block
|
|
||||||
transform: rotate(-45deg)
|
|
||||||
transition: border-color 0.2s
|
|
||||||
margin: 9px 0 40px 4px
|
|
||||||
|
|
||||||
.dp-prev:before
|
|
||||||
border-right: 0
|
|
||||||
border-bottom: 0
|
|
||||||
|
|
||||||
.dp-next:before
|
|
||||||
border-left: 0
|
|
||||||
border-top: 0
|
|
||||||
margin-left: 0
|
|
||||||
margin-right: 4px
|
|
||||||
|
|
||||||
.dp-cal-month, .dp-cal-year
|
|
||||||
display: inline-block
|
|
||||||
font-size: 1.4em
|
|
||||||
padding: 16px 8px 8px
|
|
||||||
outline: none
|
|
||||||
|
|
||||||
.dp-cal-footer
|
|
||||||
text-align: center
|
|
||||||
background: color.adjust($primary, $lightness: -10%)
|
|
||||||
|
|
||||||
.dp-day-today:after
|
|
||||||
content: ''
|
|
||||||
height: 0
|
|
||||||
width: 0
|
|
||||||
border: 7px solid $highlight
|
|
||||||
border-bottom-color: transparent
|
|
||||||
border-left-color: transparent
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
right: 0
|
|
||||||
|
|
||||||
.dp-close, .dp-clear, .dp-today
|
|
||||||
box-sizing: border-box
|
|
||||||
display: inline-block
|
|
||||||
width: 33%
|
|
||||||
padding: 8px
|
|
||||||
text-decoration: none
|
|
||||||
color: color.adjust($primary, $lightness: -50%)
|
|
||||||
border: 0
|
|
||||||
background: transparent
|
|
||||||
|
|
||||||
.dp-permanent .dp-close, .dp-permanent .dp-clear
|
|
||||||
display: none
|
|
||||||
|
|
||||||
.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active
|
|
||||||
background: $highlight
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
@media screen and (min-device-width: 1200px)
|
|
||||||
.dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus
|
|
||||||
background: $highlight
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
.dp-col-header, .dp-day
|
|
||||||
width: 14.28571429%
|
|
||||||
display: inline-block
|
|
||||||
padding: 8px
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
.dp-col-header
|
|
||||||
color: #AAA
|
|
||||||
text-transform: uppercase
|
|
||||||
font-weight: 300
|
|
||||||
font-size: 0.8em
|
|
||||||
padding: 8px 0
|
|
||||||
|
|
||||||
.dp-month
|
|
||||||
width: 33%
|
|
||||||
display: inline-block
|
|
||||||
padding: 8px
|
|
||||||
|
|
||||||
.dp-year
|
|
||||||
display: block
|
|
||||||
padding: 8px 40px
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
.dp-edge-day
|
|
||||||
color: #AAA
|
|
||||||
|
|
||||||
.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus
|
|
||||||
outline: none
|
|
||||||
background: color.adjust($primary, $lightness: -40%)
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
.dp-selected:hover, .dp-selected:focus, .dp-selected
|
|
||||||
background: $highlight
|
|
||||||
color: color.adjust($primary, $lightness: -60%)
|
|
||||||
|
|
||||||
.dp-day-disabled
|
|
||||||
background: transparent
|
|
||||||
color: #DDD
|
|
||||||
|
|
||||||
.dp-day-disabled:focus, .dp-day-disabled:hover
|
|
||||||
background: #DDD
|
|
||||||
|
|
||||||
.dp-focuser
|
|
||||||
position: absolute
|
|
||||||
z-index: 0
|
|
||||||
top: 50%
|
|
||||||
left: 50%
|
|
||||||
|
|
||||||
// Responsive
|
|
||||||
@media (max-width: 480px), (max-height: 480px)
|
|
||||||
.dp-modal .dp
|
|
||||||
font-size: 0.9em
|
|
||||||
width: auto
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
.dp-day-of-week, .dp-day
|
|
||||||
padding: 8px
|
|
||||||
|
|
||||||
@keyframes slide-up
|
|
||||||
0%
|
|
||||||
transform: translate(-50%, 100%)
|
|
||||||
|
|
||||||
100%
|
|
||||||
transform: translate(-50%, -50%)
|
|
||||||
288
src/styles/main/_calendar.scss
Normal file
288
src/styles/main/_calendar.scss
Normal file
|
|
@ -0,0 +1,288 @@
|
||||||
|
.dp-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 2000;
|
||||||
|
}
|
||||||
|
.dp {
|
||||||
|
position: relative;
|
||||||
|
background: $primary;
|
||||||
|
box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.25);
|
||||||
|
line-height: 1.4;
|
||||||
|
border-radius: 4px;
|
||||||
|
max-height: 400px;
|
||||||
|
z-index: 5000;
|
||||||
|
padding-top: 6px;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
.dp:before {
|
||||||
|
content: " ";
|
||||||
|
height: 6px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: $highlight;
|
||||||
|
}
|
||||||
|
.dp-permanent .dp {
|
||||||
|
padding-top: 0;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.dp-permanent .dp:before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.dp-cal {
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
.dp-below {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 0.8em;
|
||||||
|
width: 400px;
|
||||||
|
max-width: 90vw;
|
||||||
|
}
|
||||||
|
.dp-permanent {
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.8em;
|
||||||
|
width: 400px;
|
||||||
|
max-width: 100vw;
|
||||||
|
}
|
||||||
|
.dp-permanent .dp {
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.dp-modal .dp {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
max-width: 600px;
|
||||||
|
width: calc(100% - 4em);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
animation: slide-up 0.3s forwards;
|
||||||
|
}
|
||||||
|
.dp-months {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
.dp-years {
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-height: 400px;
|
||||||
|
padding: 8px 0;
|
||||||
|
/* HACK for Chrome on Android */
|
||||||
|
overflow: auto !important;
|
||||||
|
}
|
||||||
|
.dp-cal-month,
|
||||||
|
.dp-cal-year,
|
||||||
|
.dp-day,
|
||||||
|
.dp-month,
|
||||||
|
.dp-year {
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
position: relative;
|
||||||
|
color: $white;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.dp-cal-header {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
background: color.adjust($primary, $lightness: -10%);
|
||||||
|
}
|
||||||
|
.dp-next,
|
||||||
|
.dp-prev {
|
||||||
|
position: absolute;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
overflow: hidden;
|
||||||
|
top: 14px;
|
||||||
|
color: color.adjust($primary, $lightness: -50%);
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.dp-next:focus,
|
||||||
|
.dp-prev:focus,
|
||||||
|
.dp-next:hover,
|
||||||
|
.dp-prev:hover {
|
||||||
|
outline: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.dp-prev {
|
||||||
|
left: 24px;
|
||||||
|
}
|
||||||
|
.dp-next {
|
||||||
|
right: 24px;
|
||||||
|
}
|
||||||
|
.dp-prev:before,
|
||||||
|
.dp-next:before {
|
||||||
|
content: "";
|
||||||
|
border: 2px solid;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
margin: 9px 0 40px 4px;
|
||||||
|
}
|
||||||
|
.dp-prev:before {
|
||||||
|
border-right: 0;
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
.dp-next:before {
|
||||||
|
border-left: 0;
|
||||||
|
border-top: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
.dp-cal-month,
|
||||||
|
.dp-cal-year {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 1.4em;
|
||||||
|
padding: 16px 8px 8px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.dp-cal-footer {
|
||||||
|
text-align: center;
|
||||||
|
background: color.adjust($primary, $lightness: -10%);
|
||||||
|
}
|
||||||
|
.dp-day-today:after {
|
||||||
|
content: "";
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
border: 7px solid $highlight;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.dp-close,
|
||||||
|
.dp-clear,
|
||||||
|
.dp-today {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: inline-block;
|
||||||
|
width: 33%;
|
||||||
|
padding: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: color.adjust($primary, $lightness: -50%);
|
||||||
|
border: 0;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.dp-permanent .dp-close,
|
||||||
|
.dp-permanent .dp-clear {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.dp-close:active,
|
||||||
|
.dp-clear:active,
|
||||||
|
.dp-today:active,
|
||||||
|
.dp-next:active,
|
||||||
|
.dp-prev:active,
|
||||||
|
.dp-cal-month:active,
|
||||||
|
.dp-cal-year:active {
|
||||||
|
background: $highlight;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
@media screen and (min-device-width: 1200px) {
|
||||||
|
.dp-close:hover,
|
||||||
|
.dp-close:focus,
|
||||||
|
.dp-clear:hover,
|
||||||
|
.dp-clear:focus,
|
||||||
|
.dp-today:hover,
|
||||||
|
.dp-today:focus,
|
||||||
|
.dp-next:hover,
|
||||||
|
.dp-next:focus,
|
||||||
|
.dp-prev:hover,
|
||||||
|
.dp-prev:focus,
|
||||||
|
.dp-cal-month:focus,
|
||||||
|
.dp-cal-month:hover,
|
||||||
|
.dp-cal-year:hover,
|
||||||
|
.dp-cal-year:focus {
|
||||||
|
background: $highlight;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dp-col-header,
|
||||||
|
.dp-day {
|
||||||
|
width: 14.28571429%;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.dp-col-header {
|
||||||
|
color: #aaa;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
.dp-month {
|
||||||
|
width: 33%;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.dp-year {
|
||||||
|
display: block;
|
||||||
|
padding: 8px 40px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.dp-edge-day {
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
.dp-day:hover,
|
||||||
|
.dp-month:hover,
|
||||||
|
.dp-year:hover,
|
||||||
|
.dp-current:focus,
|
||||||
|
.dp-current,
|
||||||
|
.dp-day:focus,
|
||||||
|
.dp-month:focus,
|
||||||
|
.dp-year:focus {
|
||||||
|
outline: none;
|
||||||
|
background: color.adjust($primary, $lightness: -40%);
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
.dp-selected:hover,
|
||||||
|
.dp-selected:focus,
|
||||||
|
.dp-selected {
|
||||||
|
background: $highlight;
|
||||||
|
color: color.adjust($primary, $lightness: -60%);
|
||||||
|
}
|
||||||
|
.dp-day-disabled {
|
||||||
|
background: transparent;
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
.dp-day-disabled:focus,
|
||||||
|
.dp-day-disabled:hover {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
.dp-focuser {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
// Responsive
|
||||||
|
@media (max-width: 480px), (max-height: 480px) {
|
||||||
|
.dp-modal .dp {
|
||||||
|
font-size: 0.9em;
|
||||||
|
width: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.dp-day-of-week,
|
||||||
|
.dp-day {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-up {
|
||||||
|
0% {
|
||||||
|
transform: translate(-50%, 100%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
} ;
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
$primary: #1D3040 //gradient #2F4C65
|
|
||||||
//$primary = #200317; deep sexy purple
|
|
||||||
$secondary: #b2cce5
|
|
||||||
$tertiary: #f5ab35
|
|
||||||
$highlight: #fc6399
|
|
||||||
$white: #EFEBE3
|
|
||||||
$grey: #abb7b7
|
|
||||||
$black: #32302f
|
|
||||||
|
|
||||||
//editor colors
|
|
||||||
$eventCool: #32cd32
|
|
||||||
$eventLame: #F64747
|
|
||||||
|
|
||||||
$editorPrimary: #fde3a7
|
|
||||||
$editorSecondary: #e7903c
|
|
||||||
$editorTertiary: #6bb9f0
|
|
||||||
$editorString: #dcc6e0
|
|
||||||
$editorTag: #e73c4e
|
|
||||||
17
src/styles/main/_colors.scss
Normal file
17
src/styles/main/_colors.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
$primary: #1d3040;
|
||||||
|
$secondary: #b2cce5;
|
||||||
|
$tertiary: #f5ab35;
|
||||||
|
$highlight: #fc6399;
|
||||||
|
$white: #efebe3;
|
||||||
|
$grey: #abb7b7;
|
||||||
|
$black: #32302f;
|
||||||
|
|
||||||
|
//editor colors
|
||||||
|
$eventCool: #32cd32;
|
||||||
|
$eventLame: #f64747;
|
||||||
|
|
||||||
|
$editorPrimary: #fde3a7;
|
||||||
|
$editorSecondary: #e7903c;
|
||||||
|
$editorTertiary: #6bb9f0;
|
||||||
|
$editorString: #dcc6e0;
|
||||||
|
$editorTag: #e73c4e;
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
code[class*="language-"],
|
|
||||||
pre[class*="language-"]
|
|
||||||
color: $editorPrimary
|
|
||||||
background: none
|
|
||||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3)
|
|
||||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
|
|
||||||
font-size: 1em
|
|
||||||
text-align: left
|
|
||||||
white-space: pre
|
|
||||||
word-spacing: normal
|
|
||||||
word-break: normal
|
|
||||||
word-wrap: normal
|
|
||||||
line-height: 1.5
|
|
||||||
-moz-tab-size: 4
|
|
||||||
-o-tab-size: 4
|
|
||||||
tab-size: 4
|
|
||||||
-webkit-hyphens: none
|
|
||||||
-moz-hyphens: none
|
|
||||||
-ms-hyphens: none
|
|
||||||
hyphens: none
|
|
||||||
pre[class*="language-"]
|
|
||||||
//padding: 1em
|
|
||||||
margin: .1em 0
|
|
||||||
overflow: auto
|
|
||||||
border-radius: 0.3em
|
|
||||||
:not(pre) > code[class*="language-"],
|
|
||||||
pre[class*="language-"]
|
|
||||||
background: $primary
|
|
||||||
:not(pre)
|
|
||||||
& > code[class*="language-"]
|
|
||||||
padding: .1em
|
|
||||||
border-radius: .3em
|
|
||||||
white-space: normal
|
|
||||||
.token.comment,
|
|
||||||
.token.prolog,
|
|
||||||
.token.doctype,
|
|
||||||
.token.cdata
|
|
||||||
color: #8292a2
|
|
||||||
.token
|
|
||||||
&.punctuation
|
|
||||||
color: $editorSecondary
|
|
||||||
&.namespace
|
|
||||||
opacity: .6
|
|
||||||
&.keyword
|
|
||||||
color: #66d9ef
|
|
||||||
&.italic
|
|
||||||
font-style: italic
|
|
||||||
&.entity
|
|
||||||
cursor: help
|
|
||||||
&.content
|
|
||||||
color: $editorTertiary
|
|
||||||
.token.property,
|
|
||||||
.token.tag,
|
|
||||||
.token.constant,
|
|
||||||
.token.symbol,
|
|
||||||
.token.deleted
|
|
||||||
color: $editorTag
|
|
||||||
.token.boolean,
|
|
||||||
.token.number
|
|
||||||
color: #ae81ff
|
|
||||||
.token.selector,
|
|
||||||
.token.attr-name,
|
|
||||||
.token.string,
|
|
||||||
.token.char,
|
|
||||||
.token.builtin,
|
|
||||||
.token.inserted
|
|
||||||
color: #a6e22e
|
|
||||||
.token.operator,
|
|
||||||
.token.entity,
|
|
||||||
.token.url,
|
|
||||||
.language-css .token.string,
|
|
||||||
.style .token.string,
|
|
||||||
.token.variable
|
|
||||||
color: $editorString
|
|
||||||
.token.atrule,
|
|
||||||
.token.attr-value,
|
|
||||||
.token.function,
|
|
||||||
.token.class-name
|
|
||||||
color: #e6db74
|
|
||||||
.token.regex,
|
|
||||||
.token.important
|
|
||||||
color: $editorSecondary
|
|
||||||
.token.important,
|
|
||||||
.token.bold
|
|
||||||
font-weight: bold
|
|
||||||
105
src/styles/main/_editor-highlight.scss
Normal file
105
src/styles/main/_editor-highlight.scss
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
color: $editorPrimary;
|
||||||
|
background: none;
|
||||||
|
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||||
|
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-moz-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
pre[class*="language-"] {
|
||||||
|
//padding: 1em
|
||||||
|
margin: 0.1em 0;
|
||||||
|
overflow: auto;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
}
|
||||||
|
:not(pre) > code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
background: $primary;
|
||||||
|
}
|
||||||
|
:not(pre) {
|
||||||
|
& > code[class*="language-"] {
|
||||||
|
padding: 0.1em;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: #8292a2;
|
||||||
|
}
|
||||||
|
.token {
|
||||||
|
&.punctuation {
|
||||||
|
color: $editorSecondary;
|
||||||
|
}
|
||||||
|
&.namespace {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
&.keyword {
|
||||||
|
color: #66d9ef;
|
||||||
|
}
|
||||||
|
&.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
&.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
&.content {
|
||||||
|
color: $editorTertiary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.token.property,
|
||||||
|
.token.tag,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol,
|
||||||
|
.token.deleted {
|
||||||
|
color: $editorTag;
|
||||||
|
}
|
||||||
|
.token.boolean,
|
||||||
|
.token.number {
|
||||||
|
color: #ae81ff;
|
||||||
|
}
|
||||||
|
.token.selector,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.builtin,
|
||||||
|
.token.inserted {
|
||||||
|
color: #a6e22e;
|
||||||
|
}
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string,
|
||||||
|
.token.variable {
|
||||||
|
color: $editorString;
|
||||||
|
}
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.function,
|
||||||
|
.token.class-name {
|
||||||
|
color: #e6db74;
|
||||||
|
}
|
||||||
|
.token.regex,
|
||||||
|
.token.important {
|
||||||
|
color: $editorSecondary;
|
||||||
|
}
|
||||||
|
.token.important,
|
||||||
|
.token.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
@ -1,94 +0,0 @@
|
||||||
#edit-control
|
|
||||||
// margin 10px
|
|
||||||
top: 1px
|
|
||||||
border-radius: 3px
|
|
||||||
width: 100%
|
|
||||||
max-width: 880px
|
|
||||||
margin-top: 30px
|
|
||||||
z-index: 2000
|
|
||||||
|
|
||||||
button:nth-child(1)
|
|
||||||
border-radius: 3px 0 0 3px
|
|
||||||
button:nth-child(10)
|
|
||||||
border-radius: 0 3px 3px 0
|
|
||||||
|
|
||||||
button
|
|
||||||
background: $secondary
|
|
||||||
width: 10%
|
|
||||||
height: 39px
|
|
||||||
transition: all 0.3s linear
|
|
||||||
margin: 0
|
|
||||||
border-radius: 0
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
text-align: center
|
|
||||||
button:hover
|
|
||||||
background: color.adjust($secondary, $lightness: -20%)
|
|
||||||
|
|
||||||
#option-update
|
|
||||||
padding: 5px 5px 1px 5px
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
.icon-hide
|
|
||||||
display: none
|
|
||||||
visibility: hidden
|
|
||||||
|
|
||||||
.submit-start
|
|
||||||
background: $white
|
|
||||||
|
|
||||||
svg
|
|
||||||
fill: $eventCool
|
|
||||||
|
|
||||||
.submit-cool
|
|
||||||
background: $eventCool
|
|
||||||
|
|
||||||
svg
|
|
||||||
fill: $white
|
|
||||||
|
|
||||||
.submit-delete
|
|
||||||
background: $eventLame !important
|
|
||||||
|
|
||||||
svg
|
|
||||||
fill: $white !important
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#option-date
|
|
||||||
height: 30px
|
|
||||||
padding-top: 6px
|
|
||||||
|
|
||||||
svg
|
|
||||||
margin: -13px 5px 0 0
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
fill: $white
|
|
||||||
|
|
||||||
.content-editor-btn-icon
|
|
||||||
padding: 5px 5px 1px 5px
|
|
||||||
// border-radius 20px
|
|
||||||
color: $primary
|
|
||||||
|
|
||||||
svg
|
|
||||||
fill: $primary
|
|
||||||
|
|
||||||
.content-editor-btn-text
|
|
||||||
padding: 5px
|
|
||||||
// border-radius 20px
|
|
||||||
color: $primary
|
|
||||||
|
|
||||||
#option-bold
|
|
||||||
font-weight: bold
|
|
||||||
text-decoration: none
|
|
||||||
|
|
||||||
#option-italic
|
|
||||||
font-weight: bold
|
|
||||||
text-decoration: none
|
|
||||||
font-style: italic
|
|
||||||
|
|
||||||
#option-strikethrough
|
|
||||||
font-weight: bold
|
|
||||||
text-decoration: line-through
|
|
||||||
font-style: italic
|
|
||||||
|
|
||||||
100
src/styles/main/_editor.scss
Normal file
100
src/styles/main/_editor.scss
Normal file
|
|
@ -0,0 +1,100 @@
|
||||||
|
#edit-control {
|
||||||
|
// margin 10px
|
||||||
|
top: 1px;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 880px;
|
||||||
|
margin-top: 30px;
|
||||||
|
z-index: 2000;
|
||||||
|
|
||||||
|
button:nth-child(1) {
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
}
|
||||||
|
button:nth-child(10) {
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background: $secondary;
|
||||||
|
width: 10%;
|
||||||
|
height: 39px;
|
||||||
|
transition: all 0.3s linear;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
background: color.adjust($secondary, $lightness: -20%);
|
||||||
|
}
|
||||||
|
#option-update {
|
||||||
|
padding: 5px 5px 1px 5px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.icon-hide {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.submit-start {
|
||||||
|
background: $white;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $eventCool;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submit-cool {
|
||||||
|
background: $eventCool;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submit-delete {
|
||||||
|
background: $eventLame !important;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#option-date {
|
||||||
|
height: 30px;
|
||||||
|
padding-top: 6px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
margin: -13px 5px 0 0;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-editor-btn-icon {
|
||||||
|
padding: 5px 5px 1px 5px;
|
||||||
|
// border-radius 20px
|
||||||
|
color: $primary;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-editor-btn-text {
|
||||||
|
padding: 5px;
|
||||||
|
// border-radius 20px
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
#option-bold {
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
#option-italic {
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
#option-strikethrough {
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: line-through;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
#error-index
|
|
||||||
width: 100%
|
|
||||||
max-width: 900px
|
|
||||||
margin: 0 auto
|
|
||||||
padding: 10px
|
|
||||||
height: 100%
|
|
||||||
z-index: 10
|
|
||||||
position: relative
|
|
||||||
label#title
|
|
||||||
font-size: 100px
|
|
||||||
color: $highlight
|
|
||||||
font-weight: 500
|
|
||||||
|
|
||||||
label#message
|
|
||||||
font-size: 50px
|
|
||||||
color: $tertiary
|
|
||||||
font-weight: 500
|
|
||||||
|
|
||||||
label#error
|
|
||||||
font-size: 25px
|
|
||||||
color: $eventLame
|
|
||||||
font-weight: 500
|
|
||||||
24
src/styles/main/_error.scss
Normal file
24
src/styles/main/_error.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
#error-index {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 10px;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
position: relative;
|
||||||
|
label#title {
|
||||||
|
font-size: 100px;
|
||||||
|
color: $highlight;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
label#message {
|
||||||
|
font-size: 50px;
|
||||||
|
color: $tertiary;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
label#error {
|
||||||
|
font-size: 25px;
|
||||||
|
color: $eventLame;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
form
|
|
||||||
display: inline-block
|
|
||||||
a
|
|
||||||
color: $primary
|
|
||||||
p
|
|
||||||
background: $tertiary
|
|
||||||
color: $primary
|
|
||||||
padding: 5px
|
|
||||||
display: block
|
|
||||||
border-radius: 5px
|
|
||||||
text-align: left
|
|
||||||
|
|
||||||
input[type=email], input[type=password], input[type=text]
|
|
||||||
border: 0
|
|
||||||
border-radius: 5px
|
|
||||||
padding: 5px
|
|
||||||
margin: 10px 5px 0 0
|
|
||||||
font: 18px $baseType
|
|
||||||
display: inline-block
|
|
||||||
background: $primary
|
|
||||||
color: $tertiary
|
|
||||||
|
|
||||||
textarea
|
|
||||||
border: 0
|
|
||||||
border-radius: 3px
|
|
||||||
color: $white
|
|
||||||
font: 15px $baseType
|
|
||||||
background: $primary
|
|
||||||
|
|
||||||
button, input[type=submit]
|
|
||||||
background: $highlight
|
|
||||||
color: $primary
|
|
||||||
font: 20px $baseType
|
|
||||||
border-radius: 5px
|
|
||||||
position: relative
|
|
||||||
cursor: pointer
|
|
||||||
border: 0
|
|
||||||
padding: 10px 0 5px 0
|
|
||||||
transition: all 0.3s linear
|
|
||||||
|
|
||||||
select
|
|
||||||
font: 14px $baseType
|
|
||||||
border: 1px solid $secondary
|
|
||||||
-webkit-appearance: none
|
|
||||||
-moz-appearance: none
|
|
||||||
appearance: none
|
|
||||||
color: $primary
|
|
||||||
|
|
||||||
::-webkit-input-placeholder
|
|
||||||
font: 25px $baseType
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
:-moz-placeholder
|
|
||||||
/* Firefox 18- */
|
|
||||||
font: 25px $baseType
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
::-moz-placeholder
|
|
||||||
/* Firefox 19+ */
|
|
||||||
font: 15px $baseType
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
:-ms-input-placeholder
|
|
||||||
font: 25px $baseType
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
|
|
||||||
71
src/styles/main/_forms.scss
Normal file
71
src/styles/main/_forms.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
form {
|
||||||
|
display: inline-block;
|
||||||
|
a {
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
background: $tertiary;
|
||||||
|
color: $primary;
|
||||||
|
padding: 5px;
|
||||||
|
display: block;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input[type="email"],
|
||||||
|
input[type="password"],
|
||||||
|
input[type="text"] {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
margin: 10px 5px 0 0;
|
||||||
|
font: 18px $baseType;
|
||||||
|
display: inline-block;
|
||||||
|
background: $primary;
|
||||||
|
color: $tertiary;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: $white;
|
||||||
|
font: 15px $baseType;
|
||||||
|
background: $primary;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
input[type="submit"] {
|
||||||
|
background: $highlight;
|
||||||
|
color: $primary;
|
||||||
|
font: 20px $baseType;
|
||||||
|
border-radius: 5px;
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 0;
|
||||||
|
padding: 10px 0 5px 0;
|
||||||
|
transition: all 0.3s linear;
|
||||||
|
}
|
||||||
|
select {
|
||||||
|
font: 14px $baseType;
|
||||||
|
border: 1px solid $secondary;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
::-webkit-input-placeholder {
|
||||||
|
font: 25px $baseType;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
:-moz-placeholder {
|
||||||
|
/* Firefox 18- */
|
||||||
|
font: 25px $baseType;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
::-moz-placeholder {
|
||||||
|
/* Firefox 19+ */
|
||||||
|
font: 15px $baseType;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
:-ms-input-placeholder {
|
||||||
|
font: 25px $baseType;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
@ -1,283 +0,0 @@
|
||||||
#dash-index-content
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
#dash-index
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
z-index: 10
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
#dash-index-wrapper
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
.dash-init, .dash-restore
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
color: $primary
|
|
||||||
|
|
||||||
form
|
|
||||||
background: $white
|
|
||||||
padding: 15px
|
|
||||||
width: 300px
|
|
||||||
border-radius: 5px
|
|
||||||
text-align: center
|
|
||||||
#the-logo
|
|
||||||
width: 40px
|
|
||||||
margin: 20px
|
|
||||||
|
|
||||||
input
|
|
||||||
width: 290px
|
|
||||||
margin: 0 0 10px 0
|
|
||||||
height: 30px
|
|
||||||
|
|
||||||
button
|
|
||||||
width: 300px
|
|
||||||
div
|
|
||||||
background: $primary
|
|
||||||
color: $white
|
|
||||||
border-radius: 3px
|
|
||||||
padding: 5px
|
|
||||||
label
|
|
||||||
display: block
|
|
||||||
padding: 5px
|
|
||||||
color: $tertiary
|
|
||||||
.dash-restore
|
|
||||||
display: none
|
|
||||||
visibility: hidden
|
|
||||||
|
|
||||||
#dash-login
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
margin: 0 auto
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
|
|
||||||
#dash-form, #dash-reset
|
|
||||||
width: 300px
|
|
||||||
padding: 0.75em
|
|
||||||
background: $white
|
|
||||||
border-radius: 5px
|
|
||||||
color: $white
|
|
||||||
text-align: center
|
|
||||||
#the-logo
|
|
||||||
width: 40px
|
|
||||||
margin: 20px
|
|
||||||
|
|
||||||
input
|
|
||||||
width: 290px
|
|
||||||
margin: 0 0 10px 0
|
|
||||||
height: 30px
|
|
||||||
|
|
||||||
button
|
|
||||||
width: 300px
|
|
||||||
|
|
||||||
#dash-menu
|
|
||||||
padding: 10px
|
|
||||||
width: 90%
|
|
||||||
max-width: 900px
|
|
||||||
margin: 50px auto
|
|
||||||
|
|
||||||
a
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
background: color.adjust($primary, $lightness: -60%)
|
|
||||||
width: 30%
|
|
||||||
padding: 5px
|
|
||||||
border-radius: 3px
|
|
||||||
color: $white
|
|
||||||
margin: 0 10px 10px 0
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background: color.adjust($primary, $lightness: -60%)
|
|
||||||
|
|
||||||
svg
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
fill: $white
|
|
||||||
|
|
||||||
label
|
|
||||||
display: inline-block
|
|
||||||
margin-top: 5px
|
|
||||||
width: 85%
|
|
||||||
text-align: center
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
#dash-recent
|
|
||||||
width: 100%
|
|
||||||
max-width: 900px
|
|
||||||
height: 100%
|
|
||||||
padding: 5px 0 0 0
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
#recent-list
|
|
||||||
//padding: 5px
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
.recent-header
|
|
||||||
height: 50px
|
|
||||||
margin-top: 5px
|
|
||||||
.index-header-left
|
|
||||||
vertical-align: top
|
|
||||||
display: inline-block
|
|
||||||
width: 50%
|
|
||||||
color: $white
|
|
||||||
font-size: 3em
|
|
||||||
.index-header-right
|
|
||||||
width: 50%
|
|
||||||
text-align: right
|
|
||||||
vertical-align: top
|
|
||||||
display: inline-block
|
|
||||||
right: 10px
|
|
||||||
color: $white
|
|
||||||
a
|
|
||||||
button
|
|
||||||
border-radius: 3px
|
|
||||||
margin-left: 10px
|
|
||||||
svg
|
|
||||||
transition: all 0.2s linear
|
|
||||||
width: 40px
|
|
||||||
height: 20px
|
|
||||||
fill: $white
|
|
||||||
|
|
||||||
a.post-link, a.post-video-link
|
|
||||||
font-size: 1.5em
|
|
||||||
font-weight: 300
|
|
||||||
display: inline-block
|
|
||||||
border-radius: 3px
|
|
||||||
vertical-align: top
|
|
||||||
text-decoration: none
|
|
||||||
position: relative
|
|
||||||
overflow: hidden
|
|
||||||
.post-video
|
|
||||||
width: 100%
|
|
||||||
height: 100%
|
|
||||||
object-fit: cover
|
|
||||||
position: absolute
|
|
||||||
|
|
||||||
label
|
|
||||||
font-size: 1.4em
|
|
||||||
font-weight: 700
|
|
||||||
color: $white
|
|
||||||
padding: 5px
|
|
||||||
vertical-align: top
|
|
||||||
display: inline-block
|
|
||||||
word-wrap: break-word
|
|
||||||
width: 100%
|
|
||||||
text-align: center
|
|
||||||
position: relative
|
|
||||||
top: 35%
|
|
||||||
text-shadow: 2px 2px 0 rgba($black, 1)
|
|
||||||
|
|
||||||
div#options
|
|
||||||
width: 100%
|
|
||||||
position: absolute
|
|
||||||
bottom: 0
|
|
||||||
border-radius: 0 0 3px 3px
|
|
||||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
|
|
||||||
|
|
||||||
#option-left
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
width: 50%
|
|
||||||
position: relative
|
|
||||||
background: none
|
|
||||||
button
|
|
||||||
border-radius: 3px
|
|
||||||
background: $primary
|
|
||||||
margin: 0 0 10px 10px
|
|
||||||
svg
|
|
||||||
//@include object-transitions(0.1s)
|
|
||||||
width: 40px
|
|
||||||
height: 20px
|
|
||||||
fill: $secondary
|
|
||||||
.item-options
|
|
||||||
border-radius: 3px
|
|
||||||
margin: 5px
|
|
||||||
display: inline-block
|
|
||||||
button[data-active='false']
|
|
||||||
background: $primary
|
|
||||||
svg
|
|
||||||
fill: $secondary
|
|
||||||
|
|
||||||
button[data-active='true']
|
|
||||||
background: $tertiary
|
|
||||||
svg
|
|
||||||
fill: $primary
|
|
||||||
#option-right
|
|
||||||
display: inline-block
|
|
||||||
width: 50%
|
|
||||||
text-align: right
|
|
||||||
span
|
|
||||||
font-weight: bold
|
|
||||||
display: block
|
|
||||||
background: $white
|
|
||||||
color: $primary
|
|
||||||
border-radius: 3px
|
|
||||||
font-size: .6em
|
|
||||||
text-align: center
|
|
||||||
position: relative
|
|
||||||
padding: 5px
|
|
||||||
float: right
|
|
||||||
margin: 0 10px 0 0
|
|
||||||
bottom: -15px
|
|
||||||
|
|
||||||
|
|
||||||
a:nth-child(3)
|
|
||||||
width: 100%
|
|
||||||
margin-bottom: 20px
|
|
||||||
height: 500px
|
|
||||||
|
|
||||||
a:nth-child(4), a:nth-child(6)
|
|
||||||
width: 48.6%
|
|
||||||
height: 350px
|
|
||||||
margin: 0 10px 20px 0
|
|
||||||
|
|
||||||
a:nth-child(5), a:nth-child(7)
|
|
||||||
width: 48.6%
|
|
||||||
height: 350px
|
|
||||||
margin: 0 0 20px 10px
|
|
||||||
|
|
||||||
//Reponsive
|
|
||||||
@media only screen and (max-width: 768px)
|
|
||||||
#dash-index-content
|
|
||||||
#dash-index
|
|
||||||
#dash-index-wrapper
|
|
||||||
#dash-recent
|
|
||||||
#recent-list
|
|
||||||
a:nth-child(4), a:nth-child(6)
|
|
||||||
width: 48.9%
|
|
||||||
|
|
||||||
@media only screen and (max-width: 640px)
|
|
||||||
#dash-index-content
|
|
||||||
#dash-index
|
|
||||||
#dash-index-wrapper
|
|
||||||
#dash-recent
|
|
||||||
#recent-list
|
|
||||||
a:nth-child(4), a:nth-child(6)
|
|
||||||
width: 48.5%
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px)
|
|
||||||
#dash-index-content
|
|
||||||
#dash-index
|
|
||||||
#dash-index-wrapper
|
|
||||||
#dash-recent
|
|
||||||
#recent-list
|
|
||||||
.recent-header
|
|
||||||
h3
|
|
||||||
width: 40%
|
|
||||||
|
|
||||||
.index-menu
|
|
||||||
width: 60%
|
|
||||||
|
|
||||||
a:nth-child(3), a:nth-child(4), a:nth-child(5), a:nth-child(6), a:nth-child(7)
|
|
||||||
width: 100%
|
|
||||||
margin: 15px 0 0 0
|
|
||||||
height: 400px
|
|
||||||
346
src/styles/main/_index.scss
Normal file
346
src/styles/main/_index.scss
Normal file
|
|
@ -0,0 +1,346 @@
|
||||||
|
#dash-index-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
#dash-index {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
#dash-index-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
.dash-init,
|
||||||
|
.dash-restore {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: $primary;
|
||||||
|
|
||||||
|
form {
|
||||||
|
background: $white;
|
||||||
|
padding: 15px;
|
||||||
|
width: 300px;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
#the-logo {
|
||||||
|
width: 40px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
width: 290px;
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
background: $primary;
|
||||||
|
color: $white;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 5px;
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
padding: 5px;
|
||||||
|
color: $tertiary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dash-restore {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
#dash-login {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
#dash-form,
|
||||||
|
#dash-reset {
|
||||||
|
width: 300px;
|
||||||
|
padding: 0.75em;
|
||||||
|
background: $white;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: $white;
|
||||||
|
text-align: center;
|
||||||
|
#the-logo {
|
||||||
|
width: 40px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
width: 290px;
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#dash-menu {
|
||||||
|
padding: 10px;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 50px auto;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
background: color.adjust($primary, $lightness: -60%);
|
||||||
|
width: 30%;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: $white;
|
||||||
|
margin: 0 10px 10px 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: color.adjust($primary, $lightness: -60%);
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 5px;
|
||||||
|
width: 85%;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#dash-recent {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
height: 100%;
|
||||||
|
padding: 5px 0 0 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
#recent-list {
|
||||||
|
//padding: 5px
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.recent-header {
|
||||||
|
height: 50px;
|
||||||
|
margin-top: 5px;
|
||||||
|
.index-header-left {
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
width: 50%;
|
||||||
|
color: $white;
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
.index-header-right {
|
||||||
|
width: 50%;
|
||||||
|
text-align: right;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
right: 10px;
|
||||||
|
color: $white;
|
||||||
|
a {
|
||||||
|
button {
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-left: 10px;
|
||||||
|
svg {
|
||||||
|
transition: all 0.2s linear;
|
||||||
|
width: 40px;
|
||||||
|
height: 20px;
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a.post-link,
|
||||||
|
a.post-video-link {
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: 300;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 3px;
|
||||||
|
vertical-align: top;
|
||||||
|
text-decoration: none;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
.post-video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
font-size: 1.4em;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $white;
|
||||||
|
padding: 5px;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
word-wrap: break-word;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
top: 35%;
|
||||||
|
text-shadow: 2px 2px 0 rgba($black, 1);
|
||||||
|
}
|
||||||
|
div#options {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
border-radius: 0 0 3px 3px;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(0, 0, 0, 0) 0%,
|
||||||
|
rgba(0, 0, 0, 0.65) 100%
|
||||||
|
);
|
||||||
|
|
||||||
|
#option-left {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 50%;
|
||||||
|
position: relative;
|
||||||
|
background: none;
|
||||||
|
button {
|
||||||
|
border-radius: 3px;
|
||||||
|
background: $primary;
|
||||||
|
margin: 0 0 10px 10px;
|
||||||
|
svg {
|
||||||
|
//@include object-transitions(0.1s)
|
||||||
|
width: 40px;
|
||||||
|
height: 20px;
|
||||||
|
fill: $secondary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-options {
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
button[data-active="false"] {
|
||||||
|
background: $primary;
|
||||||
|
svg {
|
||||||
|
fill: $secondary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button[data-active="true"] {
|
||||||
|
background: $tertiary;
|
||||||
|
svg {
|
||||||
|
fill: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#option-right {
|
||||||
|
display: inline-block;
|
||||||
|
width: 50%;
|
||||||
|
text-align: right;
|
||||||
|
span {
|
||||||
|
font-weight: bold;
|
||||||
|
display: block;
|
||||||
|
background: $white;
|
||||||
|
color: $primary;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 0.6em;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
padding: 5px;
|
||||||
|
float: right;
|
||||||
|
margin: 0 10px 0 0;
|
||||||
|
bottom: -15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a:nth-child(3) {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
a:nth-child(4),
|
||||||
|
a:nth-child(6) {
|
||||||
|
width: 48.6%;
|
||||||
|
height: 350px;
|
||||||
|
margin: 0 10px 20px 0;
|
||||||
|
}
|
||||||
|
a:nth-child(5),
|
||||||
|
a:nth-child(7) {
|
||||||
|
width: 48.6%;
|
||||||
|
height: 350px;
|
||||||
|
margin: 0 0 20px 10px;
|
||||||
|
}
|
||||||
|
//Reponsive
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
#dash-index-content {
|
||||||
|
#dash-index {
|
||||||
|
#dash-index-wrapper {
|
||||||
|
#dash-recent {
|
||||||
|
#recent-list {
|
||||||
|
a:nth-child(4),
|
||||||
|
a:nth-child(6) {
|
||||||
|
width: 48.9%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 640px) {
|
||||||
|
#dash-index-content {
|
||||||
|
#dash-index {
|
||||||
|
#dash-index-wrapper {
|
||||||
|
#dash-recent {
|
||||||
|
#recent-list {
|
||||||
|
a:nth-child(4),
|
||||||
|
a:nth-child(6) {
|
||||||
|
width: 48.5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
#dash-index-content {
|
||||||
|
#dash-index {
|
||||||
|
#dash-index-wrapper {
|
||||||
|
#dash-recent {
|
||||||
|
#recent-list {
|
||||||
|
.recent-header {
|
||||||
|
h3 {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
.index-menu {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a:nth-child(3),
|
||||||
|
a:nth-child(4),
|
||||||
|
a:nth-child(5),
|
||||||
|
a:nth-child(6),
|
||||||
|
a:nth-child(7) {
|
||||||
|
width: 100%;
|
||||||
|
margin: 15px 0 0 0;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} ;
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
@mixin background-opacity($rgb_value, $opacity)
|
|
||||||
background: rgba($rgb_value, $opacity)
|
|
||||||
|
|
||||||
@mixin custom-header($weight, $size, $line_height, $color)
|
|
||||||
font: $weight $size/$line_height $bodyTypeSans
|
|
||||||
color: $color
|
|
||||||
7
src/styles/main/_mixins.scss
Normal file
7
src/styles/main/_mixins.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
@mixin background-opacity($rgb_value, $opacity) {
|
||||||
|
background: rgba($rgb_value, $opacity);
|
||||||
|
}
|
||||||
|
@mixin custom-header($weight, $size, $line_height, $color) {
|
||||||
|
font: $weight $size/$line_height $bodyTypeSans;
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
#nav-index
|
|
||||||
width: 100%
|
|
||||||
max-width: 900px
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
#nav-index-wrapper
|
|
||||||
#nav-pages
|
|
||||||
.nav-item
|
|
||||||
display: block
|
|
||||||
width: 98%
|
|
||||||
background: $white
|
|
||||||
border-radius: 3px
|
|
||||||
color: $highlight
|
|
||||||
height: 30px
|
|
||||||
padding: 10px
|
|
||||||
margin: 0 0 10px 0
|
|
||||||
font-size: 1.5em
|
|
||||||
cursor: move
|
|
||||||
#item-arrows
|
|
||||||
fill: $primary
|
|
||||||
width: 40px
|
|
||||||
height: 30px
|
|
||||||
|
|
||||||
label
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: middle
|
|
||||||
padding: 0
|
|
||||||
margin: -15px 0 0 10px
|
|
||||||
cursor: move
|
|
||||||
|
|
||||||
#nav-btns
|
|
||||||
float: right
|
|
||||||
top: -5px
|
|
||||||
position: relative
|
|
||||||
button
|
|
||||||
color: $white
|
|
||||||
border-radius: 3px
|
|
||||||
width: 40px
|
|
||||||
margin: 0 10px 0 10px
|
|
||||||
svg
|
|
||||||
fill: $white
|
|
||||||
width: 25px
|
|
||||||
height: 20px
|
|
||||||
|
|
||||||
@media only screen and (max-width: 375px)
|
|
||||||
#nav-index
|
|
||||||
#nav-index-wrapper
|
|
||||||
#nav-pages
|
|
||||||
.nav-item
|
|
||||||
width: 94.5%
|
|
||||||
font-size: 1em
|
|
||||||
|
|
||||||
label
|
|
||||||
width: 40%
|
|
||||||
vertical-align: top
|
|
||||||
margin-top: 0px
|
|
||||||
line-height: 1em
|
|
||||||
|
|
||||||
@media only screen and (max-width: 320px)
|
|
||||||
#nav-index
|
|
||||||
#nav-index-wrapper
|
|
||||||
#nav-pages
|
|
||||||
.nav-item
|
|
||||||
width: 94.5%
|
|
||||||
font-size: 1em
|
|
||||||
|
|
||||||
label
|
|
||||||
width: 37%
|
|
||||||
vertical-align: top
|
|
||||||
margin-top: 0px
|
|
||||||
line-height: 1em
|
|
||||||
88
src/styles/main/_navigation.scss
Normal file
88
src/styles/main/_navigation.scss
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
#nav-index {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
#nav-index-wrapper {
|
||||||
|
#nav-pages {
|
||||||
|
.nav-item {
|
||||||
|
display: block;
|
||||||
|
width: 98%;
|
||||||
|
background: $white;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: $highlight;
|
||||||
|
height: 30px;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
font-size: 1.5em;
|
||||||
|
cursor: move;
|
||||||
|
#item-arrows {
|
||||||
|
fill: $primary;
|
||||||
|
width: 40px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 0;
|
||||||
|
margin: -15px 0 0 10px;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
#nav-btns {
|
||||||
|
float: right;
|
||||||
|
top: -5px;
|
||||||
|
position: relative;
|
||||||
|
button {
|
||||||
|
color: $white;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 40px;
|
||||||
|
margin: 0 10px 0 10px;
|
||||||
|
svg {
|
||||||
|
fill: $white;
|
||||||
|
width: 25px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 375px) {
|
||||||
|
#nav-index {
|
||||||
|
#nav-index-wrapper {
|
||||||
|
#nav-pages {
|
||||||
|
.nav-item {
|
||||||
|
width: 94.5%;
|
||||||
|
font-size: 1em;
|
||||||
|
|
||||||
|
label {
|
||||||
|
width: 40%;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-top: 0px;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
#nav-index {
|
||||||
|
#nav-index-wrapper {
|
||||||
|
#nav-pages {
|
||||||
|
.nav-item {
|
||||||
|
width: 94.5%;
|
||||||
|
font-size: 1em;
|
||||||
|
|
||||||
|
label {
|
||||||
|
width: 37%;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-top: 0px;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} ;
|
||||||
|
|
@ -1,197 +0,0 @@
|
||||||
html
|
|
||||||
line-height: 1.15
|
|
||||||
-ms-text-size-adjust: 100%
|
|
||||||
-webkit-text-size-adjust: 100%
|
|
||||||
|
|
||||||
body
|
|
||||||
margin: 0
|
|
||||||
|
|
||||||
article,
|
|
||||||
aside,
|
|
||||||
footer,
|
|
||||||
header,
|
|
||||||
nav,
|
|
||||||
section
|
|
||||||
display: block
|
|
||||||
|
|
||||||
h1
|
|
||||||
font-size: 2em
|
|
||||||
margin: 0.67em 0
|
|
||||||
line-height: 1em
|
|
||||||
|
|
||||||
figcaption,
|
|
||||||
figure,
|
|
||||||
main
|
|
||||||
display: block
|
|
||||||
|
|
||||||
figure
|
|
||||||
margin: 1em 40px
|
|
||||||
|
|
||||||
hr
|
|
||||||
box-sizing: content-box
|
|
||||||
height: 0
|
|
||||||
overflow: visible
|
|
||||||
|
|
||||||
pre
|
|
||||||
font-family: monospace, monospace
|
|
||||||
font-size: 1em
|
|
||||||
a
|
|
||||||
background-color: transparent
|
|
||||||
-webkit-text-decoration-skip: objects
|
|
||||||
|
|
||||||
a:active,
|
|
||||||
a:hover
|
|
||||||
outline-width: 0
|
|
||||||
|
|
||||||
abbr[title]
|
|
||||||
border-bottom: none
|
|
||||||
text-decoration: underline
|
|
||||||
text-decoration: underline dotted
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong
|
|
||||||
font-weight: inherit
|
|
||||||
font-weight: bolder
|
|
||||||
|
|
||||||
//code,
|
|
||||||
kbd,
|
|
||||||
samp
|
|
||||||
font-family: monospace, monospace
|
|
||||||
font-size: 1em
|
|
||||||
|
|
||||||
dfn
|
|
||||||
font-style: italic
|
|
||||||
|
|
||||||
mark
|
|
||||||
background-color: #ff0
|
|
||||||
color: #000
|
|
||||||
|
|
||||||
small
|
|
||||||
font-size: 80%
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup
|
|
||||||
font-size: 60%
|
|
||||||
line-height: 0
|
|
||||||
position: relative
|
|
||||||
vertical-align: baseline
|
|
||||||
|
|
||||||
sub
|
|
||||||
bottom: -0.25em
|
|
||||||
|
|
||||||
sup
|
|
||||||
top: -0.55em
|
|
||||||
background: $primary
|
|
||||||
color: $primary
|
|
||||||
border-radius: 2px
|
|
||||||
padding: 0 2px 0 2px
|
|
||||||
margin: 0 2px 0 0
|
|
||||||
|
|
||||||
audio,
|
|
||||||
video
|
|
||||||
display: inline-block
|
|
||||||
|
|
||||||
audio
|
|
||||||
&:not([controls])
|
|
||||||
display: none
|
|
||||||
height: 0
|
|
||||||
|
|
||||||
img
|
|
||||||
border-style: none
|
|
||||||
|
|
||||||
svg
|
|
||||||
&:not(:root)
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
optgroup,
|
|
||||||
select,
|
|
||||||
textarea
|
|
||||||
font-family: sans-serif
|
|
||||||
font-size: 100%
|
|
||||||
line-height: 1.15
|
|
||||||
margin: 0
|
|
||||||
|
|
||||||
button,
|
|
||||||
input
|
|
||||||
overflow: visible
|
|
||||||
|
|
||||||
button,
|
|
||||||
select
|
|
||||||
text-transform: none
|
|
||||||
|
|
||||||
button, html [type="button"],
|
|
||||||
[type="reset"],
|
|
||||||
[type="submit"]
|
|
||||||
-webkit-appearance: button
|
|
||||||
|
|
||||||
[type="button"]::-moz-focus-inner,
|
|
||||||
[type="reset"]::-moz-focus-inner,
|
|
||||||
[type="submit"]::-moz-focus-inner,
|
|
||||||
button::-moz-focus-inner
|
|
||||||
border-style: none
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
[type="button"]:-moz-focusring,
|
|
||||||
[type="reset"]:-moz-focusring,
|
|
||||||
[type="submit"]:-moz-focusring,
|
|
||||||
button:-moz-focusring
|
|
||||||
outline: 1px dotted ButtonText
|
|
||||||
|
|
||||||
fieldset
|
|
||||||
border: 1px solid #c0c0c0
|
|
||||||
margin: 0 2px
|
|
||||||
padding: 0.35em 0.625em 0.75em
|
|
||||||
|
|
||||||
legend
|
|
||||||
box-sizing: border-box
|
|
||||||
color: inherit
|
|
||||||
display: table
|
|
||||||
max-width: 100%
|
|
||||||
padding: 0
|
|
||||||
white-space: normal
|
|
||||||
|
|
||||||
progress
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: baseline
|
|
||||||
|
|
||||||
textarea
|
|
||||||
overflow: auto
|
|
||||||
|
|
||||||
[type="checkbox"],
|
|
||||||
[type="radio"]
|
|
||||||
box-sizing: border-box
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
|
||||||
[type="number"]::-webkit-outer-spin-button
|
|
||||||
height: auto
|
|
||||||
|
|
||||||
[type="search"]
|
|
||||||
-webkit-appearance: textfield
|
|
||||||
outline-offset: -2px
|
|
||||||
|
|
||||||
[type="search"]::-webkit-search-cancel-button,
|
|
||||||
[type="search"]::-webkit-search-decoration
|
|
||||||
-webkit-appearance: none
|
|
||||||
|
|
||||||
::-webkit-file-upload-button
|
|
||||||
-webkit-appearance: button
|
|
||||||
font: inherit
|
|
||||||
|
|
||||||
details,
|
|
||||||
menu
|
|
||||||
display: block
|
|
||||||
|
|
||||||
summary
|
|
||||||
display: list-item
|
|
||||||
|
|
||||||
canvas
|
|
||||||
display: inline-block
|
|
||||||
|
|
||||||
template
|
|
||||||
display: none
|
|
||||||
|
|
||||||
[hidden]
|
|
||||||
display: none
|
|
||||||
202
src/styles/main/_normalize.scss
Normal file
202
src/styles/main/_normalize.scss
Normal file
|
|
@ -0,0 +1,202 @@
|
||||||
|
html {
|
||||||
|
line-height: 1.15;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
nav,
|
||||||
|
section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
figure {
|
||||||
|
margin: 1em 40px;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box;
|
||||||
|
height: 0;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
-webkit-text-decoration-skip: objects;
|
||||||
|
}
|
||||||
|
a:active,
|
||||||
|
a:hover {
|
||||||
|
outline-width: 0;
|
||||||
|
}
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
}
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: inherit;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
//code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
dfn {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
mark {
|
||||||
|
background-color: #ff0;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 60%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
sup {
|
||||||
|
top: -0.55em;
|
||||||
|
background: $primary;
|
||||||
|
color: $primary;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0 2px 0 2px;
|
||||||
|
margin: 0 2px 0 0;
|
||||||
|
}
|
||||||
|
audio,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
audio {
|
||||||
|
&:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
&:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
html [type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner,
|
||||||
|
button::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
[type="button"]:-moz-focusring,
|
||||||
|
[type="reset"]:-moz-focusring,
|
||||||
|
[type="submit"]:-moz-focusring,
|
||||||
|
button:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
border: 1px solid #c0c0c0;
|
||||||
|
margin: 0 2px;
|
||||||
|
padding: 0.35em 0.625em 0.75em;
|
||||||
|
}
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: inherit;
|
||||||
|
display: table;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
progress {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
[type="search"]::-webkit-search-cancel-button,
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
details,
|
||||||
|
menu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
@ -1,512 +0,0 @@
|
||||||
#post-index
|
|
||||||
width: 100%
|
|
||||||
max-width: 900px
|
|
||||||
margin: 0 auto
|
|
||||||
#post-index-wrapper
|
|
||||||
//padding: 0.75rem
|
|
||||||
overflow: hidden
|
|
||||||
#post-index-header
|
|
||||||
margin: 10px 0 0 0
|
|
||||||
#post-index-header-left
|
|
||||||
text-transform: capitalize
|
|
||||||
display: inline-block
|
|
||||||
width: 50%
|
|
||||||
color: $white
|
|
||||||
font-size: 3em
|
|
||||||
#post-index-header-right
|
|
||||||
text-align: right
|
|
||||||
display: inline-block
|
|
||||||
width: 50%
|
|
||||||
a
|
|
||||||
button
|
|
||||||
color: $white
|
|
||||||
border-radius: 3px
|
|
||||||
margin-left: 10px
|
|
||||||
width: 55px
|
|
||||||
svg
|
|
||||||
transition: all 0.1s linear
|
|
||||||
width: 20px
|
|
||||||
height: 17px
|
|
||||||
fill: $white
|
|
||||||
|
|
||||||
.current-filter
|
|
||||||
color: $highlight
|
|
||||||
text-decoration-color: $secondary
|
|
||||||
|
|
||||||
#posts-list
|
|
||||||
margin: 20px 0 0 0
|
|
||||||
|
|
||||||
a.page-link
|
|
||||||
background: $white
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
width: 100%
|
|
||||||
text-decoration: none
|
|
||||||
margin: 0 0 20px 0
|
|
||||||
border-radius: 3px
|
|
||||||
overflow: hidden
|
|
||||||
color: color.adjust($primary, $lightness: -60%)
|
|
||||||
|
|
||||||
label
|
|
||||||
font-size: 2em
|
|
||||||
font-weight: 500
|
|
||||||
padding: 10px
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
div.page-bg, div.page-video
|
|
||||||
video
|
|
||||||
width: 100%
|
|
||||||
position: absolute
|
|
||||||
width: 100%
|
|
||||||
height: 350px
|
|
||||||
background-color: $highlight
|
|
||||||
position: relative
|
|
||||||
label
|
|
||||||
font-size: 2em
|
|
||||||
font-weight: 700
|
|
||||||
color: $white
|
|
||||||
padding: 5px
|
|
||||||
vertical-align: top
|
|
||||||
display: inline-block
|
|
||||||
word-wrap: break-word
|
|
||||||
width: 100%
|
|
||||||
text-align: center
|
|
||||||
position: relative
|
|
||||||
top: 35%
|
|
||||||
text-shadow: 2px 2px 0 rgba($black, 1)
|
|
||||||
#meta
|
|
||||||
width: 100%
|
|
||||||
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
|
|
||||||
border-radius: 3px
|
|
||||||
margin: auto
|
|
||||||
bottom: 0
|
|
||||||
position: absolute
|
|
||||||
padding: 0 0 20px 0
|
|
||||||
#options
|
|
||||||
width: 100%
|
|
||||||
bottom: 0
|
|
||||||
position: absolute
|
|
||||||
#option-left
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
width: 50%
|
|
||||||
position: relative
|
|
||||||
background: none
|
|
||||||
button
|
|
||||||
border-radius: 3px
|
|
||||||
background: $primary
|
|
||||||
margin: 0 0 10px 10px
|
|
||||||
svg
|
|
||||||
transition: all 0.2s linear
|
|
||||||
width: 40px
|
|
||||||
height: 20px
|
|
||||||
fill: $secondary
|
|
||||||
.item-options
|
|
||||||
border-radius: 3px
|
|
||||||
margin: 5px
|
|
||||||
display: inline-block
|
|
||||||
button[data-active='false']
|
|
||||||
background: $primary
|
|
||||||
svg
|
|
||||||
fill: $secondary
|
|
||||||
|
|
||||||
button[data-active='true']
|
|
||||||
background: $tertiary
|
|
||||||
svg
|
|
||||||
fill: $primary
|
|
||||||
#option-right
|
|
||||||
display: inline-block
|
|
||||||
width: 50%
|
|
||||||
text-align: right
|
|
||||||
span
|
|
||||||
font-weight: bold
|
|
||||||
display: block
|
|
||||||
background: $white
|
|
||||||
color: $primary
|
|
||||||
border-radius: 3px
|
|
||||||
font-size: .6em
|
|
||||||
text-align: center
|
|
||||||
position: relative
|
|
||||||
padding: 5px
|
|
||||||
float: right
|
|
||||||
margin: 0 10px 0 0
|
|
||||||
bottom: -15px
|
|
||||||
|
|
||||||
p
|
|
||||||
padding: 5px 10px 5px 10px
|
|
||||||
font-size: 1.2em
|
|
||||||
font-weight: 400
|
|
||||||
.paginate
|
|
||||||
width: 260px
|
|
||||||
display: block
|
|
||||||
margin: 0 auto
|
|
||||||
a
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
span.count
|
|
||||||
text-align: center
|
|
||||||
padding: 5px
|
|
||||||
margin-top: -2px
|
|
||||||
display: inline-block
|
|
||||||
width: 190px
|
|
||||||
font-size: 1.5em
|
|
||||||
color: $tertiary
|
|
||||||
|
|
||||||
#post-edit-index
|
|
||||||
width: 100%
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
#post-edit-index-wrapper
|
|
||||||
width: 100%
|
|
||||||
#post-header
|
|
||||||
// width 100%
|
|
||||||
|
|
||||||
background: $highlight
|
|
||||||
#post-header-wrapper
|
|
||||||
max-width: 900px
|
|
||||||
margin: 0 auto
|
|
||||||
padding: 0.75rem
|
|
||||||
label
|
|
||||||
color: $white
|
|
||||||
font-size: 0.9em
|
|
||||||
font-family: $baseType
|
|
||||||
font-weight: 600
|
|
||||||
span
|
|
||||||
color: $primary
|
|
||||||
font-size: 0.9em
|
|
||||||
font-weight: 600
|
|
||||||
text-transform: uppercase
|
|
||||||
float: right
|
|
||||||
|
|
||||||
#post-title
|
|
||||||
#post_title
|
|
||||||
background: $white
|
|
||||||
font-family: $baseType
|
|
||||||
width: 97.6%
|
|
||||||
height: 80px
|
|
||||||
font-size: 2em
|
|
||||||
color: $primary
|
|
||||||
padding: 5px
|
|
||||||
margin: 0 0 5px 0
|
|
||||||
|
|
||||||
#calendar-icon
|
|
||||||
background: color.adjust($primary, $lightness: -15%)
|
|
||||||
border-radius: 3px 0 0 3px
|
|
||||||
display: inline-block
|
|
||||||
padding: 5.2px
|
|
||||||
color: $secondary
|
|
||||||
#layouts
|
|
||||||
select
|
|
||||||
background: $primary
|
|
||||||
color: $secondary
|
|
||||||
border-radius: 3px
|
|
||||||
border-color: $primary
|
|
||||||
margin: 0 0 10px 0
|
|
||||||
width: 100%
|
|
||||||
height: 45px
|
|
||||||
padding: 5px
|
|
||||||
font-size: 1.5em
|
|
||||||
|
|
||||||
#post-meta
|
|
||||||
#post_tags
|
|
||||||
background: $white
|
|
||||||
font-family: $baseType
|
|
||||||
width: 97.6%
|
|
||||||
height: 80px
|
|
||||||
color: $primary
|
|
||||||
padding: 5px
|
|
||||||
margin: 0 0 5px 0
|
|
||||||
|
|
||||||
#post-options
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
width: 100%
|
|
||||||
padding: 0
|
|
||||||
margin: 0 0 10px 0
|
|
||||||
|
|
||||||
button:nth-child(1)
|
|
||||||
border-radius: 3px 0 0 3px
|
|
||||||
|
|
||||||
button:nth-child(4)
|
|
||||||
border-radius: 0 3px 3px 0
|
|
||||||
|
|
||||||
a
|
|
||||||
button
|
|
||||||
border-radius: 0 3px 3px 0 !important
|
|
||||||
|
|
||||||
button
|
|
||||||
width: 25%
|
|
||||||
height: 45px
|
|
||||||
transition: all 0.3s linear
|
|
||||||
margin: 0
|
|
||||||
border-radius: 0
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
button[data-active='false']
|
|
||||||
background: $primary
|
|
||||||
svg
|
|
||||||
fill: $secondary
|
|
||||||
|
|
||||||
button[data-active='true']
|
|
||||||
background: $tertiary
|
|
||||||
svg
|
|
||||||
fill: $primary
|
|
||||||
|
|
||||||
#page-files-upload, #post-image-upload
|
|
||||||
display: none
|
|
||||||
|
|
||||||
#post-feature
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
#page-file-manager
|
|
||||||
background: $tertiary
|
|
||||||
width: 100%
|
|
||||||
min-height: 300px
|
|
||||||
#page-file-wrapper
|
|
||||||
width: 100%
|
|
||||||
max-width: 900px
|
|
||||||
padding: 10px
|
|
||||||
margin: 0 auto
|
|
||||||
font-weight: bold
|
|
||||||
font-color: $primary
|
|
||||||
font-size: 1em
|
|
||||||
#page-file-drop
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
width: 100%
|
|
||||||
min-height: 100px
|
|
||||||
background: $white
|
|
||||||
color: $primary
|
|
||||||
vertical-align: middle
|
|
||||||
border-radius: 5px
|
|
||||||
margin: 0 0 10px 0
|
|
||||||
|
|
||||||
label
|
|
||||||
cursor: pointer
|
|
||||||
font-weight: 600px
|
|
||||||
text-transform: capitalize
|
|
||||||
|
|
||||||
img
|
|
||||||
width: 100%
|
|
||||||
margin: 0
|
|
||||||
padding: 0
|
|
||||||
#page-images-list, #page-files-list
|
|
||||||
padding: 10px 0 0 0
|
|
||||||
.img-item
|
|
||||||
height: 150px
|
|
||||||
width: 23.8%
|
|
||||||
border-radius: 3px
|
|
||||||
margin: 0 10px 10px 0
|
|
||||||
display: inline-block
|
|
||||||
cursor: pointer
|
|
||||||
.audio-item
|
|
||||||
height: 150px
|
|
||||||
width: 23.8%
|
|
||||||
border-radius: 3px
|
|
||||||
margin: 0 10px 10px 0
|
|
||||||
display: inline-block
|
|
||||||
cursor: pointer
|
|
||||||
background: $primary
|
|
||||||
background: url('/assets/images/global/upload-audio.png') no-repeat center center / cover
|
|
||||||
.video-item
|
|
||||||
height: 150px
|
|
||||||
width: 23.8%
|
|
||||||
border-radius: 3px
|
|
||||||
margin: 0 10px 10px 0
|
|
||||||
display: inline-block
|
|
||||||
cursor: pointer
|
|
||||||
background: $primary
|
|
||||||
background: url('/assets/images/global/upload-video.png') no-repeat center center / cover
|
|
||||||
.file-item
|
|
||||||
height: 150px
|
|
||||||
width: 23.8%
|
|
||||||
border-radius: 3px
|
|
||||||
margin: 0 10px 10px 0
|
|
||||||
display: inline-block
|
|
||||||
cursor: pointer
|
|
||||||
background: $primary
|
|
||||||
background: url('/assets/images/global/upload-doc.png') no-repeat center center / cover
|
|
||||||
|
|
||||||
|
|
||||||
#edit-post
|
|
||||||
width: 100%
|
|
||||||
max-width: 880px
|
|
||||||
margin: 0 auto
|
|
||||||
|
|
||||||
#edit-post-wrapper
|
|
||||||
width: 100%
|
|
||||||
max-width: 900px
|
|
||||||
border-radius: 5px
|
|
||||||
//background $primary - 10%
|
|
||||||
//margin: 10px 0 50px 0
|
|
||||||
position: relative
|
|
||||||
//editor sometimes scrolls throwing it all out of wack
|
|
||||||
//turning of scrolling keeps it aligned
|
|
||||||
textarea:focus
|
|
||||||
outline: none
|
|
||||||
border-color: $highlight
|
|
||||||
|
|
||||||
#edit, #highlight
|
|
||||||
border: 0
|
|
||||||
width: 100%
|
|
||||||
min-height: 300px
|
|
||||||
height: auto
|
|
||||||
position: absolute
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
overflow: auto
|
|
||||||
word-wrap: normal
|
|
||||||
white-space: pre-wrap
|
|
||||||
line-break: normal
|
|
||||||
#highlight-content
|
|
||||||
word-wrap: normal
|
|
||||||
white-space: pre-wrap
|
|
||||||
line-break: normal
|
|
||||||
|
|
||||||
#edit, #highlight, #hightlight *
|
|
||||||
font-size: 1.2em
|
|
||||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace
|
|
||||||
line-height: 22pt
|
|
||||||
|
|
||||||
#edit
|
|
||||||
z-index: 1
|
|
||||||
color: transparent
|
|
||||||
background: transparent
|
|
||||||
caret-color: $highlight
|
|
||||||
#highlight
|
|
||||||
z-index: 0
|
|
||||||
|
|
||||||
pre
|
|
||||||
margin: 0
|
|
||||||
code
|
|
||||||
font-family: $monoType
|
|
||||||
padding: 5px
|
|
||||||
border-radius: 5px
|
|
||||||
line-height: 1.6em
|
|
||||||
font-size: 1.25em
|
|
||||||
color: $editorPrimary
|
|
||||||
word-wrap: normal
|
|
||||||
white-space: pre-wrap
|
|
||||||
line-break: normal
|
|
||||||
-webkit-line-break: normal
|
|
||||||
-o-line-break: normal
|
|
||||||
-moz-line-break: normal
|
|
||||||
display: inline-block
|
|
||||||
width: 100%
|
|
||||||
max-width: 900px
|
|
||||||
min-height: 200px
|
|
||||||
caret-color: $highlight
|
|
||||||
|
|
||||||
//Responsive
|
|
||||||
@media only screen and (max-width: 800px)
|
|
||||||
#post-edit-index
|
|
||||||
#post-edit-index-wrapper
|
|
||||||
#post-header
|
|
||||||
#post-title
|
|
||||||
#post-date
|
|
||||||
width: 37.6%
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px)
|
|
||||||
#post-edit-index
|
|
||||||
#post-edit-index-wrapper
|
|
||||||
#post-header
|
|
||||||
#post-title
|
|
||||||
#post-date
|
|
||||||
width: 43.1%
|
|
||||||
|
|
||||||
#post-meta
|
|
||||||
#edit-control
|
|
||||||
max-width: 100%
|
|
||||||
|
|
||||||
button
|
|
||||||
width: 9.91%
|
|
||||||
|
|
||||||
@media only screen and (max-width: 640px)
|
|
||||||
#post-edit-index
|
|
||||||
#post-edit-index-wrapper
|
|
||||||
#post-header
|
|
||||||
#post-title
|
|
||||||
#post-date
|
|
||||||
width: 42%
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px)
|
|
||||||
#post-index
|
|
||||||
#post-index-wrapper
|
|
||||||
#post-index-header
|
|
||||||
#post-index-header-left
|
|
||||||
font-size: 1.35em
|
|
||||||
width: 30%
|
|
||||||
#post-index-header-right
|
|
||||||
width: 70%
|
|
||||||
vertical-align: top
|
|
||||||
#post-index-menu
|
|
||||||
a
|
|
||||||
font-size: 0.95em
|
|
||||||
|
|
||||||
label
|
|
||||||
display: none
|
|
||||||
visibility: hidden
|
|
||||||
|
|
||||||
#post-edit-index
|
|
||||||
#post-edit-index-wrapper
|
|
||||||
#post-header
|
|
||||||
#post-title
|
|
||||||
#post-options
|
|
||||||
margin: 5px 0 0 0
|
|
||||||
width: 100%
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
#post-date
|
|
||||||
width: 89.2%
|
|
||||||
|
|
||||||
#post-meta
|
|
||||||
#edit-control
|
|
||||||
button
|
|
||||||
width: 9.91%
|
|
||||||
|
|
||||||
@media only screen and (max-width: 320px)
|
|
||||||
#post-index
|
|
||||||
#post-index-wrapper
|
|
||||||
#post-index-menu
|
|
||||||
a
|
|
||||||
font-size: 0.95em
|
|
||||||
|
|
||||||
label
|
|
||||||
display: none
|
|
||||||
visibility: hidden
|
|
||||||
|
|
||||||
#post-edit-index
|
|
||||||
#post-edit-index-wrapper
|
|
||||||
#post-header
|
|
||||||
#post-title
|
|
||||||
#post_title
|
|
||||||
width: 96.4%
|
|
||||||
|
|
||||||
#post-options
|
|
||||||
margin: 5px 0 0 0
|
|
||||||
width: 100%
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
#post-date
|
|
||||||
width: 83.1%
|
|
||||||
|
|
||||||
#post-meta
|
|
||||||
#post_tags
|
|
||||||
width: 96.4%
|
|
||||||
|
|
||||||
#edit-control
|
|
||||||
.content-editor-btn-icon
|
|
||||||
svg.icons
|
|
||||||
width: 20px
|
|
||||||
|
|
||||||
.post-sumbit-btn
|
|
||||||
svg.icons
|
|
||||||
width: 20px
|
|
||||||
|
|
||||||
button
|
|
||||||
width: 10%
|
|
||||||
622
src/styles/main/_posts.scss
Normal file
622
src/styles/main/_posts.scss
Normal file
|
|
@ -0,0 +1,622 @@
|
||||||
|
#post-index {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
#post-index-wrapper {
|
||||||
|
//padding: 0.75rem
|
||||||
|
overflow: hidden;
|
||||||
|
#post-index-header {
|
||||||
|
margin: 10px 0 0 0;
|
||||||
|
#post-index-header-left {
|
||||||
|
text-transform: capitalize;
|
||||||
|
display: inline-block;
|
||||||
|
width: 50%;
|
||||||
|
color: $white;
|
||||||
|
font-size: 3em;
|
||||||
|
}
|
||||||
|
#post-index-header-right {
|
||||||
|
text-align: right;
|
||||||
|
display: inline-block;
|
||||||
|
width: 50%;
|
||||||
|
a {
|
||||||
|
button {
|
||||||
|
color: $white;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-left: 10px;
|
||||||
|
width: 55px;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
transition: all 0.1s linear;
|
||||||
|
width: 20px;
|
||||||
|
height: 17px;
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.current-filter {
|
||||||
|
color: $highlight;
|
||||||
|
text-decoration-color: $secondary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#posts-list {
|
||||||
|
margin: 20px 0 0 0;
|
||||||
|
|
||||||
|
a.page-link {
|
||||||
|
background: $white;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
color: color.adjust($primary, $lightness: -60%);
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
div.page-bg,
|
||||||
|
div.page-video {
|
||||||
|
video {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
width: 100%;
|
||||||
|
height: 350px;
|
||||||
|
background-color: $highlight;
|
||||||
|
position: relative;
|
||||||
|
label {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $white;
|
||||||
|
padding: 5px;
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
word-wrap: break-word;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
top: 35%;
|
||||||
|
text-shadow: 2px 2px 0 rgba($black, 1);
|
||||||
|
}
|
||||||
|
#meta {
|
||||||
|
width: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(0, 0, 0, 0) 0%,
|
||||||
|
rgba(0, 0, 0, 0.65) 100%
|
||||||
|
);
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: auto;
|
||||||
|
bottom: 0;
|
||||||
|
position: absolute;
|
||||||
|
padding: 0 0 20px 0;
|
||||||
|
#options {
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
position: absolute;
|
||||||
|
#option-left {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 50%;
|
||||||
|
position: relative;
|
||||||
|
background: none;
|
||||||
|
button {
|
||||||
|
border-radius: 3px;
|
||||||
|
background: $primary;
|
||||||
|
margin: 0 0 10px 10px;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
transition: all 0.2s linear;
|
||||||
|
width: 40px;
|
||||||
|
height: 20px;
|
||||||
|
fill: $secondary;
|
||||||
|
}
|
||||||
|
.item-options {
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
button[data-active="false"] {
|
||||||
|
background: $primary;
|
||||||
|
svg {
|
||||||
|
fill: $secondary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button[data-active="true"] {
|
||||||
|
background: $tertiary;
|
||||||
|
svg {
|
||||||
|
fill: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#option-right {
|
||||||
|
display: inline-block;
|
||||||
|
width: 50%;
|
||||||
|
text-align: right;
|
||||||
|
span {
|
||||||
|
font-weight: bold;
|
||||||
|
display: block;
|
||||||
|
background: $white;
|
||||||
|
color: $primary;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 0.6em;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
padding: 5px;
|
||||||
|
float: right;
|
||||||
|
margin: 0 10px 0 0;
|
||||||
|
bottom: -15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
padding: 5px 10px 5px 10px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.paginate {
|
||||||
|
width: 260px;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
span.count {
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px;
|
||||||
|
margin-top: -2px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 190px;
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: $tertiary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#post-edit-index {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
#post-edit-index-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
#post-header {
|
||||||
|
// width 100%
|
||||||
|
|
||||||
|
background: $highlight;
|
||||||
|
#post-header-wrapper {
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0.75rem;
|
||||||
|
label {
|
||||||
|
color: $white;
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-family: $baseType;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: $primary;
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
#post-title {
|
||||||
|
#post_title {
|
||||||
|
background: $white;
|
||||||
|
font-family: $baseType;
|
||||||
|
width: 97.6%;
|
||||||
|
height: 80px;
|
||||||
|
font-size: 2em;
|
||||||
|
color: $primary;
|
||||||
|
padding: 5px;
|
||||||
|
margin: 0 0 5px 0;
|
||||||
|
}
|
||||||
|
#calendar-icon {
|
||||||
|
background: color.adjust($primary, $lightness: -15%);
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5.2px;
|
||||||
|
color: $secondary;
|
||||||
|
}
|
||||||
|
#layouts {
|
||||||
|
select {
|
||||||
|
background: $primary;
|
||||||
|
color: $secondary;
|
||||||
|
border-radius: 3px;
|
||||||
|
border-color: $primary;
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 45px;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#post-meta {
|
||||||
|
#post_tags {
|
||||||
|
background: $white;
|
||||||
|
font-family: $baseType;
|
||||||
|
width: 97.6%;
|
||||||
|
height: 80px;
|
||||||
|
color: $primary;
|
||||||
|
padding: 5px;
|
||||||
|
margin: 0 0 5px 0;
|
||||||
|
}
|
||||||
|
#post-options {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
|
||||||
|
button:nth-child(1) {
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
}
|
||||||
|
button:nth-child(4) {
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
button {
|
||||||
|
border-radius: 0 3px 3px 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
width: 25%;
|
||||||
|
height: 45px;
|
||||||
|
transition: all 0.3s linear;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
button[data-active="false"] {
|
||||||
|
background: $primary;
|
||||||
|
svg {
|
||||||
|
fill: $secondary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button[data-active="true"] {
|
||||||
|
background: $tertiary;
|
||||||
|
svg {
|
||||||
|
fill: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#page-files-upload,
|
||||||
|
#post-image-upload {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#post-feature {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
#page-file-manager {
|
||||||
|
background: $tertiary;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 300px;
|
||||||
|
#page-file-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-weight: bold;
|
||||||
|
font-color: $primary;
|
||||||
|
font-size: 1em;
|
||||||
|
#page-file-drop {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100px;
|
||||||
|
background: $white;
|
||||||
|
color: $primary;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
|
||||||
|
label {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#page-images-list,
|
||||||
|
#page-files-list {
|
||||||
|
padding: 10px 0 0 0;
|
||||||
|
.img-item {
|
||||||
|
height: 150px;
|
||||||
|
width: 23.8%;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: 0 10px 10px 0;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.audio-item {
|
||||||
|
height: 150px;
|
||||||
|
width: 23.8%;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: 0 10px 10px 0;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
background: $primary;
|
||||||
|
background: url("/assets/images/global/upload-audio.png")
|
||||||
|
no-repeat center center / cover;
|
||||||
|
}
|
||||||
|
.video-item {
|
||||||
|
height: 150px;
|
||||||
|
width: 23.8%;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: 0 10px 10px 0;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
background: $primary;
|
||||||
|
background: url("/assets/images/global/upload-video.png")
|
||||||
|
no-repeat center center / cover;
|
||||||
|
}
|
||||||
|
.file-item {
|
||||||
|
height: 150px;
|
||||||
|
width: 23.8%;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: 0 10px 10px 0;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
background: $primary;
|
||||||
|
background: url("/assets/images/global/upload-doc.png") no-repeat
|
||||||
|
center center / cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#edit-post {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 880px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
#edit-post-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
border-radius: 5px;
|
||||||
|
//background $primary - 10%
|
||||||
|
//margin: 10px 0 50px 0
|
||||||
|
position: relative;
|
||||||
|
//editor sometimes scrolls throwing it all out of wack
|
||||||
|
//turning of scrolling keeps it aligned
|
||||||
|
textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: $highlight;
|
||||||
|
}
|
||||||
|
#edit,
|
||||||
|
#highlight {
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 300px;
|
||||||
|
height: auto;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: auto;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
line-break: normal;
|
||||||
|
}
|
||||||
|
#highlight-content {
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
line-break: normal;
|
||||||
|
}
|
||||||
|
#edit,
|
||||||
|
#highlight,
|
||||||
|
#hightlight * {
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||||
|
line-height: 22pt;
|
||||||
|
}
|
||||||
|
#edit {
|
||||||
|
z-index: 1;
|
||||||
|
color: transparent;
|
||||||
|
background: transparent;
|
||||||
|
caret-color: $highlight;
|
||||||
|
}
|
||||||
|
#highlight {
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
code {
|
||||||
|
font-family: $monoType;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
line-height: 1.6em;
|
||||||
|
font-size: 1.25em;
|
||||||
|
color: $editorPrimary;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
line-break: normal;
|
||||||
|
-webkit-line-break: normal;
|
||||||
|
-o-line-break: normal;
|
||||||
|
-moz-line-break: normal;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
min-height: 200px;
|
||||||
|
caret-color: $highlight;
|
||||||
|
}
|
||||||
|
//Responsive
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
#post-edit-index {
|
||||||
|
#post-edit-index-wrapper {
|
||||||
|
#post-header {
|
||||||
|
#post-title {
|
||||||
|
#post-date {
|
||||||
|
width: 37.6%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
#post-edit-index {
|
||||||
|
#post-edit-index-wrapper {
|
||||||
|
#post-header {
|
||||||
|
#post-title {
|
||||||
|
#post-date {
|
||||||
|
width: 43.1%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#post-meta {
|
||||||
|
#edit-control {
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 9.91%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 640px) {
|
||||||
|
#post-edit-index {
|
||||||
|
#post-edit-index-wrapper {
|
||||||
|
#post-header {
|
||||||
|
#post-title {
|
||||||
|
#post-date {
|
||||||
|
width: 42%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
#post-index {
|
||||||
|
#post-index-wrapper {
|
||||||
|
#post-index-header {
|
||||||
|
#post-index-header-left {
|
||||||
|
font-size: 1.35em;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
#post-index-header-right {
|
||||||
|
width: 70%;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#post-index-menu {
|
||||||
|
a {
|
||||||
|
font-size: 0.95em;
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#post-edit-index {
|
||||||
|
#post-edit-index-wrapper {
|
||||||
|
#post-header {
|
||||||
|
#post-title {
|
||||||
|
#post-options {
|
||||||
|
margin: 5px 0 0 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#post-date {
|
||||||
|
width: 89.2%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#post-meta {
|
||||||
|
#edit-control {
|
||||||
|
button {
|
||||||
|
width: 9.91%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 320px) {
|
||||||
|
#post-index {
|
||||||
|
#post-index-wrapper {
|
||||||
|
#post-index-menu {
|
||||||
|
a {
|
||||||
|
font-size: 0.95em;
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#post-edit-index {
|
||||||
|
#post-edit-index-wrapper {
|
||||||
|
#post-header {
|
||||||
|
#post-title {
|
||||||
|
#post_title {
|
||||||
|
width: 96.4%;
|
||||||
|
}
|
||||||
|
#post-options {
|
||||||
|
margin: 5px 0 0 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#post-date {
|
||||||
|
width: 83.1%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#post-meta {
|
||||||
|
#post_tags {
|
||||||
|
width: 96.4%;
|
||||||
|
}
|
||||||
|
#edit-control {
|
||||||
|
.content-editor-btn-icon {
|
||||||
|
svg.icons {
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.post-sumbit-btn {
|
||||||
|
svg.icons {
|
||||||
|
width: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} ;
|
||||||
|
|
@ -1,282 +0,0 @@
|
||||||
#settings-actions
|
|
||||||
position: fixed
|
|
||||||
width: 40%
|
|
||||||
margin-top: -85px
|
|
||||||
left: 50%
|
|
||||||
margin-left: -20%
|
|
||||||
#buttons
|
|
||||||
width: 185px
|
|
||||||
margin: 28px auto
|
|
||||||
text-align: center
|
|
||||||
background: $white
|
|
||||||
padding: 2px
|
|
||||||
border-radius: 3px
|
|
||||||
button
|
|
||||||
color: $white
|
|
||||||
border-radius: 3px
|
|
||||||
width: 40px
|
|
||||||
margin: 0 10px 0 10px
|
|
||||||
svg
|
|
||||||
width: 25px
|
|
||||||
height: 20px
|
|
||||||
fill: $white
|
|
||||||
button[data-render='false']
|
|
||||||
background: $secondary
|
|
||||||
svg
|
|
||||||
fill: $primary
|
|
||||||
|
|
||||||
button[data-render='true']
|
|
||||||
background: $highlight
|
|
||||||
svg
|
|
||||||
fill: $white
|
|
||||||
|
|
||||||
#settings-index
|
|
||||||
width: 94%
|
|
||||||
max-width: 900px
|
|
||||||
margin: 0 auto
|
|
||||||
overflow: hidden
|
|
||||||
#settings-index-wrapper
|
|
||||||
padding: 0
|
|
||||||
|
|
||||||
button
|
|
||||||
margin-top: 5px
|
|
||||||
width: 100%
|
|
||||||
height: 33px
|
|
||||||
|
|
||||||
#member-settings, #feature-settings, #option-settings, #token-settings, #backup-settings
|
|
||||||
background: $white
|
|
||||||
padding: 0px
|
|
||||||
border-radius: 5px 0 5px 0
|
|
||||||
width: 100%
|
|
||||||
margin: 20px auto
|
|
||||||
|
|
||||||
label
|
|
||||||
font-family: $baseType
|
|
||||||
color: $primary
|
|
||||||
font-weight: bold
|
|
||||||
span
|
|
||||||
color: $secondary
|
|
||||||
|
|
||||||
input
|
|
||||||
width: 95%
|
|
||||||
margin: 0 5px 10px 0
|
|
||||||
height: 30px
|
|
||||||
padding: 10px
|
|
||||||
input#backup-upload
|
|
||||||
visibility: hidden
|
|
||||||
display: none
|
|
||||||
.backup-meta
|
|
||||||
background: $primary
|
|
||||||
color: $white
|
|
||||||
padding: 8px
|
|
||||||
border-radius: 3px
|
|
||||||
margin: 5px 0 0 0
|
|
||||||
text-align: center
|
|
||||||
|
|
||||||
#member-images
|
|
||||||
padding: 10px 15px 0 15px
|
|
||||||
|
|
||||||
#member-avatar-drop
|
|
||||||
display: inline-block
|
|
||||||
margin: 0 0 10px 0
|
|
||||||
|
|
||||||
img
|
|
||||||
width: 100%
|
|
||||||
border-radius: 5px
|
|
||||||
overflow: hidden
|
|
||||||
cursor: pointer
|
|
||||||
display: block
|
|
||||||
margin-bottom: 2px
|
|
||||||
|
|
||||||
input
|
|
||||||
visibility: hidden
|
|
||||||
display: none
|
|
||||||
#privacy-toggle
|
|
||||||
width: 50%
|
|
||||||
#render-toggle
|
|
||||||
width: 50%
|
|
||||||
|
|
||||||
#site-background
|
|
||||||
margin: 0 0 10px 0
|
|
||||||
|
|
||||||
img
|
|
||||||
width: 92.1%
|
|
||||||
height: 292px
|
|
||||||
border-radius: 3px
|
|
||||||
overflow: hidden
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
input
|
|
||||||
visibility: hidden
|
|
||||||
display: none
|
|
||||||
#member-meta
|
|
||||||
padding: 10px 15px 0 15px
|
|
||||||
position: relative
|
|
||||||
top: -30px
|
|
||||||
|
|
||||||
|
|
||||||
#features
|
|
||||||
padding: 10px 15px 0 15px
|
|
||||||
|
|
||||||
|
|
||||||
textarea
|
|
||||||
background: $primary
|
|
||||||
width: 70%
|
|
||||||
height: 89.5px
|
|
||||||
color: $tertiary
|
|
||||||
padding: 10px
|
|
||||||
display: inline-block
|
|
||||||
margin-bottom: 10px
|
|
||||||
span#key
|
|
||||||
color: $white
|
|
||||||
background: $primary
|
|
||||||
font-size: 0.9em
|
|
||||||
border-radius: 3px
|
|
||||||
padding: 5px
|
|
||||||
display: block
|
|
||||||
width: 95%
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
#feature-settings
|
|
||||||
#feature-api, #dynamic-api
|
|
||||||
background: $white
|
|
||||||
border-radius: 3px
|
|
||||||
padding: 5px
|
|
||||||
|
|
||||||
|
|
||||||
button
|
|
||||||
color: $white
|
|
||||||
border-radius: 3px
|
|
||||||
width: 200px
|
|
||||||
margin: 0
|
|
||||||
height: 200px
|
|
||||||
font-size: 1em
|
|
||||||
svg
|
|
||||||
width: 100px
|
|
||||||
height: 90px
|
|
||||||
fill: $white
|
|
||||||
position: relative
|
|
||||||
display: block
|
|
||||||
margin: 12px auto
|
|
||||||
span
|
|
||||||
color: $white
|
|
||||||
margin: 6px 0 0 5px
|
|
||||||
position: relative
|
|
||||||
vertical-align: middle
|
|
||||||
display: inline-block
|
|
||||||
font-weight: bold
|
|
||||||
|
|
||||||
button[data-enabled='false']
|
|
||||||
background: $secondary
|
|
||||||
svg
|
|
||||||
fill: $primary
|
|
||||||
span
|
|
||||||
color: $primary
|
|
||||||
button[data-enabled='true']
|
|
||||||
background: $highlight
|
|
||||||
svg
|
|
||||||
fill: $white
|
|
||||||
#token-settings
|
|
||||||
#keys-tokens
|
|
||||||
padding: 10px 15px 0 15px
|
|
||||||
#member-api-key, #form-token
|
|
||||||
background: $primary
|
|
||||||
border-radius: 3px
|
|
||||||
padding: 5px
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
#option-settings
|
|
||||||
#theme-settings
|
|
||||||
a
|
|
||||||
width: 95%
|
|
||||||
margin: 0 5px 5px 0
|
|
||||||
height: 15px
|
|
||||||
padding: 10px
|
|
||||||
display: inline-block
|
|
||||||
|
|
||||||
a[data-enabled='false']
|
|
||||||
background: $white
|
|
||||||
color: $primary
|
|
||||||
border-radius: 3px
|
|
||||||
font-weight: bold
|
|
||||||
border-top: 1px $highlight solid
|
|
||||||
border-bottom: 1px $highlight solid
|
|
||||||
|
|
||||||
a[data-enabled='true']
|
|
||||||
background: $highlight
|
|
||||||
color: $primary
|
|
||||||
border-radius: 3px
|
|
||||||
font-weight: bold
|
|
||||||
border-top: 1px $primary solid
|
|
||||||
border-bottom: 1px $primary solid
|
|
||||||
svg
|
|
||||||
fill: $primary
|
|
||||||
display: inline-block
|
|
||||||
float: right
|
|
||||||
|
|
||||||
#mail-settings
|
|
||||||
min-height: 240px
|
|
||||||
|
|
||||||
a.mail-option
|
|
||||||
float: right
|
|
||||||
font-family: $monoType
|
|
||||||
font-size: 0.9em
|
|
||||||
border-radius: 3px
|
|
||||||
text-decoration: none
|
|
||||||
margin: 0 0 0 5px
|
|
||||||
// padding: 1px
|
|
||||||
|
|
||||||
a.mail-option[data-enabled='true']
|
|
||||||
color: $highlight
|
|
||||||
|
|
||||||
a.mail-option[data-enabled='false']
|
|
||||||
color: $primary
|
|
||||||
|
|
||||||
input
|
|
||||||
// width 94%
|
|
||||||
margin: 0 5px 5px 0
|
|
||||||
vertical-align: top
|
|
||||||
|
|
||||||
div[data-enabled='false']
|
|
||||||
display: none
|
|
||||||
visibility: hidden
|
|
||||||
#settings-api
|
|
||||||
background: $primary
|
|
||||||
border-radius: 3px
|
|
||||||
padding: 10px
|
|
||||||
span
|
|
||||||
color: $white !important
|
|
||||||
margin: -13px 0 0 5px
|
|
||||||
position: relative
|
|
||||||
vertical-align: middle
|
|
||||||
display: inline-block
|
|
||||||
font-weight: bold
|
|
||||||
|
|
||||||
button
|
|
||||||
color: $white
|
|
||||||
border-radius: 3px
|
|
||||||
width: 40px
|
|
||||||
margin: 0
|
|
||||||
svg
|
|
||||||
width: 25px
|
|
||||||
height: 20px
|
|
||||||
fill: $white
|
|
||||||
button[data-enabled='false']
|
|
||||||
background: $secondary
|
|
||||||
svg
|
|
||||||
fill: $primary
|
|
||||||
button[data-enabled='true']
|
|
||||||
background: $highlight
|
|
||||||
svg
|
|
||||||
fill: $white
|
|
||||||
|
|
||||||
// responsive
|
|
||||||
@media only screen and (max-width: 480px)
|
|
||||||
#settings-actions
|
|
||||||
margin-left: -42%
|
|
||||||
#buttons
|
|
||||||
width: 150px
|
|
||||||
background: none
|
|
||||||
button
|
|
||||||
margin: 0 5px 0 5px
|
|
||||||
|
|
||||||
328
src/styles/main/_settings.scss
Normal file
328
src/styles/main/_settings.scss
Normal file
|
|
@ -0,0 +1,328 @@
|
||||||
|
#settings-actions {
|
||||||
|
position: fixed;
|
||||||
|
width: 40%;
|
||||||
|
margin-top: -85px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -20%;
|
||||||
|
#buttons {
|
||||||
|
width: 185px;
|
||||||
|
margin: 28px auto;
|
||||||
|
text-align: center;
|
||||||
|
background: $white;
|
||||||
|
padding: 2px;
|
||||||
|
border-radius: 3px;
|
||||||
|
button {
|
||||||
|
color: $white;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 40px;
|
||||||
|
margin: 0 10px 0 10px;
|
||||||
|
svg {
|
||||||
|
width: 25px;
|
||||||
|
height: 20px;
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button[data-render="false"] {
|
||||||
|
background: $secondary;
|
||||||
|
svg {
|
||||||
|
fill: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button[data-render="true"] {
|
||||||
|
background: $highlight;
|
||||||
|
svg {
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#settings-index {
|
||||||
|
width: 94%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: hidden;
|
||||||
|
#settings-index-wrapper {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-top: 5px;
|
||||||
|
width: 100%;
|
||||||
|
height: 33px;
|
||||||
|
}
|
||||||
|
#member-settings,
|
||||||
|
#feature-settings,
|
||||||
|
#option-settings,
|
||||||
|
#token-settings,
|
||||||
|
#backup-settings {
|
||||||
|
background: $white;
|
||||||
|
padding: 0px;
|
||||||
|
border-radius: 5px 0 5px 0;
|
||||||
|
width: 100%;
|
||||||
|
margin: 20px auto;
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-family: $baseType;
|
||||||
|
color: $primary;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: $secondary;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
width: 95%;
|
||||||
|
margin: 0 5px 10px 0;
|
||||||
|
height: 30px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
input#backup-upload {
|
||||||
|
visibility: hidden;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.backup-meta {
|
||||||
|
background: $primary;
|
||||||
|
color: $white;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin: 5px 0 0 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#member-images {
|
||||||
|
padding: 10px 15px 0 15px;
|
||||||
|
|
||||||
|
#member-avatar-drop {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
visibility: hidden;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#privacy-toggle {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
#render-toggle {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#site-background {
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 92.1%;
|
||||||
|
height: 292px;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
visibility: hidden;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#member-meta {
|
||||||
|
padding: 10px 15px 0 15px;
|
||||||
|
position: relative;
|
||||||
|
top: -30px;
|
||||||
|
}
|
||||||
|
#features {
|
||||||
|
padding: 10px 15px 0 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
background: $primary;
|
||||||
|
width: 70%;
|
||||||
|
height: 89.5px;
|
||||||
|
color: $tertiary;
|
||||||
|
padding: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
span#key {
|
||||||
|
color: $white;
|
||||||
|
background: $primary;
|
||||||
|
font-size: 0.9em;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 5px;
|
||||||
|
display: block;
|
||||||
|
width: 95%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#feature-settings {
|
||||||
|
#feature-api,
|
||||||
|
#dynamic-api {
|
||||||
|
background: $white;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: $white;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 200px;
|
||||||
|
margin: 0;
|
||||||
|
height: 200px;
|
||||||
|
font-size: 1em;
|
||||||
|
svg {
|
||||||
|
width: 100px;
|
||||||
|
height: 90px;
|
||||||
|
fill: $white;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
margin: 12px auto;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: $white;
|
||||||
|
margin: 6px 0 0 5px;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button[data-enabled="false"] {
|
||||||
|
background: $secondary;
|
||||||
|
svg {
|
||||||
|
fill: $primary;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button[data-enabled="true"] {
|
||||||
|
background: $highlight;
|
||||||
|
svg {
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#token-settings {
|
||||||
|
#keys-tokens {
|
||||||
|
padding: 10px 15px 0 15px;
|
||||||
|
#member-api-key,
|
||||||
|
#form-token {
|
||||||
|
background: $primary;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 5px;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#option-settings {
|
||||||
|
#theme-settings {
|
||||||
|
a {
|
||||||
|
width: 95%;
|
||||||
|
margin: 0 5px 5px 0;
|
||||||
|
height: 15px;
|
||||||
|
padding: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
a[data-enabled="false"] {
|
||||||
|
background: $white;
|
||||||
|
color: $primary;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-weight: bold;
|
||||||
|
border-top: 1px $highlight solid;
|
||||||
|
border-bottom: 1px $highlight solid;
|
||||||
|
}
|
||||||
|
a[data-enabled="true"] {
|
||||||
|
background: $highlight;
|
||||||
|
color: $primary;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-weight: bold;
|
||||||
|
border-top: 1px $primary solid;
|
||||||
|
border-bottom: 1px $primary solid;
|
||||||
|
svg {
|
||||||
|
fill: $primary;
|
||||||
|
display: inline-block;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#mail-settings {
|
||||||
|
min-height: 240px;
|
||||||
|
|
||||||
|
a.mail-option {
|
||||||
|
float: right;
|
||||||
|
font-family: $monoType;
|
||||||
|
font-size: 0.9em;
|
||||||
|
border-radius: 3px;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 0 0 0 5px;
|
||||||
|
}
|
||||||
|
a.mail-option[data-enabled="true"] {
|
||||||
|
color: $highlight;
|
||||||
|
}
|
||||||
|
a.mail-option[data-enabled="false"] {
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
// width 94%
|
||||||
|
margin: 0 5px 5px 0;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
div[data-enabled="false"] {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
#settings-api {
|
||||||
|
background: $primary;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 10px;
|
||||||
|
span {
|
||||||
|
color: $white !important;
|
||||||
|
margin: -13px 0 0 5px;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
color: $white;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 40px;
|
||||||
|
margin: 0;
|
||||||
|
svg {
|
||||||
|
width: 25px;
|
||||||
|
height: 20px;
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button[data-enabled="false"] {
|
||||||
|
background: $secondary;
|
||||||
|
svg {
|
||||||
|
fill: $primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button[data-enabled="true"] {
|
||||||
|
background: $highlight;
|
||||||
|
svg {
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
// responsive
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
#settings-actions {
|
||||||
|
margin-left: -42%;
|
||||||
|
#buttons {
|
||||||
|
width: 150px;
|
||||||
|
background: none;
|
||||||
|
button {
|
||||||
|
margin: 0 5px 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} ;
|
||||||
|
|
@ -1,188 +0,0 @@
|
||||||
html, body
|
|
||||||
background: $primary linear-gradient(0deg, rgba($primary,1) 0%, rgba(color.adjust($primary, $lightness: 10%),1) 100%) no-repeat
|
|
||||||
font: 400 1em $baseType
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
a
|
|
||||||
font: 300 1em $baseType
|
|
||||||
color: $secondary
|
|
||||||
text-decoration: underline
|
|
||||||
transition: all 0.2s linear
|
|
||||||
|
|
||||||
svg.icons
|
|
||||||
width: 25px
|
|
||||||
fill: $secondary
|
|
||||||
|
|
||||||
#notifications
|
|
||||||
perspective: 1000px
|
|
||||||
position: fixed
|
|
||||||
z-index: 2000
|
|
||||||
height: 55px
|
|
||||||
width: 100%
|
|
||||||
display: block
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
padding: 0
|
|
||||||
margin-top: -55px
|
|
||||||
#notifyMessage
|
|
||||||
margin: 0 auto
|
|
||||||
//ks-easing( "out-back" );
|
|
||||||
transition: all 0.6s cubic-bezier(.83,.05,.28,1.0)
|
|
||||||
//padding-top -125px
|
|
||||||
height: 50px
|
|
||||||
width: 500px
|
|
||||||
display: flex
|
|
||||||
align-items: center
|
|
||||||
justify-content: center
|
|
||||||
opacity: 1
|
|
||||||
transform-style: preserve-3d
|
|
||||||
transform: rotateX(120deg)
|
|
||||||
transform-origin: 50% 0
|
|
||||||
overflow: hidden
|
|
||||||
#notify-good, #notify-lame, #notify-working
|
|
||||||
display: block
|
|
||||||
#notify-working-icon
|
|
||||||
-webkit-animation: spin 2s linear infinite
|
|
||||||
-moz-animation: spin 2s linear infinite
|
|
||||||
animation: spin 2s linear infinite
|
|
||||||
@keyframes spin
|
|
||||||
transform: rotate(360deg)
|
|
||||||
|
|
||||||
.notify-icon
|
|
||||||
background: $black
|
|
||||||
padding: 8px 5px 5px 5px
|
|
||||||
border-radius: 5px 0 0 5px
|
|
||||||
height: 30px
|
|
||||||
width: 30px
|
|
||||||
text-align: center
|
|
||||||
border: 2px solid $white
|
|
||||||
#notify-text
|
|
||||||
color: $white
|
|
||||||
background: $black
|
|
||||||
width: 400px
|
|
||||||
height: 28px
|
|
||||||
padding: 15px 0 0 0
|
|
||||||
border-radius: 0 5px 5px 0
|
|
||||||
border: 2px solid $white
|
|
||||||
text-align: center
|
|
||||||
overflow: hidden
|
|
||||||
position: relative
|
|
||||||
#notify-progress
|
|
||||||
width: 0
|
|
||||||
background: $highlight
|
|
||||||
height: 43px
|
|
||||||
position: absolute
|
|
||||||
top: 0px
|
|
||||||
p
|
|
||||||
top: -15px
|
|
||||||
display: block
|
|
||||||
position: relative
|
|
||||||
|
|
||||||
.icons
|
|
||||||
fill: $white
|
|
||||||
|
|
||||||
.notify-close
|
|
||||||
transform-style: preserve-3d
|
|
||||||
transform: rotateX(-120deg)
|
|
||||||
|
|
||||||
.notify-open
|
|
||||||
transform-style: preserve-3d
|
|
||||||
transform: rotateX(0deg)
|
|
||||||
.blog-container
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
.main-container
|
|
||||||
margin: 0 auto
|
|
||||||
z-index: 10
|
|
||||||
position: relative
|
|
||||||
height: 100%
|
|
||||||
|
|
||||||
section
|
|
||||||
header
|
|
||||||
width: 100%
|
|
||||||
max-width: 900px
|
|
||||||
margin: 10px auto
|
|
||||||
background: $white
|
|
||||||
height: 50px
|
|
||||||
border-radius: 5px
|
|
||||||
|
|
||||||
#wrapper
|
|
||||||
padding: 5px
|
|
||||||
|
|
||||||
#left, #right
|
|
||||||
width: 49.7%
|
|
||||||
display: inline-block
|
|
||||||
vertical-align: top
|
|
||||||
min-height: 60px
|
|
||||||
|
|
||||||
#the-logo
|
|
||||||
width: 29px
|
|
||||||
|
|
||||||
#right
|
|
||||||
text-align: right
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
// word-break: break-all;
|
|
||||||
#dash-menu
|
|
||||||
text-align: right
|
|
||||||
a
|
|
||||||
button
|
|
||||||
border-radius: 50px
|
|
||||||
svg
|
|
||||||
transition: all 0.2s linear
|
|
||||||
width: 40px
|
|
||||||
height: 20px
|
|
||||||
fill: $white
|
|
||||||
&:hover
|
|
||||||
button
|
|
||||||
background: $primary
|
|
||||||
svg
|
|
||||||
fill: $secondary
|
|
||||||
|
|
||||||
/* Mozilla based browsers */
|
|
||||||
::-moz-selection
|
|
||||||
background-color: $highlight
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
/* Works in Safari */
|
|
||||||
::selection
|
|
||||||
background-color: $highlight
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
/* Works in Opera */
|
|
||||||
::-o-selection
|
|
||||||
background-color: $highlight
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
::-ms-selection
|
|
||||||
background-color: $highlight
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
/* Works in Internet Explorer */
|
|
||||||
::-webkit-selection
|
|
||||||
background-color: $highlight
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
//Responsive
|
|
||||||
@media only screen and (max-width: 901px)
|
|
||||||
.main-container
|
|
||||||
padding: 10px
|
|
||||||
|
|
||||||
@media only screen and (max-width: 800px)
|
|
||||||
.main-container
|
|
||||||
section
|
|
||||||
header
|
|
||||||
#wrapper
|
|
||||||
#left, #right
|
|
||||||
display: inline-block
|
|
||||||
|
|
||||||
@media only screen and (max-width: 480px)
|
|
||||||
.main-container
|
|
||||||
section
|
|
||||||
header
|
|
||||||
#wrapper
|
|
||||||
#left
|
|
||||||
width: 30%
|
|
||||||
|
|
||||||
#right
|
|
||||||
width: 70%
|
|
||||||
251
src/styles/main/_structure.scss
Normal file
251
src/styles/main/_structure.scss
Normal file
|
|
@ -0,0 +1,251 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
background: $primary
|
||||||
|
linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba($primary, 1) 0%,
|
||||||
|
rgba(color.adjust($primary, $lightness: 10%), 1) 100%
|
||||||
|
)
|
||||||
|
no-repeat;
|
||||||
|
font: 400 1em $baseType;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font: 300 1em $baseType;
|
||||||
|
color: $secondary;
|
||||||
|
text-decoration: underline;
|
||||||
|
transition: all 0.2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg.icons {
|
||||||
|
width: 25px;
|
||||||
|
fill: $secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notifications {
|
||||||
|
perspective: 1000px;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 2000;
|
||||||
|
height: 55px;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
margin-top: -55px;
|
||||||
|
|
||||||
|
#notify-message {
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
// ks-easing( "out-back" );
|
||||||
|
transition: all 0.6s cubic-bezier(0.83, 0.05, 0.28, 1);
|
||||||
|
|
||||||
|
// padding-top -125px
|
||||||
|
height: 50px;
|
||||||
|
width: 500px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
opacity: 1;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transform: rotateX(120deg);
|
||||||
|
transform-origin: 50% 0;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
#notify-good,
|
||||||
|
#notify-lame,
|
||||||
|
#notify-working {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notify-working-icon {
|
||||||
|
animation: spin 2s linear infinite;
|
||||||
|
@keyframes spin {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notify-icon {
|
||||||
|
background: $black;
|
||||||
|
padding: 8px 5px 5px;
|
||||||
|
border-radius: 5px 0 0 5px;
|
||||||
|
height: 30px;
|
||||||
|
width: 30px;
|
||||||
|
text-align: center;
|
||||||
|
border: 2px solid $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#notify-text {
|
||||||
|
color: $white;
|
||||||
|
background: $black;
|
||||||
|
width: 400px;
|
||||||
|
height: 28px;
|
||||||
|
padding: 15px 0 0;
|
||||||
|
border-radius: 0 5px 5px 0;
|
||||||
|
border: 2px solid $white;
|
||||||
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
#notify-progress {
|
||||||
|
width: 0;
|
||||||
|
background: $highlight;
|
||||||
|
height: 43px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
top: -15px;
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons {
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notify-close {
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transform: rotateX(-120deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notify-open {
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transform: rotateX(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
margin: 0 auto;
|
||||||
|
z-index: 10;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
section {
|
||||||
|
header {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 10px auto;
|
||||||
|
background: $white;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
#wrapper {
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
#left,
|
||||||
|
#right {
|
||||||
|
width: 49.7%;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
min-height: 60px;
|
||||||
|
|
||||||
|
#the-logo {
|
||||||
|
width: 29px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#right {
|
||||||
|
text-align: right;
|
||||||
|
color: $white;
|
||||||
|
|
||||||
|
// word-break: break-all;
|
||||||
|
#dash-menu {
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
a {
|
||||||
|
button {
|
||||||
|
border-radius: 50px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
transition: all 0.2s linear;
|
||||||
|
width: 40px;
|
||||||
|
height: 20px;
|
||||||
|
fill: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
button {
|
||||||
|
background: $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
fill: $secondary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} /* Mozilla based browsers */
|
||||||
|
::selection {
|
||||||
|
background-color: $highlight;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Works in Opera */
|
||||||
|
::-o-selection {
|
||||||
|
background-color: $highlight;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-ms-selection {
|
||||||
|
background-color: $highlight;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Works in Internet Explorer */
|
||||||
|
::-webkit-selection {
|
||||||
|
background-color: $highlight;
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Responsive
|
||||||
|
@media only screen and (max-width: 901px) {
|
||||||
|
.main-container {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
.main-container {
|
||||||
|
section {
|
||||||
|
header {
|
||||||
|
#wrapper {
|
||||||
|
#left,
|
||||||
|
#right {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 480px) {
|
||||||
|
.main-container {
|
||||||
|
section {
|
||||||
|
header {
|
||||||
|
#wrapper {
|
||||||
|
#left {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} ;
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
$baseType: Helvetica, Arial, sans-serif
|
|
||||||
$monoType: "Lucida Console", Monaco, monospace
|
|
||||||
|
|
||||||
h1, h2, h3
|
|
||||||
color: $white
|
|
||||||
|
|
||||||
h1
|
|
||||||
font-size: 2em
|
|
||||||
font-weight: 400
|
|
||||||
|
|
||||||
h2
|
|
||||||
font-size: 1.75em
|
|
||||||
font-weight: 400
|
|
||||||
|
|
||||||
h3
|
|
||||||
font-size: 1.5em
|
|
||||||
font-weight: 300
|
|
||||||
|
|
||||||
20
src/styles/main/_typography.scss
Normal file
20
src/styles/main/_typography.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
$baseType: Helvetica, Arial, sans-serif;
|
||||||
|
$monoType: "Lucida Console", Monaco, monospace;
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1.75em;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue