Split all colors into a _defaultTheme.scss
This commit is contained in:
Robbie Antenesse
parent
2b4fd70b85
commit
35ccf7bf2a
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@
|
|||
@import 'scss/mobile/structure';
|
||||
@import 'scss/mobile/elements';
|
||||
|
||||
@import 'scss/themes/default';
|
||||
|
||||
html, body {
|
||||
font-family: $font;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue