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",
|
||||
"bracketSpacing": true,
|
||||
"htmlWhitespaceSensitivity": "css",
|
||||
"insertPragma": false,
|
||||
"bracketSameLine": false,
|
||||
"jsxSingleQuote": true,
|
||||
"parser": "babel",
|
||||
"proseWrap": "preserve",
|
||||
"requirePragma": false,
|
||||
"semi": true,
|
||||
|
|
@ -14,4 +30,7 @@
|
|||
"useTabs": true,
|
||||
"tabWidth": 4,
|
||||
"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>
|
||||
<body>
|
||||
<div id="notifications" class="notifications">
|
||||
<div id="notifyMessage" class="notifyMessage">
|
||||
<div id="notify-message" class="notify-message">
|
||||
<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>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,27 +4,27 @@
|
|||
if not, just make them empty
|
||||
#}
|
||||
{% if mode == 'edit' %}
|
||||
{% set id = page['id'] %}
|
||||
{% set uuid = page['uuid'] %}
|
||||
{% set id = page['id'] %}
|
||||
{% set uuid = page['uuid'] %}
|
||||
{% set slug = page['slug'] %}
|
||||
{% set layout = page['layout'] %}
|
||||
{% set feature = page['feature'] %}
|
||||
{% set _title = page['title'] %}
|
||||
{% set tags = page['tags'] %}
|
||||
{% set content = page['content'] %}
|
||||
{% set feature = page['feature'] %}
|
||||
{% set _title = page['title'] %}
|
||||
{% set tags = page['tags'] %}
|
||||
{% set content = page['content'] %}
|
||||
{% set date = page['created'] %}
|
||||
{% set updated = page['updated'] %}
|
||||
{% set media = page['media'] %}
|
||||
{% set files = page['docs'] %}
|
||||
{% else %}
|
||||
{% set id = '' %}
|
||||
{% set uuid = '' %}
|
||||
{% set id = '' %}
|
||||
{% set uuid = '' %}
|
||||
{% set slug = '' %}
|
||||
{% set layout = 'page' %}
|
||||
{% set feature = '' %}
|
||||
{% set feature = '' %}
|
||||
{% set title = '' %}
|
||||
{% set tags = '' %}
|
||||
{% set content = '' %}
|
||||
{% set tags = '' %}
|
||||
{% set content = '' %}
|
||||
{% set date = '' %}
|
||||
{% set updated = '' %}
|
||||
{% set media = '' %}
|
||||
|
|
@ -37,145 +37,144 @@
|
|||
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=vbhj">
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{% block mainContent %}
|
||||
<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-feature">
|
||||
{% if page['feature'] == null %}
|
||||
<div id="page-file-manager">
|
||||
<div id="page-file-wrapper">
|
||||
<div id="page-file-drop">
|
||||
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
|
||||
{% block mainContent %}
|
||||
<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-feature">
|
||||
{% if page['feature'] == null %}
|
||||
<div id="page-file-manager">
|
||||
<div id="page-file-wrapper">
|
||||
<div id="page-file-drop">
|
||||
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
|
||||
</div>
|
||||
IMAGES AND VIDEO
|
||||
<div id="page-images-list"></div>
|
||||
FILES
|
||||
<div id="page-files-list"></div>
|
||||
</div>
|
||||
IMAGES AND VIDEO
|
||||
<div id="page-images-list"></div>
|
||||
FILES
|
||||
<div id="page-files-list"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% else %}
|
||||
<div id="page-file-manager">
|
||||
<div id="page-file-wrapper">
|
||||
<div id="page-file-drop">
|
||||
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
|
||||
</div>
|
||||
IMAGES AND VIDEO
|
||||
<div id="page-images-list">
|
||||
{% if media|length > 1 %}
|
||||
{% for item in media %}
|
||||
{% if item.type == "mp4"%}
|
||||
<div id="{{loop.index0}}" class="video-item" data-source="{{ item.file }}"></div>
|
||||
{% else %}
|
||||
<div id="{{loop.index0}}" class="img-item" style="background: url({{ item.file }}) no-repeat center center / cover"></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% if media[0] != '' %}
|
||||
{% if media[0].type == "mp4"%}
|
||||
<div id="0" class="video-item" data-source="{{ media[0].file }}"></div>
|
||||
{% else %}
|
||||
<div id="0" class="img-item" style="background: url({{ media[0].file }}) no-repeat center center / cover"></div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
FILES
|
||||
<div id="page-files-list">
|
||||
{% if files|length > 1 %}
|
||||
{% for item in files %}
|
||||
{% if item.type == "mp3"%}
|
||||
<div id="{{loop.index0}}" class="audio-item" data-source="{{ item.file }}"></div>
|
||||
{% else %}
|
||||
<div id="{{loop.index0}}" class="file-item" data-source="{{ item.file }}"></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% if files[0] != '' %}
|
||||
{% if files[0].type == "mp3"%}
|
||||
<div id="0" class="audio-item" data-source="{{ files[0].file }}"></div>
|
||||
{% else %}
|
||||
<div id="0" class="file-item" data-source="{{ files[0].file }}"></div>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
<div id="post-header">
|
||||
<div id="post-header-wrapper" class="columns">
|
||||
<div id="post-title" class="column">
|
||||
<label>TITLE</label>
|
||||
<textarea id="post_title" type="text" name="post_title" class="post-edit" placeholder="TITLE">
|
||||
{{- _title -}}
|
||||
</textarea>
|
||||
|
||||
<div id="layouts">
|
||||
<label>LAYOUTS</label>
|
||||
<select id="page-templates">
|
||||
{% for view in views %}
|
||||
{% if view == page['layout'] %}
|
||||
<option value={{ view }} selected>{{ view }}</option>
|
||||
{% else %}
|
||||
<div id="page-file-manager">
|
||||
<div id="page-file-wrapper">
|
||||
<div id="page-file-drop">
|
||||
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
|
||||
</div>
|
||||
IMAGES AND VIDEO
|
||||
<div id="page-images-list">
|
||||
{% if media|length > 1 %}
|
||||
{% for item in media %}
|
||||
{% if item.type == "mp4" %}
|
||||
<div id="{{ loop.index0 }}" class="video-item" data-source="{{ item.file }}"></div>
|
||||
{% else %}
|
||||
<div id="{{ loop.index0 }}" class="img-item" style="background: url({{ item.file }}) no-repeat center center / cover"></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<option value={{ view }}>{{ view }}</option>
|
||||
{% endif %}
|
||||
{% if media[0] != '' %}
|
||||
{% if media[0].type == "mp4" %}
|
||||
<div id="0" class="video-item" data-source="{{ media[0].file }}"></div>
|
||||
{% else %}
|
||||
<div id="0" class="img-item" style="background: url({{ media[0].file }}) no-repeat center center / cover"></div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
FILES
|
||||
<div id="page-files-list">
|
||||
{% if files|length > 1 %}
|
||||
{% for item in files %}
|
||||
{% if item.type == "mp3" %}
|
||||
<div id="{{ loop.index0 }}" class="audio-item" data-source="{{ item.file }}"></div>
|
||||
{% else %}
|
||||
<div id="{{ loop.index0 }}" class="file-item" data-source="{{ item.file }}"></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% if files[0] != '' %}
|
||||
{% if files[0].type == "mp3" %}
|
||||
<div id="0" class="audio-item" data-source="{{ files[0].file }}"></div>
|
||||
{% else %}
|
||||
<div id="0" class="file-item" data-source="{{ files[0].file }}"></div>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<label>CREATED</label>
|
||||
<span id="post-date" type="text">
|
||||
{{ date }}
|
||||
</span>
|
||||
</div>
|
||||
<div id="post-meta" class="column">
|
||||
<label>TAGS</label>
|
||||
<textarea id="post_tags" type="text" name="post_tags" class="form-control" placeholder="tags [comma seperated]">
|
||||
{{- tags -}}
|
||||
</textarea>
|
||||
<label>OPTIONS</label>
|
||||
{% apply spaceless %}
|
||||
{{ include("dash/partials/options.twig") }}
|
||||
{% endapply %}
|
||||
<label>UPDATED</label>
|
||||
<span id="post-date" type="text">
|
||||
{{ updated }}
|
||||
</span>
|
||||
<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="form_token" name="token" type="hidden" value="{{ token }}">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="edit-post">
|
||||
{% apply spaceless %}
|
||||
{{ include("dash/partials/editor.twig") }}
|
||||
{% endapply %}
|
||||
<div id="edit-post-wrapper">
|
||||
<textarea id="edit" spellcheck="false">{{- content -}}</textarea>
|
||||
<pre id="highlight">
|
||||
<div id="post-header">
|
||||
<div id="post-header-wrapper" class="columns">
|
||||
<div id="post-title" class="column">
|
||||
<label>TITLE</label>
|
||||
<textarea id="post_title" type="text" name="post_title" class="post-edit" placeholder="TITLE">
|
||||
{{ - _title - }}
|
||||
</textarea>
|
||||
|
||||
<div id="layouts">
|
||||
<label>LAYOUTS</label>
|
||||
<select id="page-templates">
|
||||
{% for view in views %}
|
||||
{% if view == page['layout'] %}
|
||||
<option value={{ view }} selected>{{ view }}</option>
|
||||
{% else %}
|
||||
<option value={{ view }}>{{ view }}</option>
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<label>CREATED</label>
|
||||
<span id="post-date" type="text">
|
||||
{{ date }}
|
||||
</span>
|
||||
</div>
|
||||
<div id="post-meta" class="column">
|
||||
<label>TAGS</label>
|
||||
<textarea id="post_tags" type="text" name="post_tags" class="form-control" placeholder="tags [comma seperated]">
|
||||
{{ - tags - }}
|
||||
</textarea>
|
||||
<label>OPTIONS</label>
|
||||
{% apply spaceless %}
|
||||
{{ include("dash/partials/options.twig") }}
|
||||
{% endapply %}
|
||||
<label>UPDATED</label>
|
||||
<span id="post-date" type="text">
|
||||
{{ updated }}
|
||||
</span>
|
||||
<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="form_token" name="token" type="hidden" value="{{ token }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="edit-post">
|
||||
{% apply spaceless %}
|
||||
{{ include("dash/partials/editor.twig") }}
|
||||
{% endapply %}
|
||||
<div id="edit-post-wrapper">
|
||||
<textarea id="edit" spellcheck="false">{{ - content - }}</textarea>
|
||||
<pre id="highlight">
|
||||
<code id="highlight-content" class="language-md">
|
||||
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
<script src="/assets/scripts/Start.js?=dfdfvd" type="text/javascript"></script>
|
||||
{% endblock %}
|
||||
{% block javascripts %}
|
||||
<script src="/assets/scripts/Start.js?=dfdfvd" type="text/javascript"></script>
|
||||
{% 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-plugin-babel": "^5.3.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": {
|
||||
"@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