projects/fipamo
1
0
Fork 0
Code Issues 24 Pull requests Projects 1 Releases 22 Packages Wiki Activity

updated styles for dash index and settings pages

Browse source
This commit is contained in:
Ro 2019-02-07 19:18:48 -05:00
parent fc1e44ad73
commit fc59ab90f6
9 changed files with 209 additions and 334 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

175
themes/dash/assets/css/dash.css
View file

@ -1811,16 +1811,26 @@ svg.icons {
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a label { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a label {
font-size: 0.7em; font-size: 0.7em;
font-weight: 500; font-weight: 700;
color: #161d23; color: #161d23;
padding: 5px; padding: 5px;
vertical-align: top; vertical-align: top;
display: block; display: inline-block;
width: 60%;
}
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a span {
float: right;
vertical-align: top;
display: inline-block;
font-family: "Apercu-mono";
font-size: 0.5em;
padding: 7px;
color: #161d23;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a div { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a div {
width: 100%; width: 100%;
background-size: cover; background-size: cover;
border-radius: 3px; border-radius: 3px 3px 0 0;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(2) { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(2) {
width: 100%; width: 100%;
@ -1838,7 +1848,7 @@ svg.icons {
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4), #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4),
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) {
width: 50%; width: 50.6%;
} }
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4) div, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(4) div,
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) div { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) div {
@ -1847,83 +1857,6 @@ svg.icons {
#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) { #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a:nth-child(5) {
margin: -305px 0 0 49.3%; margin: -305px 0 0 49.3%;
} }
.folio-project-form {
display: inline-block;
width: 56%;
}
.folio-project-form input[type=email],
.folio-project-form input[type=password],
.folio-project-form input[type=text],
.folio-project-form select {
width: 400px;
}
.folio-project-form select {
margin: 10px 0 0 0;
}
.folio-project-form textarea {
width: 400px;
height: 133px;
}
.folio-hub {
padding: 20px;
}
.folio-hub span {
margin: 10px 10px 0 0;
}
.folio-hub .btn-add-project span {
font: 20px $bodyType;
margin: -35px 0 0 40px;
display: block;
height: 50px;
}
.folio-hub .project-list {
width: 95%;
}
.folio-hub .project-list span.drag-handle {
padding: 10px;
color: #f5ab35;
cursor: pointer;
}
.folio-hub .project-list .project-item {
width: 100%;
display: inline-block;
background: #28343e;
padding: 5px;
margin-bottom: 10px;
border-radius: 5px;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.folio-hub .project-list .project-item:hover {
background: #3b4e5e;
}
.upload-list {
color: #c1cdd7;
display: inline-block;
vertical-align: top;
width: 260px;
height: 330px;
margin: 45px 0 0;
}
.thumb {
height: 50px;
overflow: hidden;
border-radius: 3px;
margin: 10px 5px 0 0;
}
.upload-drop {
width: 400px;
height: 70px;
background: $form-background;
color: #c1cdd7;
text-align: center;
padding: 40px 0 0;
font-size: 12px;
text-transform: uppercase;
border-radius: 3px;
}
/** /**
------------------------------- -------------------------------
-- Settings -- Settings
@ -1965,105 +1898,95 @@ svg.icons {
} }
#settings-index #settings-index-wrapper #member-settings, #settings-index #settings-index-wrapper #member-settings,
#settings-index #settings-index-wrapper #site-settings, #settings-index #settings-index-wrapper #site-settings,
#settings-index #settings-index-wrapper #theme-settings, #settings-index #settings-index-wrapper #option-settings {
#settings-index #settings-index-wrapper #mail-settings { background: #374857;
padding: 5px;
border-radius: 5px 0 5px 0;
width: 100%; width: 100%;
margin-bottom: 40px; margin: 20px auto;
} }
#settings-index #settings-index-wrapper #member-settings label, #settings-index #settings-index-wrapper #member-settings label,
#settings-index #settings-index-wrapper #site-settings label, #settings-index #settings-index-wrapper #site-settings label,
#settings-index #settings-index-wrapper #theme-settings label, #settings-index #settings-index-wrapper #option-settings label {
#settings-index #settings-index-wrapper #mail-settings label {
font-family: 'Apercu-Mono'; font-family: 'Apercu-Mono';
color: #f2f1ef; color: #f2f1ef;
} }
#settings-index #settings-index-wrapper #member-settings input, #settings-index #settings-index-wrapper #member-settings input,
#settings-index #settings-index-wrapper #site-settings input, #settings-index #settings-index-wrapper #site-settings input,
#settings-index #settings-index-wrapper #theme-settings input, #settings-index #settings-index-wrapper #option-settings input {
#settings-index #settings-index-wrapper #mail-settings input { width: 95%;
width: 44%; margin: 0 5px 10px 0;
margin-right: 5px;
height: 30px; height: 30px;
padding: 10px; padding: 10px;
} }
#settings-index #settings-index-wrapper #member-settings #member-avatar-drop, #settings-index #settings-index-wrapper #member-settings #member-avatar-drop,
#settings-index #settings-index-wrapper #site-settings #member-avatar-drop, #settings-index #settings-index-wrapper #site-settings #member-avatar-drop,
#settings-index #settings-index-wrapper #theme-settings #member-avatar-drop, #settings-index #settings-index-wrapper #option-settings #member-avatar-drop {
#settings-index #settings-index-wrapper #mail-settings #member-avatar-drop {
display: inline-block; display: inline-block;
margin: 0 0 10px 0;
} }
#settings-index #settings-index-wrapper #member-settings #member-avatar-drop img, #settings-index #settings-index-wrapper #member-settings #member-avatar-drop img,
#settings-index #settings-index-wrapper #site-settings #member-avatar-drop img, #settings-index #settings-index-wrapper #site-settings #member-avatar-drop img,
#settings-index #settings-index-wrapper #theme-settings #member-avatar-drop img, #settings-index #settings-index-wrapper #option-settings #member-avatar-drop img {
#settings-index #settings-index-wrapper #mail-settings #member-avatar-drop img { width: 100%;
width: 110px; border-radius: 5px;
border-radius: 10px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
} }
#settings-index #settings-index-wrapper #member-settings #member-avatar-drop input, #settings-index #settings-index-wrapper #member-settings #member-avatar-drop input,
#settings-index #settings-index-wrapper #site-settings #member-avatar-drop input, #settings-index #settings-index-wrapper #site-settings #member-avatar-drop input,
#settings-index #settings-index-wrapper #theme-settings #member-avatar-drop input, #settings-index #settings-index-wrapper #option-settings #member-avatar-drop input {
#settings-index #settings-index-wrapper #mail-settings #member-avatar-drop input {
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
#settings-index #settings-index-wrapper #member-settings #member-info, #settings-index #settings-index-wrapper #member-settings #member-info,
#settings-index #settings-index-wrapper #site-settings #member-info, #settings-index #settings-index-wrapper #site-settings #member-info,
#settings-index #settings-index-wrapper #theme-settings #member-info, #settings-index #settings-index-wrapper #option-settings #member-info {
#settings-index #settings-index-wrapper #mail-settings #member-info {
vertical-align: top; vertical-align: top;
display: inline-block; display: inline-block;
margin: 0 0 0 10px; width: 100%;
width: 79%;
} }
#settings-index #settings-index-wrapper #member-settings #member-info input, #settings-index #settings-index-wrapper #member-settings #member-info input,
#settings-index #settings-index-wrapper #site-settings #member-info input, #settings-index #settings-index-wrapper #site-settings #member-info input,
#settings-index #settings-index-wrapper #theme-settings #member-info input, #settings-index #settings-index-wrapper #option-settings #member-info input {
#settings-index #settings-index-wrapper #mail-settings #member-info input { width: 95%;
width: 94%;
margin: 0 5px 10px 0; margin: 0 5px 10px 0;
} }
#settings-index #settings-index-wrapper #member-settings textarea, #settings-index #settings-index-wrapper #member-settings textarea,
#settings-index #settings-index-wrapper #site-settings textarea, #settings-index #settings-index-wrapper #site-settings textarea,
#settings-index #settings-index-wrapper #theme-settings textarea, #settings-index #settings-index-wrapper #option-settings textarea {
#settings-index #settings-index-wrapper #mail-settings textarea {
background: #161d23; background: #161d23;
width: 91.5%; width: 95%;
height: 100px; height: 155px;
color: #b2cce5; color: #b2cce5;
margin-top: 10px;
padding: 10px; padding: 10px;
} }
#settings-index #settings-index-wrapper #theme-settings a[data-enabled='false'] { #settings-index #settings-index-wrapper #option-settings #theme-settings a {
width: 310px; width: 95%;
margin: 0 5px 5px 0; margin: 0 5px 5px 0;
height: 25px; height: 25px;
padding: 10px; padding: 10px;
display: inline-block; display: inline-block;
}
#settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled='false'] {
background: #161d23; background: #161d23;
color: #b2cce5; color: #b2cce5;
border-radius: 3px; border-radius: 3px;
} }
#settings-index #settings-index-wrapper #theme-settings a[data-enabled='true'] { #settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled='true'] {
width: 310px;
margin: 0 5px 5px 0;
height: 25px;
padding: 10px;
display: inline-block;
background: #b2cce5; background: #b2cce5;
color: #374857; color: #374857;
border-radius: 3px; border-radius: 3px;
} }
#settings-index #settings-index-wrapper #theme-settings a[data-enabled='true'] svg { #settings-index #settings-index-wrapper #option-settings #theme-settings a[data-enabled='true'] svg {
fill: #374857; fill: #374857;
display: inline-block; display: inline-block;
float: right; float: right;
} }
#settings-index #settings-index-wrapper #mail-settings { #settings-index #settings-index-wrapper #option-settings #mail-settings {
height: 100px; min-height: 240px;
} }
#settings-index #settings-index-wrapper #mail-settings a.mail-option { #settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option {
float: right; float: right;
font-family: 'Apercu-Mono'; font-family: 'Apercu-Mono';
font-size: 0.9em; font-size: 0.9em;
@ -2071,17 +1994,17 @@ svg.icons {
text-decoration: none; text-decoration: none;
margin: 0 0 0 5px; margin: 0 0 0 5px;
} }
#settings-index #settings-index-wrapper #mail-settings a.mail-option[data-enabled='true'] { #settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option[data-enabled='true'] {
color: #fc6399; color: #fc6399;
} }
#settings-index #settings-index-wrapper #mail-settings a.mail-option[data-enabled='false'] { #settings-index #settings-index-wrapper #option-settings #mail-settings a.mail-option[data-enabled='false'] {
color: #f2f1ef; color: #f2f1ef;
} }
#settings-index #settings-index-wrapper #mail-settings input { #settings-index #settings-index-wrapper #option-settings #mail-settings input {
margin: 0 5px 5px 0; margin: 0 5px 5px 0;
vertical-align: top; vertical-align: top;
} }
#settings-index #settings-index-wrapper #mail-settings div[data-enabled='false'] { #settings-index #settings-index-wrapper #option-settings #mail-settings div[data-enabled='false'] {
display: none; display: none;
visibility: hidden; visibility: hidden;
} }

2
themes/dash/assets/css/dash.css.map
View file

File diff suppressed because one or more lines are too long

2
themes/dash/assets/js/dash.min.js vendored
View file

@ -9073,7 +9073,7 @@ var parent = module.bundle.parent;
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') { if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
var hostname = "" || location.hostname; var hostname = "" || location.hostname;
var protocol = location.protocol === 'https:' ? 'wss' : 'ws'; var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
var ws = new WebSocket(protocol + '://' + hostname + ':' + "60240" + '/'); var ws = new WebSocket(protocol + '://' + hostname + ':' + "55155" + '/');
ws.onmessage = function (event) { ws.onmessage = function (event) {
var data = JSON.parse(event.data); var data = JSON.parse(event.data);

2
themes/dash/assets/js/dash.min.map
View file

File diff suppressed because one or more lines are too long

3
themes/dash/partials/front.pug
View file

@ -5,6 +5,7 @@
- var cap = 4; // number of respect posts to display - var cap = 4; // number of respect posts to display
- for ( index; index < cap; index++) - for ( index; index < cap; index++)
a(href="/@/dashboard/posts/edit/"+items[index].post.uuid id=items[index].post.uuid) a(href="/@/dashboard/posts/edit/"+items[index].post.uuid id=items[index].post.uuid)
div(style="background:url("+items[index].post.feature.substr(8)+") no-repeat center center") div(style="background:url("+items[index].post.feature.substr(8)+") no-repeat center center / cover")
label= items[index].post.title label= items[index].post.title
span= items[index].post.created

24
themes/dash/settings.pug
View file

@ -7,18 +7,18 @@ block main-content
#settings-index #settings-index
#settings-index-wrapper #settings-index-wrapper
#member-settings #member-settings.columns
label YOU #member-settings-1.column
br label AVATAR
#member-avatar-drop #member-avatar-drop
img#avatar(src=member.avi, for="avatar-upload") img#avatar(src=member.avi, for="avatar-upload")
button#save-toggle SAVE SETTINGS
input(id="avatar-upload" type="file" name="avatar-upload") input(id="avatar-upload" type="file" name="avatar-upload")
#member-settings-2.column
label INFO
#member-info #member-info
input(type='text', name='handle' id='settings-handle', placeholder='handle', value=member.handle, autofocus) input(type='text', name='handle' id='settings-handle', placeholder='handle', value=member.handle, autofocus)
input(type='text', name='email' id='settings-email', placeholder='email', value=member.email, autofocus) input(type='text', name='email' id='settings-email', placeholder='email', value=member.email, autofocus)
#site-settings
label SITE INFO
br
input(type='text', name='base-url' id='settings-url', placeholder='url', value=settings.url, autofocus) input(type='text', name='base-url' id='settings-url', placeholder='url', value=settings.url, autofocus)
input(type='text', name='base-title' id='settings-title', placeholder='site title', value=settings.title, autofocus) input(type='text', name='base-title' id='settings-title', placeholder='site title', value=settings.title, autofocus)
textarea(id="settings-desc" type='text', name='settings_desc' class='settings-dec', placeholder='description stuff', autofocus) textarea(id="settings-desc" type='text', name='settings_desc' class='settings-dec', placeholder='description stuff', autofocus)
@ -28,7 +28,8 @@ block main-content
| SITE IS PRIVATE | SITE IS PRIVATE
-else -else
| SITE IS PUBLIC | SITE IS PUBLIC
#theme-settings #option-settings.columns
#theme-settings.column
label THEMES label THEMES
br br
- var index = 0; - var index = 0;
@ -41,8 +42,8 @@ block main-content
-else -else
a.theme-select(href="#" id=themes[index].theme.name, data-enabled="false") a.theme-select(href="#" id=themes[index].theme.name, data-enabled="false")
= themes[index].theme["display-name"] = themes[index].theme["display-name"]
#mail-settings #mail-settings.column
label MAIL SETTINGS label E-MAIL
-if(settings.email.active == "option-none") -if(settings.email.active == "option-none")
a.mail-option#option-none(href="#", data-enabled='true') NONE a.mail-option#option-none(href="#", data-enabled='true') NONE
-else -else
@ -56,8 +57,7 @@ block main-content
-else -else
a.mail-option#option-smtp(href="#", data-enabled='false') SMTP a.mail-option#option-smtp(href="#", data-enabled='false') SMTP
include partials/mailforms include partials/mailforms
button#send-mail TEST MAIL
br
button#send-mail SEND MAIL
button#save-toggle SAVE SETTINGS

34
themes/dash/src/com/controllers/SettingsIndex.js
View file

@ -80,18 +80,19 @@ export default class SettingsIndex
{ {
e.target.setAttribute('data-private', 'true'); e.target.setAttribute('data-private', 'true');
e.target.innerHTML = "SITE IS PUBLIC" e.target.innerHTML = "SITE IS PUBLIC"
}else{ }
else
{
e.target.setAttribute('data-private', 'false'); e.target.setAttribute('data-private', 'false');
e.target.innerHTML = "SITE IS PRIVATE" e.target.innerHTML = "SITE IS PRIVATE"
} }
} }
handleMailer() handleMailer()
{ {
this.mailer.sendMail(); this.mailer.sendMail();
} }
handleThemes(e)
handleThemes(e){ {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
let themes = document.querySelectorAll('.theme-select'); let themes = document.querySelectorAll('.theme-select');
@ -100,7 +101,6 @@ export default class SettingsIndex
(e.target.id == themes[i].id) ? themes[i].setAttribute('data-enabled', 'true'): themes[i].setAttribute('data-enabled', 'false') (e.target.id == themes[i].id) ? themes[i].setAttribute('data-enabled', 'true'): themes[i].setAttribute('data-enabled', 'false')
} }
} }
handleMailOptions(e) handleMailOptions(e)
{ {
e.preventDefault(); e.preventDefault();
@ -110,24 +110,31 @@ export default class SettingsIndex
let mail = document.querySelectorAll('.mail-option'); let mail = document.querySelectorAll('.mail-option');
for (var i = 0, length = mail.length; i < length; i++) for (var i = 0, length = mail.length; i < length; i++)
{ {
if(e.target.id == mail[i].id){ if (e.target.id == mail[i].id)
{
mail[i].setAttribute('data-enabled', 'true') mail[i].setAttribute('data-enabled', 'true')
if (e.target.id == "option-smtp"){ if (e.target.id == "option-smtp")
{
smtp.setAttribute('data-enabled', 'true') smtp.setAttribute('data-enabled', 'true')
mailgun.setAttribute('data-enabled', 'false') mailgun.setAttribute('data-enabled', 'false')
}else if(e.target.id == "option-none"){ }
else if (e.target.id == "option-none")
{
smtp.setAttribute('data-enabled', 'false') smtp.setAttribute('data-enabled', 'false')
mailgun.setAttribute('data-enabled', 'false') mailgun.setAttribute('data-enabled', 'false')
}else{ }
else
{
smtp.setAttribute('data-enabled', 'false') smtp.setAttribute('data-enabled', 'false')
mailgun.setAttribute('data-enabled', 'true') mailgun.setAttribute('data-enabled', 'true')
} }
}else{ }
else
{
mail[i].setAttribute('data-enabled', 'false') mail[i].setAttribute('data-enabled', 'false')
} }
} }
} }
handleImageUpload(type, files) handleImageUpload(type, files)
{ {
let url = "" let url = ""
@ -151,10 +158,11 @@ export default class SettingsIndex
if (r.message == DataEvent.AVATAR_UPLOADED) if (r.message == DataEvent.AVATAR_UPLOADED)
{ {
document.getElementById('avatar').src = r.url; document.getElementById('avatar').src = r.url;
}else{ }
else
{
document.getElementById('background').src = r.url; document.getElementById('background').src = r.url;
} }
}).catch((err) => }).catch((err) =>
{ {
//console.log(err) //console.log(err)

88
themes/dash/src/styles/main/_index.styl
View file

@ -84,16 +84,25 @@
label label
font-size: .7em font-size: .7em
font-weight: 500 font-weight: 700
color $primary - 60% color $primary - 60%
padding 5px padding 5px
vertical-align: top vertical-align: top
display: block display: inline-block
width: 60%
span
float: right
vertical-align: top
display: inline-block
font-family: "Apercu-mono"
font-size: .5em
padding: 7px
color $primary - 60%
div div
width 100% width 100%
background-size cover background-size cover
border-radius 3px border-radius 3px 3px 0 0
a:nth-child(2) a:nth-child(2)
width 100% width 100%
@ -109,80 +118,9 @@
a:nth-child(4), a:nth-child(5) a:nth-child(4), a:nth-child(5)
width 50% width 50.6%
div div
height 275px height 275px
a:nth-child(5) a:nth-child(5)
margin -305px 0 0 49.3% margin -305px 0 0 49.3%
.folio-project-form
display inline-block
width 56%
input[type=email], input[type=password], input[type=text], select
width 400px
select
margin 10px 0 0 0
textarea
width 400px
height 133px
.folio-hub
padding 20px
span
margin 10px 10px 0 0
.btn-add-project span
font 20px $bodyType
margin -35px 0 0 40px
display block
height 50px
.project-list
width 95%
span.drag-handle
padding 10px
color $tertiary
cursor pointer
.project-item
width 100%
display inline-block
background lightness($primary, 20%)
padding 5px
margin-bottom 10px
border-radius 5px
object-transitions(0.3s)
.project-item:hover
background lightness($primary, 30%)
.upload-list
color lightness($primary, 80%)
display inline-block
vertical-align top
width 260px
height 330px
margin 45px 0 0
.thumb
height 50px
overflow hidden
border-radius 3px
margin 10px 5px 0 0
.upload-drop
width 400px
height 70px
background $form-background
color lightness($primary, 80%)
text-align center
padding 40px 0 0
font-size 12px
text-transform uppercase
border-radius 3px

57
themes/dash/src/styles/main/_settings.styl
View file

@ -1,17 +1,19 @@
#site-background #site-background
margin 0 0 10px 0 margin 0 0 10px 0
img img
width 100% width 100%
// border 5px solid $white // border 5px solid $white
border-radius 0 border-radius 0
overflow hidden overflow hidden
cursor pointer cursor pointer
label label
position: absolute position absolute
color $white color $white
margin 5px margin 5px
background $primary - 60% background $primary - 60%
padding: 5px padding 5px
border-radius 3px border-radius 3px
input input
@ -31,27 +33,32 @@
width 320px width 320px
height 45px height 45px
#member-settings, #site-settings, #theme-settings, #mail-settings #member-settings, #site-settings, #option-settings
background $primary
padding 5px
border-radius 5px 0 5px 0
label label
font-family 'Apercu-Mono' font-family 'Apercu-Mono'
color $white color $white
input input
width 44% width 95%
margin-right 5px margin 0 5px 10px 0
height 30px height 30px
padding 10px padding 10px
width 100% width 100%
margin-bottom 40px margin 20px auto
#member-avatar-drop #member-avatar-drop
display inline-block display inline-block
margin 0 0 10px 0
img img
width 110px width 100%
// border 5px solid $white // border 5px solid $white
border-radius 10px border-radius 5px
overflow hidden overflow hidden
cursor pointer cursor pointer
@ -62,38 +69,34 @@
#member-info #member-info
vertical-align top vertical-align top
display inline-block display inline-block
margin 0 0 0 10px width 100%
width 79%
input input
width 94% width 95%
margin 0 5px 10px 0 margin 0 5px 10px 0
textarea textarea
background $primary - 60% background $primary - 60%
width 91.5% width 95%
height 100px height 155px
color $secondary color $secondary
margin-top 10px
padding 10px padding 10px
#option-settings
#theme-settings #theme-settings
a[data-enabled='false'] a
width 310px width 95%
margin 0 5px 5px 0 margin 0 5px 5px 0
height 25px height 25px
padding 10px padding 10px
display inline-block display inline-block
a[data-enabled='false']
background $primary - 60% background $primary - 60%
color $secondary color $secondary
border-radius 3px border-radius 3px
a[data-enabled='true'] a[data-enabled='true']
width 310px
margin 0 5px 5px 0
height 25px
padding 10px
display inline-block
background $secondary background $secondary
color $primary color $primary
border-radius 3px border-radius 3px
@ -102,25 +105,27 @@
fill $primary fill $primary
display inline-block display inline-block
float right float right
#mail-settings #mail-settings
height 100px min-height: 240px
a.mail-option a.mail-option
float right float right
font-family 'Apercu-Mono' font-family 'Apercu-Mono'
font-size .9em font-size 0.9em
border-radius 3px border-radius 3px
text-decoration: none text-decoration none
margin 0 0 0 5px margin 0 0 0 5px
// padding: 1px // padding: 1px
a.mail-option[data-enabled='true'] a.mail-option[data-enabled='true']
color $highlight color $highlight
a.mail-option[data-enabled='false'] a.mail-option[data-enabled='false']
color $white color $white
input input
// width 94% // width 94%
margin 0 5px 5px 0 margin 0 5px 5px 0
vertical-align: top vertical-align top
div[data-enabled='false'] div[data-enabled='false']
display none display none