Alamantus
/
Lexiconga
mirror of https://github.com/Alamantus/Lexiconga.git
1
0
Fork 0
Code Issues Releases Activity

Split all colors into a _defaultTheme.scss

This commit is contained in:
Robbie Antenesse 2019-05-30 15:47:50 -06:00
parent ca1bb63295
commit ca43c05b60
9 changed files with 259 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -7,7 +7,7 @@
<title>Lexiconga</title> <title>Lexiconga</title>
<script src="src/index.js"></script> <script src="src/index.js"></script>
</head> </head>
<body> <body id="defaultTheme">
<header id="top"> <header id="top">
<h1 id="title">Lexiconga</h1> <h1 id="title">Lexiconga</h1>

2
src/main.scss
View File

@ -9,6 +9,8 @@
@import 'scss/mobile/structure'; @import 'scss/mobile/structure';
@import 'scss/mobile/elements'; @import 'scss/mobile/elements';
@import 'scss/themes/default';
html, body { html, body {
font-family: $font; font-family: $font;

3
src/scss/_containers.scss
View File

@ -1,7 +1,6 @@
header { header {
display: block; display: block;
padding: 5px $general-padding; padding: 5px $general-padding;
border-bottom: 1px solid $mid;
margin: 0 0 5px; margin: 0 0 5px;
&#top { &#top {
@ -35,7 +34,6 @@ main {
article { article {
width: 95%; width: 95%;
margin: 10px auto; margin: 10px auto;
border: $border;
dl { dl {
padding: 0 $general-padding; padding: 0 $general-padding;
@ -46,6 +44,5 @@ main {
footer { footer {
display: block; display: block;
padding: $general-padding; padding: $general-padding;
border-top: 1px solid $mid;
margin: 5px 0 0; margin: 5px 0 0;
} }

73
src/scss/_elements.scss
View File

@ -1,8 +1,4 @@
p, span { p, span {
&.red {
color: $red;
}
&.bold { &.bold {
font-weight: bold; font-weight: bold;
} }
@ -59,42 +55,34 @@ ul {
padding-left: $general-padding; padding-left: $general-padding;
} }
.tag { // .tag {
display: inline-block; // display: inline-block;
padding: 3px 9px; // padding: 3px 9px;
border: $border; // border-radius: 3px;
border-radius: 3px; // line-height: 30px;
background-color: $light;
line-height: 30px;
&.small { // &.small {
font-size: 80%; // font-size: 80%;
line-height: 25px; // line-height: 25px;
} // }
// }
&.red { // span .tag {
background-color: $red; // @extend .tag;
color: $white;
}
}
span .tag { // border-radius: 3px 0 0 3px;
@extend .tag;
border-radius: 3px 0 0 3px; // &+.tag {
// border-left: none;
// border-radius: 0 3px 3px 0;
// }
// }
&+.tag { // .button {
border-left: none; // @extend .tag;
border-radius: 0 3px 3px 0; // cursor: pointer;
background-color: $white; // user-select: none;
} // }
}
.button {
@extend .tag;
cursor: pointer;
user-select: none;
}
.modal { .modal {
position: fixed; position: fixed;
@ -109,7 +97,6 @@ span .tag {
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background-color: #000000;
opacity: 0.5; opacity: 0.5;
} }
@ -122,8 +109,6 @@ span .tag {
max-width: 100%; max-width: 100%;
height: 600px; height: 600px;
max-height: 100%; max-height: 100%;
background-color: $white;
border: $border;
border-radius: 5px; border-radius: 5px;
.close-button { .close-button {
@ -139,25 +124,13 @@ span .tag {
} }
.tabs { .tabs {
ul {
border-bottom: $border;
}
li { li {
display: inline-block; display: inline-block;
list-style: none; list-style: none;
margin: 0 2px -1px; margin: 0 2px -1px;
padding: 10px $general-padding; padding: 10px $general-padding;
border-top: $border;
border-left: $border;
border-right: $border;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
background-color: $mid;
cursor: pointer; cursor: pointer;
&.active {
background-color: $white;
border-bottom: 1px solid $white;
}
} }
} }

26
src/scss/_structure.scss
View File

@ -42,7 +42,6 @@
left: unset; left: unset;
bottom: unset; bottom: unset;
right: unset; right: unset;
background-color: $white;
padding: ($general-padding / 2) $general-padding ($general-padding * 0.25); padding: ($general-padding / 2) $general-padding ($general-padding * 0.25);
font-size: 90%; font-size: 90%;
@ -104,8 +103,6 @@
width: 31%; width: 31%;
max-width: 320px; max-width: 320px;
padding: 10px; padding: 10px;
background-color: $light;
border: $border;
border-radius: 5px; border-radius: 5px;
max-height: 80%; max-height: 80%;
overflow-y: auto; overflow-y: auto;
@ -119,8 +116,6 @@
#detailsSection { #detailsSection {
padding: $general-padding; padding: $general-padding;
background-color: $white;
border: $border;
border-radius: 5px; border-radius: 5px;
#dictionaryName { #dictionaryName {
@ -135,8 +130,6 @@
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 10px $general-padding; padding: 10px $general-padding;
border: $border;
background-color: $light;
cursor: pointer; cursor: pointer;
&:first-child { &:first-child {
@ -148,15 +141,10 @@
&:not(:first-child) { &:not(:first-child) {
border-left: none; border-left: none;
} }
&.active {
background-color: #bababa;
}
} }
} }
#detailsPanel { #detailsPanel {
background-color: $white;
padding: $general-padding; padding: $general-padding;
max-height: 400px; max-height: 400px;
overflow-y: auto; overflow-y: auto;
@ -170,8 +158,6 @@
.entry { .entry {
background-color: $light;
.word { .word {
display: inline-block; display: inline-block;
margin: 3px 0; margin: 3px 0;
@ -202,15 +188,12 @@
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 3px; right: 3px;
background-color: $white;
border: $border;
border-radius: 5px; border-radius: 5px;
.word-option { .word-option {
padding: 10px 25px;; padding: 10px 25px;;
&:hover { &:hover {
background-color: $light;
cursor: pointer; cursor: pointer;
} }
} }
@ -345,8 +328,6 @@ $nav-font-height: 16px;
position: relative; position: relative;
display: block; display: block;
padding: $general-padding ($general-padding * 2) $general-padding $general-padding; padding: $general-padding ($general-padding * 2) $general-padding $general-padding;
background-color: $light;
border: $border;
border-radius: 5px; border-radius: 5px;
margin-bottom: 5px; margin-bottom: 5px;
@ -354,10 +335,6 @@ $nav-font-height: 16px;
margin-bottom: 0; margin-bottom: 0;
} }
&.error {
background-color: lighten($red, 0.75);
}
.close-button { .close-button {
position: absolute; position: absolute;
top: 5px; top: 5px;
@ -373,7 +350,6 @@ $nav-font-height: 16px;
right: -2px; right: -2px;
width: 20px; width: 20px;
height: 20px; height: 20px;
background-color: #455455;
opacity: 0.5; opacity: 0.5;
transform-origin: center left; transform-origin: center left;
transform: scaleX(0); transform: scaleX(0);
@ -397,12 +373,10 @@ $nav-font-height: 16px;
left: 0; left: 0;
right: 0; right: 0;
z-index: 5; z-index: 5;
background-color: $light;
text-align: center; text-align: center;
padding: $general-padding / 2; padding: $general-padding / 2;
a { a {
color: #000000;
text-decoration: none; text-decoration: none;
} }

12
src/scss/_variables.scss
View File

@ -2,12 +2,12 @@ $font: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubunt
$header-height: 60px; $header-height: 60px;
$dark: #bababa; // $dark: #bababa;
$mid: #dedede; // $mid: #dedede;
$light: #efefef; // $light: #efefef;
$white: #ffffff; // $white: #ffffff;
$red: #d42932; // $red: #d42932;
$border: 1px solid $dark; // $border: 1px solid $dark;
$general-padding: 20px; $general-padding: 20px;

28
src/scss/mobile/_elements.scss
View File

@ -1,21 +1,21 @@
@media (max-width: 750px) { @media (max-width: 750px) {
.tag { // .tag {
padding: 2px 6px; // padding: 2px 6px;
font-size: 90%; // font-size: 90%;
line-height: 120%; // line-height: 120%;
&.small { // &.small {
font-size: 70%; // font-size: 70%;
line-height: 100%; // line-height: 100%;
} // }
} // }
.button { // .button {
@extend .tag; // @extend .tag;
cursor: pointer; // cursor: pointer;
user-select: none; // user-select: none;
} // }
.tabs { .tabs {
li { li {

3
src/scss/mobile/_structure.scss
View File

@ -34,10 +34,7 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
display: block; display: block;
background-color: #00de00;
border: $border;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
color: $white;
font-size: 30px; font-size: 30px;
line-height: 24px; line-height: 24px;
font-weight: bold; font-weight: bold;

213
src/scss/themes/_default.scss Normal file
View File

@ -0,0 +1,213 @@
#defaultTheme {
$dark: #bababa;
$mid: #dedede;
$light: #efefef;
$white: #ffffff;
$red: #b42032;
$border: 1px solid $dark;
p, span {
&.red {
color: $red;
}
}
.tag {
display: inline-block;
padding: 3px 9px;
border-radius: 3px;
line-height: 30px;
border: $border;
background-color: $light;
&.small {
font-size: 80%;
line-height: 25px;
}
&.red {
background-color: $red;
color: $white;
}
}
span .tag {
@extend .tag;
border-radius: 3px 0 0 3px;
&+.tag {
background-color: $white;
border-left: none;
border-radius: 0 3px 3px 0;
}
}
.button {
@extend .tag;
cursor: pointer;
user-select: none;
}
.modal {
.modal-background {
background-color: #000000;
}
.modal-content {
background-color: $white;
border: $border;
}
}
.tabs {
ul {
border-bottom: $border;
}
li {
border-top: $border;
border-left: $border;
border-right: $border;
background-color: $mid;
&.active {
background-color: $white;
border-bottom: 1px solid $white;
}
}
}
header {
border-bottom: 1px solid $mid;
}
main {
article {
border: $border;
}
}
footer {
border-top: 1px solid $mid;
}
#top {
#title {
display: inline-block;
margin: 3px $general-padding 3px 0;
}
#openSearchModal {
cursor: pointer;
}
#searchModal {
.modal-content {
section+footer {
background-color: $white;
}
}
}
}
#wordForm {
background-color: $light;
border: $border;
}
#detailsSection {
background-color: $white;
border: $border;
nav ul {
li {
border: $border;
background-color: $light;
&.active {
background-color: #bababa;
}
}
}
#detailsPanel {
background-color: $white;
}
}
.entry {
background-color: $light;
header {
.word-option-list {
background-color: $white;
border: $border;
.word-option {
&:hover {
background-color: $light;
}
}
}
}
}
#messagingSection {
.message {
background-color: $light;
border: $border;
&.error {
background-color: lighten($red, 0.75);
}
.close-button {
&:before {
background-color: #455455;
}
}
}
}
#bottom {
background-color: $light;
a {
color: #000000;
}
}
}
@media (max-width: 750px) {
#defaultTheme {
$dark: #bababa;
$mid: #dedede;
$light: #efefef;
$white: #ffffff;
$red: #b42032;
$border: 1px solid $dark;
#mobileWordFormShow {
background-color: #00de00;
border: $border;
color: $white;
}
.tag {
padding: 2px 6px;
font-size: 90%;
line-height: 120%;
&.small {
font-size: 70%;
line-height: 100%;
}
}
.button {
@extend .tag;
cursor: pointer;
user-select: none;
}
}
}