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 committed by Robbie Antenesse
parent bd58301a9a
commit 188779131e
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>
<script src="src/index.js"></script>
</head>
<body>
<body id="defaultTheme">
<header id="top">
<h1 id="title">Lexiconga</h1>

2
src/main.scss
View File

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

3
src/scss/_containers.scss
View File

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

73
src/scss/_elements.scss
View File

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

26
src/scss/_structure.scss
View File

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

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

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

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

@ -34,10 +34,7 @@
width: 32px;
height: 32px;
display: block;
background-color: #00de00;
border: $border;
border-radius: 0 3px 3px 0;
color: $white;
font-size: 30px;
line-height: 24px;
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;
}
}
}