btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

🎨 Minor UI updates

Browse Source
This commit is contained in:
liyasthomas
2019-10-06 07:46:48 +05:30
parent 11e6a8838c
commit 9317b5b983
5 changed files with 32 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/styles.scss
View File

@@ -148,11 +148,6 @@ legend {
} }
} }
fieldset textarea,
fieldset pre code {
resize: vertical;
}
fieldset.blue legend { fieldset.blue legend {
color: #57b5f9; color: #57b5f9;
} }
@@ -209,6 +204,7 @@ pre {
user-select: text; user-select: text;
width: calc(100% - 8px); width: calc(100% - 8px);
min-height: 40px; min-height: 40px;
resize: vertical;
&:not([readonly]):hover { &:not([readonly]):hover {
background-color: var(--bg-dark-color); background-color: var(--bg-dark-color);

28
assets/css/themes.scss
View File

@@ -31,7 +31,7 @@
:root.light { :root.light {
// Dark Background color // Dark Background color
--bg-dark-color: #e8f0fe; --bg-dark-color: #f6f6f6;
// Background color // Background color
--bg-color: #ffffff; --bg-color: #ffffff;
// Auto-complete color // Auto-complete color
@@ -41,9 +41,9 @@
// Light Text color // Light Text color
--fg-light-color: rgb(150, 155, 160); --fg-light-color: rgb(150, 155, 160);
// Border color // Border color
--brd-color: #f2f2f2; --brd-color: #eeeeed;
// Error color // Error color
--err-color: invert(#303341, 1); --err-color: #f6f6f6;
// Acent color // Acent color
--ac-color: #57b5f9; --ac-color: #57b5f9;
// Active text color // Active text color
@@ -52,29 +52,29 @@
:root.black { :root.black {
// Dark Background color // Dark Background color
--bg-dark-color: rgb(23, 24, 26); --bg-dark-color: rgb(8, 8, 8);
// Background color // Background color
--bg-color: #000000; --bg-color: #000000;
// Auto-complete color // Auto-complete color
--atc-color: rgb(49, 49, 55); --atc-color: rgb(18, 18, 18);
// Text color // Text color
--fg-color: rgb(247, 248, 248); --fg-color: rgb(250, 250, 250);
// Light Text color // Light Text color
--fg-light-color: rgb(150, 155, 160); --fg-light-color: rgb(100, 100, 100);
// Border color // Border color
--brd-color: rgb(48, 47, 55); --brd-color: rgb(16, 16, 16);
// Error color // Error color
--err-color: rgb(41, 42, 45); --err-color: rgb(8, 8, 8);
// Acent color // Acent color
--ac-color: #50fa7b; --ac-color: #50fa7b;
// Active text color // Active text color
--act-color: rgb(37, 38, 40); --act-color: #000000;
} }
@media(prefers-color-scheme: light) { @media(prefers-color-scheme: light) {
:root.auto { :root.auto {
// Dark Background color // Dark Background color
--bg-dark-color: #e8f0fe; --bg-dark-color: #f6f6f6;
// Background color // Background color
--bg-color: #ffffff; --bg-color: #ffffff;
// Auto-complete color // Auto-complete color
@@ -84,13 +84,13 @@
// Light Text color // Light Text color
--fg-light-color: rgb(150, 155, 160); --fg-light-color: rgb(150, 155, 160);
// Border color // Border color
--brd-color: #f2f2f2; --brd-color: #eeeeed;
// Error color // Error color
--err-color: invert(#303341, 1); --err-color: #f6f6f6;
// Acent color // Acent color
--ac-color: #57b5f9; --ac-color: #57b5f9;
// Active text color // Active text color
--act-color: #fff; --act-color: #ffffff;
} }
} }

20
components/toggle.vue
View File

@@ -4,21 +4,22 @@
<span class="handle"></span> <span class="handle"></span>
</label> </label>
<label class="caption"> <label class="caption">
<slot /></label> <slot/>
</label>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
$useBorder: true; $useBorder: false;
$borderColor: var(--fg-color); $borderColor: var(--fg-light-color);
$activeColor: var(--ac-color); $activeColor: var(--ac-color);
$inactiveColor: var(--fg-color); $inactiveColor: var(--fg-light-color);
$inactiveHandleColor: $inactiveColor; $inactiveHandleColor: var(--bg-color);
$activeHandleColor: var(--act-color); $activeHandleColor: var(--act-color);
$width: 50px; $width: 32px;
$height: 20px; $height: 16px;
$handleSpacing: 4px; $handleSpacing: 4px;
$transition: all 0.2s ease-in-out; $transition: all 0.2s ease-in-out;
@@ -29,7 +30,6 @@
} }
label.caption { label.caption {
margin-left: 4px;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
} }
@@ -43,11 +43,11 @@
background-color: if($useBorder, transparent, $inactiveColor); background-color: if($useBorder, transparent, $inactiveColor);
vertical-align: middle; vertical-align: middle;
border-radius: 100px; border-radius: 32px;
transition: $transition; transition: $transition;
box-sizing: initial; box-sizing: initial;
padding: 0; padding: 0;
margin: 10px 5px; margin: 8px 4px;
cursor: pointer; cursor: pointer;
.handle { .handle {

7
pages/index.vue
View File

@@ -82,8 +82,11 @@
<ul> <ul>
<li> <li>
<label for="contentType">Content Type</label> <label for="contentType">Content Type</label>
<autocomplete :source="validContentTypes" :spellcheck="false" v-model="contentType">Content Type <autocomplete :source="validContentTypes" :spellcheck="false" v-model="contentType">Content Type</autocomplete>
</autocomplete> </li>
</ul>
<ul>
<li>
<span> <span>
<pw-toggle :on="rawInput" @change="rawInput = !rawInput"> <pw-toggle :on="rawInput" @change="rawInput = !rawInput">
Raw Input {{ rawInput ? "Enabled" : "Disabled" }} Raw Input {{ rawInput ? "Enabled" : "Disabled" }}

4
pages/settings.vue
View File

@@ -85,13 +85,13 @@
"class": "" "class": ""
}, },
{ {
"color": "#ebeef5", "color": "#ffffff",
"name": "Light", "name": "Light",
"vibrant": true, "vibrant": true,
"class": "light" "class": "light"
}, },
{ {
"color": "#000", "color": "#000000",
"name": "Black", "name": "Black",
"class": "black" "class": "black"
}, },