mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-07 22:30:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert from Sass to Less

Browse Source
This commit is contained in:
Gregory Schier 2016-08-29 10:58:59 -07:00
parent 3cf464d059
commit 8aa0005863
37 changed files with 463 additions and 462 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/RenderedQueryString.js
View File

@ -43,7 +43,7 @@ class RenderedQueryString extends Component {
render () {
if (this.state.string) {
return <span className="selectable">{this.state.string}</span>
return <span className="selectable force-wrap">{this.state.string}</span>
} else {
return <span className="super-faint">{this.props.placeholder || ''}</span>
}

2
app/components/base/Editor.js
View File

@ -51,7 +51,7 @@ import 'codemirror/addon/lint/json-lint'
import 'codemirror/addon/lint/lint.css'
// App styles
import '../../css/components/editor.scss';
import '../../css/components/editor.less';
const BASE_CODEMIRROR_OPTIONS = {
lineNumbers: true,

6
app/css/components/changelog.scss → app/css/components/changelog.less
View File

@ -4,16 +4,16 @@
.changelog {
h2 {
font-size: $font-size-xl;
font-size: @font-size-xl;
}
h3 {
font-size: $font-size-xl;
font-size: @font-size-xl;
}
ul {
list-style: disc;
padding-left: $padding-lg;
padding-left: @padding-lg;
margin-bottom: 1.5em;
}
}

12
app/css/components/cookieeditor.scss → app/css/components/cookieeditor.less
View File

@ -8,24 +8,24 @@
table {
input:not([type="checkbox"]) {
padding: $padding-xs $padding-xxs;
padding: @padding-xs @padding-xxs;
width: 100%;
}
.btn {
margin: 0;
padding: 0 $padding-sm;
height: $line-height-xs;
padding: 0 @padding-sm;
height: @line-height-xs;
}
}
.cookie-editor__filter {
margin: $padding-md $padding-md $padding-sm;
padding-bottom: $padding-md;
margin: @padding-md @padding-md @padding-sm;
padding-bottom: @padding-md;
}
.cookie-editor__editor {
padding: 0 $padding-md $padding-md $padding-md;
padding: 0 @padding-md @padding-md @padding-md;
overflow-y: auto;
position: relative;
}

44
app/css/components/dropdown.scss → app/css/components/dropdown.less
View File

@ -7,7 +7,7 @@
display: inline-block;
&.dropdown--outlined ul {
border: 1px solid $hl-md;
border: 1px solid @hl-md;
}
&:focus {
@ -32,38 +32,38 @@
top: 100%;
left: 0;
z-index: 1000;
min-width: $dropdown-min-width;
box-shadow: 0 0 1rem 0 $hl-md;
min-width: @dropdown-min-width;
box-shadow: 0 0 1rem 0 @hl-md;
// Separate it from the button a bit
margin-top: $padding-xxs;
margin-bottom: $padding-xxs;
margin-top: @padding-xxs;
margin-bottom: @padding-xxs;
padding-top: $radius-md;
padding-bottom: $radius-md;
padding-top: @radius-md;
padding-bottom: @radius-md;
border-radius: $radius-md;
background: $bg-super-light;
border-radius: @radius-md;
background: @bg-super-light;
overflow: hidden;
li {
& > button {
font-size: $font-size-md;
font-size: @font-size-md;
text-align: left;
padding: $padding-sm $padding-md $padding-sm $padding-sm;
padding: @padding-sm @padding-md @padding-sm @padding-sm;
width: 100%;
display: block;
color: $font-super-light-bg !important;
color: @font-super-light-bg !important;
white-space: nowrap;
&:hover,
&:focus {
background: $hl-sm;
background: @hl-sm;
}
&:active {
background: $hl-md;
background: @hl-md;
}
i.fa {
@ -73,7 +73,7 @@
}
.dropdown__hint {
color: $hl-xxl;
color: @hl-xxl;
float: right;
}
}
@ -86,26 +86,26 @@
}
li.dropdown__divider {
border-bottom: 1px solid $hl-lg;
border-bottom: 1px solid @hl-lg;
overflow: visible !important;
height: 0;
margin: $padding-md $padding-md $padding-md $padding-md;
min-width: $dropdown-min-width;
margin: @padding-md @padding-md @padding-md @padding-md;
min-width: @dropdown-min-width;
.dropdown__divider__label {
position: relative;
left: -$padding-sm / 2;
left: -@padding-sm / 2;
top: -0.7rem;
// HACK: Fine adjustment
color: $hl;
color: @hl;
padding-right: 1em;
background: #fff;
font-size: $font-size-xs;
font-size: @font-size-xs;
text-transform: uppercase;
}
&.dropdown__divider--no-name {
margin: $padding-xs 0;
margin: @padding-xs 0;
.dropdown__divider__label {
display: none;

0
app/css/components/editable.scss → app/css/components/editable.less
View File

48
app/css/components/editor.scss → app/css/components/editor.less
View File

@ -11,11 +11,11 @@
height: 100% !important;
width: 100%;
box-sizing: border-box;
padding-top: $padding-sm;
padding-top: @padding-sm;
}
.CodeMirror * {
font-family: $font-monospace;
font-family: @font-monospace;
}
.CodeMirror,
@ -29,7 +29,7 @@
}
.CodeMirror-linenumber, .CodeMirror-guttermarker-subtle {
color: $hl-xl !important;
color: @hl-xl !important;
}
.CodeMirror-scroll {
@ -42,7 +42,7 @@
}
.CodeMirror-placeholder {
color: $hl-xxl;
color: @hl-xxl;
}
.CodeMirror-lint-marker-error {
@ -53,7 +53,7 @@
text-align: center;
&::after {
color: darken($danger, 10);
color: darken(@danger, 10);
text-align: center;
width: 100%;
font-size: 0.7em; // because the circle is so large
@ -69,11 +69,11 @@
// This has to be outside because it's moved to the body element
.CodeMirror-lint-tooltip {
background-color: $bg-light;
color: $font-light-bg;
background-color: @bg-light;
color: @font-light-bg;
border-radius: 0;
font-size: $font-size-md;
padding: $padding-xs $padding-sm;
font-size: @font-size-md;
padding: @padding-xs @padding-sm;
z-index: 99999;
.CodeMirror-lint-message-error {
@ -93,7 +93,7 @@
.cm-s-default div.CodeMirror-selected {
//background: #49483E;
background: $hl-xl;
background: @hl-xl;
}
.cm-s-default .CodeMirror-line::selection, .cm-s-default .CodeMirror-line > span::selection, .cm-s-default .CodeMirror-line > span > span::selection {
@ -130,15 +130,15 @@
}
.cm-s-default span.cm-atom {
color: lighten($surprise, 5);
color: lighten(@surprise, 5);
}
.cm-s-default span.cm-number {
color: lighten($surprise, 5);
color: lighten(@surprise, 5);
}
.cm-s-default span.cm-property, .cm-s-default span.cm-attribute {
color: lighten($success, 5);
color: lighten(@success, 5);
}
.cm-s-default span.cm-keyword {
@ -150,7 +150,7 @@
}
.cm-s-default span.cm-string {
color: lighten($notice, 5);
color: lighten(@notice, 5);
}
.cm-s-default span.cm-variable {
@ -174,24 +174,24 @@
}
.cm-s-default span.cm-tag {
color: darken($danger, 3);
color: darken(@danger, 3);
}
.cm-s-default span.cm-header {
color: lighten($surprise, 5);
color: lighten(@surprise, 5);
}
.cm-s-default span.cm-link {
color: lighten($surprise, 5);
color: lighten(@surprise, 5);
}
.cm-s-default span.cm-error {
background: $danger;
background: @danger;
color: #f8f8f0;
}
.cm-s-default .CodeMirror-activeline-background {
background: $hl-md;
background: @hl-md;
}
.cm-s-default .CodeMirror-matchingbracket {
@ -202,24 +202,24 @@
.editor--light-theme {
.cm-s-default span {
color: $font-light-bg;
color: @font-light-bg;
}
.cm-s-default span.cm-string {
color: saturate(darken($notice, 30), 100);
color: saturate(darken(@notice, 30), 100);
}
.cm-s-default span.cm-property, .cm-s-default span.cm-attribute {
color: saturate(darken($success, 15), 100);
color: saturate(darken(@success, 15), 100);
}
.cm-s-default span.cm-atom,
.cm-s-default span.cm-number {
color: saturate(darken($surprise, 30), 100);
color: saturate(darken(@surprise, 30), 100);
}
.cm-s-default .CodeMirror-activeline-background {
background: $hl-md;
background: @hl-md;
}
.cm-s-default .CodeMirror-matchingbracket {

38
app/css/components/envmodal.scss → app/css/components/envmodal.less
View File

@ -9,8 +9,8 @@
width: 100%;
.env-modal__sidebar {
border-right: 1px solid $hl-md;
padding: $padding-md 0;
border-right: 1px solid @hl-md;
padding: @padding-md 0;
box-sizing: border-box;
overflow-y: auto;
height: 100%;
@ -19,7 +19,7 @@
display: flex;
flex-direction: row;
align-items: center;
padding: $padding-sm $padding-sm 0;
padding: @padding-sm @padding-sm 0;
& > * {
height: 100%;
@ -28,16 +28,16 @@
& > *:first-child {
width: 100%;
padding: $padding-sm 0 $padding-sm $padding-sm;
padding: @padding-sm 0 @padding-sm @padding-sm;
}
button {
color: $hl-xxl;
color: @hl-xxl;
height: 100%;
padding: $padding-sm;
padding: @padding-sm;
&:hover {
color: $font-light-bg;
color: @font-light-bg;
}
}
}
@ -46,11 +46,11 @@
.env-modal__sidebar-item {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: $line-height-xs;
color: $hl-xxl;
grid-template-rows: @line-height-xs;
color: @hl-xxl;
& > button {
padding: 0 $padding-md 0 $padding-md;
padding: 0 @padding-md 0 @padding-md;
width: 100%;
&:first-child {
@ -62,27 +62,27 @@
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding-right: $padding-xs;
padding-right: @padding-xs;
box-sizing: border-box;
width: 100%;
line-height: $line-height-xs;
line-height: @line-height-xs;
}
}
&.env-modal__sidebar-item--active,
& > button:focus {
color: $font-light-bg;
background-color: $hl-xs;
color: @font-light-bg;
background-color: @hl-xs;
}
&:hover > button {
background-color: $hl-xxs;
background-color: @hl-xxs;
}
}
.env-modal__sidebar-item {
& > button {
padding-left: $padding-lg;
padding-left: @padding-lg;
}
}
}
@ -106,13 +106,13 @@
display: flex;
flex-direction: row;
align-items: center;
padding: $padding-sm $padding-md $padding-sm;
height: $line-height-sm;
padding: @padding-sm @padding-md @padding-sm;
height: @line-height-sm;
}
h1, h1 > * {
padding: 0;
font-size: $font-size-xl;
font-size: @font-size-xl;
width: 100%;
}
}

36
app/css/components/forms.scss → app/css/components/forms.less
View File

@ -4,7 +4,7 @@
.form-control {
outline: none;
border: 0;
height: $line-height-md;
height: @line-height-md;
textarea,
input {
@ -21,18 +21,18 @@
&.form-control--outlined,
&.form-control--underlined {
height: auto;
margin: $padding-sm;
margin: @padding-sm;
textarea,
input {
border: 1px solid $hl-md;
padding: $padding-sm;
border-radius: $radius-md;
border: 1px solid @hl-md;
padding: @padding-sm;
border-radius: @radius-md;
}
textarea,
input:focus {
border-color: $hl-xl;
border-color: @hl-xl;
}
}
@ -56,23 +56,23 @@ label > .form-control,
.btn {
text-align: center;
padding: 0 ($padding-md * 1.5);
height: $line-height-md;
padding: 0 (@padding-md * 1.5);
height: @line-height-md;
border: 1px solid transparent;
&.btn--compact {
padding: 0 $padding-md;
height: $line-height-sm;
padding: 0 @padding-md;
height: @line-height-sm;
}
&.btn--super-compact {
padding: 0 $padding-md;
height: $line-height-xs;
padding: 0 @padding-md;
height: @line-height-xs;
}
&.btn--outlined {
border: 1px solid $hl-lg;
border-radius: $radius-md;
border: 1px solid @hl-lg;
border-radius: @radius-md;
}
}
@ -83,11 +83,11 @@ label > .form-control,
.btn:focus:not(:disabled),
.btn.focus:not(:disabled),
.btn:hover:not(:disabled) {
background: $hl-xs;
background: @hl-xs;
}
.btn:active {
background: $hl-md;
background: @hl-md;
}
textarea, input, button {
@ -103,12 +103,12 @@ textarea, input, button {
color: inherit;
&::-webkit-input-placeholder {
color: $hl-xl;
color: @hl-xl;
}
}
input.input--error {
border-color: $danger !important;
border-color: @danger !important;
}
button {

14
app/css/components/keyvalueeditor.scss → app/css/components/keyvalueeditor.less
View File

@ -2,14 +2,14 @@
@import '../constants/colors';
.key-value-editor {
padding: $padding-md 0;
padding: @padding-md 0;
li {
.key-value-editor__label {
padding: 0 $padding-md;
padding: 0 @padding-md;
opacity: 0.5;
font-size: $font-size-sm;
font-size: @font-size-sm;
}
.key-value-editor__row {
@ -18,19 +18,19 @@
grid-template-rows: auto;
& > * {
padding: 0 $padding-sm;
padding: 0 @padding-sm;
&:first-child {
padding-left: $padding-md;
padding-left: @padding-md;
}
&:last-child {
padding-right: $padding-md;
padding-right: @padding-md;
}
}
& > button {
color: $hl;
color: @hl;
&:hover {
color: inherit;

2
app/css/components/links.scss → app/css/components/links.less
View File

@ -3,7 +3,7 @@
a {
font-weight: bold;
text-decoration: none;
color: $font-light-bg-link;
color: @font-light-bg-link;
&:hover {
text-decoration: underline;

38
app/css/components/modal.scss → app/css/components/modal.less
View File

@ -9,7 +9,7 @@
left: 0;
right: 0;
bottom: 0;
padding: $padding-lg;
padding: @padding-lg;
&:focus {
outline: 0;
@ -24,7 +24,7 @@
}
.modal__backdrop {
background: $bg-backdrop;
background: @bg-backdrop;
position: fixed;
top: 0;
left: 0;
@ -37,18 +37,18 @@
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
color: $font-super-light-bg;
border-radius: $radius-md;
color: @font-super-light-bg;
border-radius: @radius-md;
box-sizing: border-box;
box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.2);
width: $modal-width;
width: @modal-width;
max-width: 100%;
max-height: 100%;
margin: auto;
}
&.modal--wide .modal__content {
width: $modal-width-wide;
width: @modal-width-wide;
}
&.modal--fixed-top .modal__content {
@ -56,13 +56,13 @@
}
.modal__header {
border-bottom: 1px solid $hl-md;
height: $line-height-md;
font-size: $font-size-lg;
line-height: $line-height-md;
padding: 0 $padding-md;
border-bottom: 1px solid @hl-md;
height: @line-height-md;
font-size: @font-size-lg;
line-height: @line-height-md;
padding: 0 @padding-md;
position: relative;
background-color: $bg-light;
background-color: @bg-light;
.modal__close-btn {
position: absolute;
@ -73,7 +73,7 @@
.modal__body {
overflow: auto;
background-color: $bg-super-light;
background-color: @bg-super-light;
min-height: 2rem;
box-sizing: border-box;
max-width: 100%;
@ -85,18 +85,18 @@
}
.modal__footer {
border-top: 1px solid $hl-md;
background-color: $bg-super-light;
border-top: 1px solid @hl-md;
background-color: @bg-super-light;
}
.modal__content > *:not(.modal__backdrop):last-child {
border-bottom-left-radius: $radius-md;
border-bottom-right-radius: $radius-md;
border-bottom-left-radius: @radius-md;
border-bottom-right-radius: @radius-md;
}
// 2nd child because the backdrop is the first
.modal__content > *:nth-child(2) {
border-top-left-radius: $radius-md;
border-top-right-radius: $radius-md;
border-top-left-radius: @radius-md;
border-top-right-radius: @radius-md;
}
}

24
app/css/components/pane.scss → app/css/components/pane.less
View File

@ -5,7 +5,7 @@
height: 100%;
width: 100%;
display: grid;
grid-template-rows: $height-nav 1fr;
grid-template-rows: @height-nav 1fr;
grid-template-columns: 1fr;
.pane__header {
@ -13,30 +13,30 @@
flex-direction: row;
justify-content: center;
align-items: center;
background: $bg-super-light;
color: $font-super-light-bg;
border-left: 1px solid $hl-md;
background: @bg-super-light;
color: @font-super-light-bg;
border-left: 1px solid @hl-md;
box-sizing: border-box;
&.pane__header--grey {
background: $bg-light;
border-left: 1px solid $hl-xs;
background: @bg-light;
border-left: 1px solid @hl-xs;
}
}
.pane__body {
border-left: 1px solid $hl-md;
border-left: 1px solid @hl-md;
box-sizing: border-box;
}
.pane__body--placeholder {
overflow: hidden;
padding: $padding-md;
padding: @padding-md;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: $hl-xxl;
color: @hl-xxl;
& > * {
min-width: 20em;
@ -44,16 +44,16 @@
.pane__body--placeholder__cta {
width: auto;
margin: $padding-lg auto 0;
margin: @padding-lg auto 0;
display: block;
& > * {
margin: $padding-xs;
margin: @padding-xs;
}
}
}
}
body[data-platform="win32"] .pane .pane__header {
border-top: 1px solid $hl-md;
border-top: 1px solid @hl-md;
}

2
app/css/components/requestpane.scss → app/css/components/requestpane.less
View File

@ -3,7 +3,7 @@
.request-pane {
.request-pane__shortcuts-table {
color: $hl-xxl;
color: @hl-xxl;
text-align: left;
}
}

4
app/css/components/requestswitcher.scss → app/css/components/requestswitcher.less
View File

@ -3,11 +3,11 @@
.request-switcher {
.btn:hover {
background: $hl-xs;
background: @hl-xs;
}
.btn.focus {
background: $hl-sm;
background: @hl-sm;
}
.tag {

4
app/css/components/responsepane.scss → app/css/components/responsepane.less
View File

@ -9,7 +9,7 @@
right: 0;
left: 0;
bottom: 0;
background: $bg-backdrop;
background: @bg-backdrop;
z-index: 10;
display: flex;
flex-direction: column;
@ -18,7 +18,7 @@
overflow: hidden;
i.fa {
color: $font-dark-bg;
color: @font-dark-bg;
font-size: 6rem;
}
}

10
app/css/components/scrollbars.scss → app/css/components/scrollbars.less
View File

@ -2,17 +2,17 @@
@import '../constants/dimensions';
::-webkit-scrollbar {
width: $padding-sm;
height: $padding-sm;
width: @padding-sm;
height: @padding-sm;
}
::-webkit-scrollbar-track {
background: $hl-xxxs;
background: @hl-xxxs;
}
::-webkit-scrollbar-thumb {
background: $hl-md;
border-radius: $padding-sm;
background: @hl-md;
border-radius: @padding-sm;
}
::-webkit-scrollbar-corner {

100
app/css/components/sidebar.scss → app/css/components/sidebar.less
View File

@ -4,11 +4,11 @@
.sidebar {
position: relative;
display: grid;
grid-template-rows: $height-nav auto auto 1fr;
grid-template-rows: @height-nav auto auto 1fr;
grid-template-columns: 1fr;
background-color: $bg-dark;
color: $font-dark-bg;
background-color: @bg-dark;
color: @font-dark-bg;
width: 100%;
height: 100%;
@ -29,13 +29,13 @@
// ~~~~~~~~~~~~~~ //
.sidebar__header {
background-color: $bg-brand;
color: $font-brand-bg;
background-color: @bg-brand;
color: @font-brand-bg;
width: 100%;
height: 100%;
&:hover {
background-color: lighten($bg-brand, 1);
background-color: lighten(@bg-brand, 1);
}
}
@ -47,28 +47,28 @@
// Nothing yet
width: 100%;
display: grid;
font-size: $font-size-sm;
font-size: @font-size-sm;
grid-template-columns: 1fr auto;
align-items: center;
.btn {
padding: 0 ($padding-md - $padding-xxs);
margin-right: $padding-xxs;
border-radius: $radius-md;
color: $hl;
padding: 0 (@padding-md - @padding-xxs);
margin-right: @padding-xxs;
border-radius: @radius-md;
color: @hl;
&:hover,
&:focus {
color: $font-dark-bg;
color: @font-dark-bg;
}
}
.form-control {
padding: 0 $padding-xxs 0 0;
margin: $padding-sm 0 $padding-sm $padding-sm;
padding: 0 @padding-xxs 0 0;
margin: @padding-sm 0 @padding-sm @padding-sm;
input {
padding: $padding-xs;
padding: @padding-xs;
}
}
}
@ -77,21 +77,21 @@
display: grid;
grid-template-columns: 55% 45%;
justify-items: center;
font-size: $font-size-sm;
color: $hl;
padding: 0 $padding-sm;
font-size: @font-size-sm;
color: @hl;
padding: 0 @padding-sm;
& > * {
width: 100%;
margin-top: $padding-sm;
margin-top: @padding-sm;
}
& > *:first-child {
margin-right: $padding-xxs;
margin-right: @padding-xxs;
}
& > *:last-child {
margin-left: $padding-xxs;
margin-left: @padding-xxs;
}
.sidebar__menu__thing {
@ -110,13 +110,13 @@
.btn {
width: 100%;
border-radius: 900px;
height: $line-height-xxs;
padding-left: $padding-xxs;
padding-right: $padding-xxs;
height: @line-height-xxs;
padding-left: @padding-xxs;
padding-right: @padding-xxs;
&:hover,
&:focus {
color: $font-dark-bg;
color: @font-dark-bg;
}
}
}
@ -125,7 +125,7 @@
grid-template-columns: 100%;
& > *:first-child {
margin-right: $padding-xs;
margin-right: @padding-xs;
}
& > *:last-child {
@ -141,8 +141,8 @@
}
.btn {
padding-left: $padding-xs;
padding-right: $padding-xs;
padding-left: @padding-xs;
padding-right: @padding-xs;
}
}
@ -152,9 +152,9 @@
.sidebar__list-root {
// Add some space above so it's not so squished
border-top: 1px solid $hl-sm;
padding-top: $padding-xs;
padding-bottom: $padding-md;
border-top: 1px solid @hl-sm;
padding-top: @padding-xs;
padding-bottom: @padding-md;
box-shadow: inset 0 2rem 3rem -2rem rgba(0, 0, 0, 0.1);
overflow-y: auto;
@ -188,7 +188,7 @@
height: 0;
right: 0;
left: 0;
border-bottom: 2px dotted lighten($surprise, 5);
border-bottom: 2px dotted lighten(@surprise, 5);
content: " ";
display: block
}
@ -201,37 +201,37 @@
.sidebar__item {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: $line-height-xs;
color: $hl-xxl;
grid-template-rows: @line-height-xs;
color: @hl-xxl;
& > * {
height: 100%;
}
&.sidebar__item--big {
grid-template-rows: $line-height-sm;
grid-template-rows: @line-height-sm;
}
&.sidebar__item--active > button {
color: $font-dark-bg;
color: @font-dark-bg;
.tag {
opacity: 1;
}
.editable {
line-height: $line-height-xs;
line-height: @line-height-xs;
}
}
&.sidebar__item--active > .sidebar__actions,
& > button:focus {
background-color: $hl-xxs;
background-color: @hl-xxs;
}
&:hover > .sidebar__actions,
&:hover > button {
background-color: $hl-xxxs;
background-color: @hl-xxxs;
}
.tag {
@ -244,7 +244,7 @@
}
.sidebar__item__icon {
padding-right: $padding-sm;
padding-right: @padding-sm;
}
// ~~~~~~~~~~~~~~~~~ //
@ -260,31 +260,31 @@
// Padding for nested folders
.sidebar__list .sidebar__clickable {
padding-left: $padding-md;
padding-left: @padding-md;
}
.sidebar__list .sidebar__list .sidebar__clickable {
padding-left: $padding-md * 2;
padding-left: @padding-md * 2;
}
.sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
padding-left: $padding-md * 3;
padding-left: @padding-md * 3;
}
.sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
padding-left: $padding-md * 4;
padding-left: @padding-md * 4;
}
.sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
padding-left: $padding-md * 5;
padding-left: @padding-md * 5;
}
.sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
padding-left: $padding-md * 6;
padding-left: @padding-md * 6;
}
.sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
padding-left: $padding-md * 7;
padding-left: @padding-md * 7;
}
// ~~~~~~~~~~~~~~~ //
@ -299,14 +299,14 @@
& > button,
& > .dropdown > button {
display: none;
color: $hl;
color: @hl;
height: 100%;
padding: 0 $padding-sm;
padding: 0 @padding-sm;
}
& > button:hover,
& > .dropdown:hover > button {
color: $font-dark-bg;
color: @font-dark-bg;
}
}

22
app/css/components/tabs.scss → app/css/components/tabs.less
View File

@ -1,7 +1,7 @@
@import '../constants/colors';
@import '../constants/dimensions';
$border-color: $hl-md;
@border-color: @hl-md;
.ReactTabs {
width: 100%;
@ -20,16 +20,16 @@ $border-color: $hl-md;
&::after {
width: 100%;
height: $line-height-sm;
height: @line-height-sm;
content: "";
border-bottom: 1px solid $border-color;
border-bottom: 1px solid @border-color;
}
}
.ReactTabs__Tab {
height: $line-height-sm;
height: @line-height-sm;
border: 1px solid transparent;
border-bottom: 1px solid $border-color;
border-bottom: 1px solid @border-color;
border-top: 0 !important;
white-space: nowrap;
display: flex;
@ -44,24 +44,24 @@ $border-color: $hl-md;
}
& > * {
color: $hl;
color: @hl;
height: 100%;
padding-left: $padding-md / 4;
padding-right: $padding-md / 4;
padding-left: @padding-md / 4;
padding-right: @padding-md / 4;
&:first-child {
padding-left: $padding-md;
padding-left: @padding-md;
}
&:last-child {
padding-right: $padding-md;
padding-right: @padding-md;
}
}
}
.ReactTabs__Tab--selected {
border: 1px solid $border-color;
border: 1px solid @border-color;
border-bottom-color: transparent;
* {

12
app/css/components/tag.scss → app/css/components/tag.less
View File

@ -3,13 +3,13 @@
.tag {
display: inline-block;
padding: $padding-sm;
padding: @padding-sm;
margin-right: 1em;
line-height: 1em;
box-sizing: border-box;
border-radius: $radius-md;
border-radius: @radius-md;
text-align: center;
background: $hl-sm;
background: @hl-sm;
border: 1px solid rgba(0, 0, 0, 0.05);
&:last-child {
@ -17,9 +17,9 @@
}
&.tag--small {
padding: $padding-xs;
font-size: $font-size-xs;
border-radius: $radius-sm;
padding: @padding-xs;
font-size: @font-size-xs;
border-radius: @radius-sm;
}
&.tag--no-bg {

20
app/css/components/toast.scss → app/css/components/toast.less
View File

@ -7,14 +7,14 @@
opacity: 0;
position: absolute;
z-index: 100;
bottom: $padding-md;
right: $padding-md;
background: $bg-light;
color: $font-light-bg;
bottom: @padding-md;
right: @padding-md;
background: @bg-light;
color: @font-light-bg;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: row;
border-radius: $radius-md;
border-radius: @radius-md;
&.toast--show {
opacity: 1;
@ -23,18 +23,18 @@
.toast__message,
.toast__action {
padding: $padding-sm $padding-md;
padding: @padding-sm @padding-md;
height: auto;
}
.toast__action {
color: $font-light-bg;
color: @font-light-bg;
font-weight: bold;
font-size: $font-size-sm;
border-left: 1px solid $hl-md;
font-size: @font-size-sm;
border-left: 1px solid @hl-md;
&:hover {
background: $hl-xs;
background: @hl-xs;
}
}
}

20
app/css/components/urlbar.scss → app/css/components/urlbar.less
View File

@ -27,14 +27,14 @@
// Make everything the same height
&,
& > i.fa {
line-height: $line-height-sm;
line-height: @line-height-sm;
}
}
}
.dropdown .tag {
border-radius: 0;
font-size: $font-size-md;
font-size: @font-size-md;
padding: 0;
&::before {
@ -46,8 +46,8 @@
}
.tag__inner {
color: $hl;
padding-left: $padding-sm;
color: @hl;
padding-left: @padding-sm;
}
}
@ -57,8 +57,8 @@
}
form button {
padding-right: $padding-md;
padding-left: $padding-md;
padding-right: @padding-md;
padding-left: @padding-md;
}
form, .form-control {
@ -70,16 +70,16 @@
height: 100%;
&:hover {
background-color: $hl-xs;
background-color: @hl-xs;
}
}
& > *:first-child {
padding-left: $padding-md;
padding-right: $padding-md / 2;
padding-left: @padding-md;
padding-right: @padding-md / 2;
}
& > *:nth-child(2) {
padding-left: $padding-md / 2;
padding-left: @padding-md / 2;
}
}

6
app/css/components/workspacedropdown.scss → app/css/components/workspacedropdown.less
View File

@ -7,11 +7,11 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: $font-size-xxl;
font-size: @font-size-xxl;
// HACK: Bump up the arrow a bit
i.fa {
font-size: $font-size-lg;
font-size: @font-size-lg;
position: relative;
}
}
@ -22,7 +22,7 @@
}
.btn {
padding: 0 $padding-md;
padding: 0 @padding-md;
height: 100%;
}
}

10
app/css/components/wrapper.scss → app/css/components/wrapper.less
View File

@ -2,8 +2,8 @@
@import '../constants/colors';
.wrapper {
background-color: $bg-super-dark;
color: $font-super-dark-bg;
background-color: @bg-super-dark;
color: @font-super-dark-bg;
display: grid;
grid-template-rows: 0.5fr 0.5fr;
@ -27,10 +27,10 @@
position: absolute;
height: 100%;
z-index: 20;
width: $drag-width;
width: @drag-width;
top: 0;
// More to the right so it doesn't cover scroll bars
left: -$drag-width / 8;
left: -@drag-width / 8;
}
}
@ -49,7 +49,7 @@
}
}
@media (max-width: $breakpoint-md) {
@media (max-width: @breakpoint-md) {
.wrapper {
.request-pane {
grid-column-start: 3;

0
app/css/constants/animations.scss → app/css/constants/animations.less
View File

109
app/css/constants/colors.less Normal file
View File

@ -0,0 +1,109 @@
@color-brand: #7D70CC;
/* Background Colors */
@bg-light: #eff0ed;
@bg-super-light: #fff;
@bg-dark: #2e2f2b;
@bg-super-dark: #292a26;
@bg-brand: @color-brand;
@bg-backdrop: rgba(30, 30, 30, 0.6);
/* Font Colors */
@font-light-bg: #444;
@font-super-light-bg: #666;
@font-dark-bg: #eee;
@font-super-dark-bg: #ddd;
@font-brand-bg: #eee;
@font-light-bg-link: darken(@bg-brand, 3);
@hl-xxxs: rgba(140, 140, 140, 0.04);
@hl-xxs: rgba(140, 140, 140, 0.07);
@hl-xs: rgba(140, 140, 140, 0.1);
@hl-sm: rgba(140, 140, 140, 0.15);
@hl-md: rgba(140, 140, 140, 0.25);
@hl-lg: rgba(140, 140, 140, 0.35);
@hl-xl: rgba(140, 140, 140, 0.5);
@hl-xxl: rgba(140, 140, 140, 0.8);
@hl: rgba(140, 140, 140, 1);
@success: #88bd29;
@notice: #e5d550;
@warning: #f59d00;
@danger: #ff5a63;
@surprise: #8f78ff;
@info: #22a9d7;
.success,
.method-POST {
color: @success;
}
.notice,
.method-PATCH {
color: @notice;
}
.warning,
.method-PUT {
color: @warning;
}
.danger,
.method-DELETE {
color: @danger;
}
.info,
.method-OPTIONS,
.method-HEAD {
color: @info;
}
.surprise,
.method-GET {
color: @surprise;
}
.bg-success,
.bg-method-POST {
background: @success !important;
text-shadow: 0 0 0.05em darken(@success, 20);
color: #fff;
}
.bg-notice,
.bg-method-PATCH {
background: @notice !important;
color: #fff;
text-shadow: 0 0 0.05em darken(@notice, 20);
}
.bg-warning,
.bg-method-PUT {
background: @warning !important;
color: #fff;
text-shadow: 0 0 0.05em darken(@warning, 20);
}
.bg-danger,
.bg-method-DELETE {
background: @danger !important;
color: #fff;
text-shadow: 0 0 0.05em darken(@danger, 20);
}
.bg-info,
.bg-method-OPTIONS,
.bg-method-HEAD {
background: @info !important;
color: #fff;
text-shadow: 0 0 0.05em darken(@info, 20);
}
.bg-surprise,
.bg-method-GET {
background: @surprise !important;
color: #fff;
text-shadow: 0 0 0.05em darken(@surprise, 20);
}

109
app/css/constants/colors.scss
View File

@ -1,109 +0,0 @@
$color-brand: #7D70CC;
/* Background Colors */
$bg-light: #eff0ed;
$bg-super-light: #fff;
$bg-dark: #2e2f2b;
$bg-super-dark: #292a26;
$bg-brand: $color-brand;
$bg-backdrop: rgba(30, 30, 30, 0.6);
/* Font Colors */
$font-light-bg: #444;
$font-super-light-bg: #666;
$font-dark-bg: #eee;
$font-super-dark-bg: #ddd;
$font-brand-bg: #eee;
$font-light-bg-link: darken($bg-brand, 3);
$hl-xxxs: rgba(140, 140, 140, 0.04);
$hl-xxs: rgba(140, 140, 140, 0.07);
$hl-xs: rgba(140, 140, 140, 0.1);
$hl-sm: rgba(140, 140, 140, 0.15);
$hl-md: rgba(140, 140, 140, 0.25);
$hl-lg: rgba(140, 140, 140, 0.35);
$hl-xl: rgba(140, 140, 140, 0.5);
$hl-xxl: rgba(140, 140, 140, 0.8);
$hl: rgba(140, 140, 140, 1);
$success: #88bd29;
$notice: #e5d550;
$warning: #f59d00;
$danger: #ff5a63;
$surprise: #8f78ff;
$info: #22a9d7;
.success,
.method-POST {
color: $success;
}
.notice,
.method-PATCH {
color: $notice;
}
.warning,
.method-PUT {
color: $warning;
}
.danger,
.method-DELETE {
color: $danger;
}
.info,
.method-OPTIONS,
.method-HEAD {
color: $info;
}
.surprise,
.method-GET {
color: $surprise;
}
.bg-success,
.bg-method-POST {
background: $success !important;
text-shadow: 0 0 0.05em darken($success, 20);
color: #fff;
}
.bg-notice,
.bg-method-PATCH {
background: $notice !important;
color: #fff;
text-shadow: 0 0 0.05em darken($notice, 20);
}
.bg-warning,
.bg-method-PUT {
background: $warning !important;
color: #fff;
text-shadow: 0 0 0.05em darken($warning, 20);
}
.bg-danger,
.bg-method-DELETE {
background: $danger !important;
color: #fff;
text-shadow: 0 0 0.05em darken($danger, 20);
}
.bg-info,
.bg-method-OPTIONS,
.bg-method-HEAD {
background: $info !important;
color: #fff;
text-shadow: 0 0 0.05em darken($info, 20);
}
.bg-surprise,
.bg-method-GET {
background: $surprise !important;
color: #fff;
text-shadow: 0 0 0.05em darken($surprise, 20);
}

71
app/css/constants/dimensions.less Normal file
View File

@ -0,0 +1,71 @@
/* Padding */
@padding-md: 1.25rem;
@padding-sm: 0.63rem;
@padding-xs: 0.44rem;
@padding-xxs: 0.25rem;
@padding-lg: 2.5rem;
@padding-xl: 5rem;
/* Fonts */
@font-size: 13px;
@font-size-xs: 0.8rem;
@font-size-sm: 0.9rem;
@font-size-md: 1.0rem;
@font-size-lg: 1.1rem;
@font-size-xl: 1.3rem;
@font-size-xxl: 1.5rem;
@font-size-xxxl: 1.7rem;
/* Wrapper */
@line-height-lg: 4.5rem;
@line-height-md: 4rem;
@line-height-sm: 3rem;
@line-height-xs: 2.4rem;
@line-height-xxs: 2rem;
@height-nav: @line-height-md;
/* Sidebar */
@sidebar-width: 19rem;
/* Borders */
@radius-sm: 0.15rem;
@radius-md: 0.3rem;
/* Dropdowns */
@dropdown-min-width: 15rem;
/* Modals */
@modal-width: 50rem;
@modal-width-wide: 70rem;
/* Other */
@drag-width: 0.5em;
/* Breakpoints */
@breakpoint-lg: 1100px;
@breakpoint-md: 880px;
@breakpoint-sm: 660px;
.txt-xs {
font-size: @font-size-xs !important;
}
.txt-sm {
font-size: @font-size-sm !important;
}
.txt-md {
font-size: @font-size-md !important;
}
.txt-lg {
font-size: @font-size-lg !important;
}
.txt-xl {
font-size: @font-size-xl !important;
}
.txt-xxl {
font-size: @font-size-xxl !important;
}

71
app/css/constants/dimensions.scss
View File

@ -1,71 +0,0 @@
/* Padding */
$padding-md: 1.25rem;
$padding-sm: 0.63rem;
$padding-xs: 0.44rem;
$padding-xxs: 0.25rem;
$padding-lg: 2.5rem;
$padding-xl: 5rem;
/* Fonts */
$font-size: 13px;
$font-size-xs: 0.8rem;
$font-size-sm: 0.9rem;
$font-size-md: 1.0rem;
$font-size-lg: 1.1rem;
$font-size-xl: 1.3rem;
$font-size-xxl: 1.5rem;
$font-size-xxxl: 1.7rem;
/* Wrapper */
$line-height-lg: 4.5rem;
$line-height-md: 4rem;
$line-height-sm: 3rem;
$line-height-xs: 2.4rem;
$line-height-xxs: 2rem;
$height-nav: $line-height-md;
/* Sidebar */
$sidebar-width: 19rem;
/* Borders */
$radius-sm: 0.15rem;
$radius-md: 0.3rem;
/* Dropdowns */
$dropdown-min-width: 15rem;
/* Modals */
$modal-width: 50rem;
$modal-width-wide: 70rem;
/* Other */
$drag-width: 0.5em;
/* Breakpoints */
$breakpoint-lg: 1100px;
$breakpoint-md: 880px;
$breakpoint-sm: 660px;
.txt-xs {
font-size: $font-size-xs !important;
}
.txt-sm {
font-size: $font-size-sm !important;
}
.txt-md {
font-size: $font-size-md !important;
}
.txt-lg {
font-size: $font-size-lg !important;
}
.txt-xl {
font-size: $font-size-xl !important;
}
.txt-xxl {
font-size: $font-size-xxl !important;
}

6
app/css/constants/fonts.less Normal file
View File

@ -0,0 +1,6 @@
@font-monospace: 'Source Code Pro', Menlo, 'Ubuntu Mono', 'Courier New', monospace;
.monospace {
font-family: @font-monospace;
}

6
app/css/constants/fonts.scss
View File

@ -1,6 +0,0 @@
$font-monospace: 'Source Code Pro', Menlo, 'Ubuntu Mono', 'Courier New', monospace;
.monospace {
font-family: $font-monospace;
}

2
app/css/index.scss → app/css/index.less
View File

@ -1,5 +1,5 @@
/*
* Insomnia SCSS!!! :)
* Insomnia Less!!! :)
*/
/* Boilerplate */

66
app/css/layout/base.scss → app/css/layout/base.less
View File

@ -3,7 +3,7 @@
@import '../constants/fonts';
html {
font-size: $font-size;
font-size: @font-size;
}
html, body, #root {
@ -22,15 +22,15 @@ body {
}
h1 {
font-size: $font-size-xxl;
font-size: @font-size-xxl;
}
h2 {
font-size: $font-size-xl;
font-size: @font-size-xl;
}
h3 {
font-size: $font-size-lg;
font-size: @font-size-lg;
}
h1, h2, h3 {
@ -41,8 +41,8 @@ hr {
width: 100%;
height: 0;
border: 0;
border-bottom: 1px solid $hl-md;
margin: $padding-md 0;
border-bottom: 1px solid @hl-md;
margin: @padding-md 0;
}
em {
@ -59,41 +59,41 @@ p {
label.label--small,
table th {
color: $hl;
color: @hl;
text-transform: uppercase;
font-size: 0.8em;
padding-bottom: $padding-xxs;
padding-bottom: @padding-xxs;
}
webview {
height: 100%;
width: 100%;
background-color: $bg-super-light;
background-color: @bg-super-light;
}
table {
width: 100%;
td, th {
padding: $padding-sm;
padding: @padding-sm;
}
th {
text-align: left;
padding-bottom: $padding-sm;
padding-bottom: @padding-sm;
}
&.table--striped tbody tr:nth-child(odd) {
background: $hl-xs;
background: @hl-xs;
}
}
code {
display: inline-block;
background: $hl-xs;
padding: $padding-xs $padding-sm;
color: $hl;
font-family: $font-monospace;
background: @hl-xs;
padding: @padding-xs @padding-sm;
color: @hl;
font-family: @font-monospace;
}
.text-center {
@ -117,11 +117,11 @@ code {
}
.faint {
color: $hl;
color: @hl;
}
.super-faint {
color: $hl-xl;
color: @hl-xl;
}
.valign-bottom {
@ -160,41 +160,41 @@ i.fa {
}
.border-top {
border-top: 1px solid $hl-md;
border-top: 1px solid @hl-md;
}
.pad {
box-sizing: border-box;
padding: $padding-md;
padding: @padding-md;
}
.pad-left {
box-sizing: border-box;
padding-left: $padding-md;
padding-left: @padding-md;
}
.pad-right {
box-sizing: border-box;
padding-right: $padding-md;
padding-right: @padding-md;
}
.pad-top {
box-sizing: border-box;
padding-top: $padding-md;
padding-top: @padding-md;
}
.pad-top-sm {
box-sizing: border-box;
padding-top: $padding-sm;
padding-top: @padding-sm;
}
.margin-top-sm {
margin-top: $padding-sm;
margin-top: @padding-sm;
}
.pad-bottom {
box-sizing: border-box;
padding-bottom: $padding-md;
padding-bottom: @padding-md;
}
.no-pad-bottom {
@ -206,11 +206,11 @@ i.fa {
}
.pad-left-half {
padding-left: $padding-md / 2;
padding-left: @padding-md / 2;
}
.pad-right-half {
padding-right: $padding-md / 2;
padding-right: @padding-md / 2;
}
.no-pad {
@ -267,12 +267,12 @@ i.fa {
border-right: 1px solid #eee;
&.bg-brand {
border-right-color: $bg-brand;
border-right-color: @bg-brand;
}
}
.section__body {
border-right: 1px solid $hl-sm;
border-right: 1px solid @hl-sm;
}
}
@ -288,7 +288,7 @@ strong {
display: none;
}
@media (max-width: $breakpoint-lg) {
@media (max-width: @breakpoint-lg) {
.hide-below-lg {
display: none;
}
@ -298,9 +298,9 @@ strong {
}
}
@media (max-width: $breakpoint-md) {
@media (max-width: @breakpoint-md) {
html {
font-size: $font-size * 0.95;
font-size: @font-size * 0.95;
}
.hide-below-md {

0
app/css/reset.scss → app/css/reset.less
View File

2
app/index.js
View File

@ -21,7 +21,7 @@ import App from './containers/App';
// Global CSS
import './css/lib/fontawesome/css/font-awesome.css'
import './css/lib/fonts/open-sans.css'
import './css/index.scss'
import './css/index.less'
import './css/lib/chrome/platform_app.css'
import {initStore} from './redux/initstore';
import {initDB} from './database';

3
package.json
View File

@ -99,7 +99,8 @@
"express": "latest",
"file-loader": "^0.9.0",
"json-loader": "^0.5.4",
"node-sass": "^3.4.2",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"react-addons-perf": "^15.3.0",
"react-addons-test-utils": "^15.1.0",
"react-hot-loader": "^1.3.0",

4
webpack/webpack.config.base.babel.js
View File

@ -31,8 +31,8 @@ export default {
loader: 'json'
},
{
test: /\.(scss|css)$/,
loader: 'style!css!sass'
test: /\.(less|css)$/,
loader: 'style!css!less'
},
{
test: /\.html$/,