Commit 18d2183f authored by yann300's avatar yann300

remove most of the old style guide reference and replace by bootstrap

parent fd2fbce7
var yo = require('yo-yo') var yo = require('yo-yo')
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
// const remixLib = require('remix-lib')
// const styleguide = require('../ui/styles-guide/theme-chooser')
// const styles = styleguide.chooser()
class SwapPanelComponent { class SwapPanelComponent {
constructor (name, appStore, appManager, opt) { constructor (name, appStore, appManager, opt) {
......
...@@ -38,14 +38,14 @@ document.head.appendChild(yo` ...@@ -38,14 +38,14 @@ document.head.appendChild(yo`
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color: var(--secondary); background-color: var(--secondary);
opacity: 0.7 opacity: 0.6
} }
.highlightreferenceline { .highlightreferenceline {
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color: var(--secondary); background-color: var(--secondary);
opacity: 0.7 opacity: 0.6
} }
.highlightcode { .highlightcode {
......
'use strict' 'use strict'
const csjs = require('csjs-inject') const csjs = require('csjs-inject')
const globlalRegistry = require('../../global/registry') const globlalRegistry = require('../../global/registry')
const styleGuide = require('../ui/styles-guide/theme-chooser')
const styles = styleGuide.chooser()
class SourceHighlighter { class SourceHighlighter {
constructor (localRegistry) { constructor (localRegistry) {
...@@ -48,12 +46,12 @@ class SourceHighlighter { ...@@ -48,12 +46,12 @@ class SourceHighlighter {
.highlightcode { .highlightcode {
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color: ${style || styles.editor.backgroundColor_DebuggerMode}; background-color: ${style || 'var(--text-info)'};
} }
.highlightcode_fullLine { .highlightcode_fullLine {
position:absolute; position:absolute;
z-index:20; z-index:20;
background-color: ${style || styles.editor.backgroundColor_DebuggerMode}; background-color: ${style || 'var(--text-info)'};
opacity: 0.5; opacity: 0.5;
} }
` `
......
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('../../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs` var css = csjs`
.contextview { .contextview {
...@@ -16,7 +14,6 @@ var css = csjs` ...@@ -16,7 +14,6 @@ var css = csjs`
text-overflow : ellipsis; text-overflow : ellipsis;
overflow : hidden; overflow : hidden;
white-space : nowrap; white-space : nowrap;
color : ${styles.editor.text_Primary};
font-size : 11px; font-size : 11px;
} }
.type { .type {
...@@ -29,10 +26,9 @@ var css = csjs` ...@@ -29,10 +26,9 @@ var css = csjs`
.jump { .jump {
cursor : pointer; cursor : pointer;
margin : 0 5px; margin : 0 5px;
color : ${styles.editor.icon_Color_Editor};
} }
.jump:hover { .jump:hover {
color : ${styles.editor.icon_HoverColor_Editor}; color : var(--secondary);
} }
.referencesnb { .referencesnb {
float : right; float : right;
......
var yo = require('yo-yo') var yo = require('yo-yo')
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs` var css = csjs`
.txInfoBox { .txInfoBox {
${styles.rightPanel.compileTab.box_CompileContainer}; // add askToConfirmTXContainer to Remix and then replace this styling
} }
.wrapword { .wrapword {
white-space: pre-wrap; /* Since CSS 2.1 */ white-space: pre-wrap; /* Since CSS 2.1 */
......
...@@ -5,8 +5,6 @@ var copyToClipboard = require('../ui/copy-to-clipboard') ...@@ -5,8 +5,6 @@ var copyToClipboard = require('../ui/copy-to-clipboard')
// -------------- styling ---------------------- // -------------- styling ----------------------
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var remixLib = require('remix-lib') var remixLib = require('remix-lib')
var styleGuide = require('../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var EventManager = require('../../lib/events') var EventManager = require('../../lib/events')
var helper = require('../../lib/helper') var helper = require('../../lib/helper')
...@@ -26,14 +24,14 @@ var css = csjs` ...@@ -26,14 +24,14 @@ var css = csjs`
opacity: 0.8; opacity: 0.8;
} }
.arrow { .arrow {
color: ${styles.terminal.icon_Color_Menu}; color: var(--primary);
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
margin-left: 10px; margin-left: 10px;
} }
.arrow:hover { .arrow:hover {
color: ${styles.terminal.icon_HoverColor_Menu}; color: var(--secondary);
} }
.txLog { .txLog {
} }
...@@ -44,28 +42,27 @@ var css = csjs` ...@@ -44,28 +42,27 @@ var css = csjs`
float: left; float: left;
} }
.succeeded { .succeeded {
color: ${styles.terminal.icon_Color_Log_Succeed}; color: var(--success);
} }
.failed { .failed {
color: ${styles.terminal.icon_Color_Log_Failed}; color: var(--danger);
} }
.notavailable { .notavailable {
} }
.call { .call {
font-size: 7px; font-size: 7px;
background-color: ${styles.terminal.icon_BackgroundColor_Log_Call};
border-radius: 50%; border-radius: 50%;
min-width: 20px; min-width: 20px;
min-height: 20px; min-height: 20px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: ${styles.terminal.icon_Color_Log_Call}; color: var(--primary);
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
} }
.txItem { .txItem {
color: ${styles.terminal.text_Primary}; color: var(--primary);
margin-right: 5px; margin-right: 5px;
float: left; float: left;
} }
...@@ -73,7 +70,7 @@ var css = csjs` ...@@ -73,7 +70,7 @@ var css = csjs`
font-weight: bold; font-weight: bold;
} }
.tx { .tx {
color: ${styles.terminal.text_Title_TransactionLog}; color: var(--primary);
font-weight: bold; font-weight: bold;
float: left; float: left;
margin-right: 10px; margin-right: 10px;
...@@ -83,8 +80,8 @@ var css = csjs` ...@@ -83,8 +80,8 @@ var css = csjs`
.td { .td {
border-collapse: collapse; border-collapse: collapse;
font-size: 10px; font-size: 10px;
color: ${styles.terminal.text_Primary}; color: var(--primary);
border: 1px solid ${styles.terminal.text_Secondary}; border: 1px solid var(--secondary);
} }
#txTable { #txTable {
margin-top: 1%; margin-top: 1%;
...@@ -110,7 +107,6 @@ var css = csjs` ...@@ -110,7 +107,6 @@ var css = csjs`
margin-left: auto; margin-left: auto;
} }
.debug { .debug {
${styles.terminal.button_Log_Debug}
width: 55px; width: 55px;
min-width: 55px; min-width: 55px;
min-height: 20px; min-height: 20px;
...@@ -240,7 +236,7 @@ function renderKnownTransaction (self, data) { ...@@ -240,7 +236,7 @@ function renderKnownTransaction (self, data) {
${checkTxStatus(data.receipt, txType)} ${checkTxStatus(data.receipt, txType)}
${context(self, {from, to, data})} ${context(self, {from, to, data})}
<div class=${css.buttons}> <div class=${css.buttons}>
<div class=${css.debug} onclick=${(e) => debug(e, data, self)}>Debug</div> <button class="${css.debug} btn" onclick=${(e) => debug(e, data, self)}>Debug</div>
</div> </div>
<i class="${css.arrow} fa fa-angle-down"></i> <i class="${css.arrow} fa fa-angle-down"></i>
</div> </div>
......
...@@ -115,21 +115,17 @@ function filepanel (localRegistry) { ...@@ -115,21 +115,17 @@ function filepanel (localRegistry) {
fileExplorer.ensureRoot() fileExplorer.ensureRoot()
configExplorer.ensureRoot() configExplorer.ensureRoot()
self._deps.fileProviders['localhost'].event.register('connecting', (event) => { self._deps.fileProviders['localhost'].event.register('connecting', (event) => {
tooltip('Connecting to localhost. ' + JSON.stringify(event))
}) })
self._deps.fileProviders['localhost'].event.register('connected', (event) => { self._deps.fileProviders['localhost'].event.register('connected', (event) => {
tooltip('Connected to localhost. ' + JSON.stringify(event))
fileSystemExplorer.show() fileSystemExplorer.show()
}) })
self._deps.fileProviders['localhost'].event.register('errored', (event) => { self._deps.fileProviders['localhost'].event.register('errored', (event) => {
tooltip('localhost connection errored. ' + JSON.stringify(event))
fileSystemExplorer.hide() fileSystemExplorer.hide()
}) })
self._deps.fileProviders['localhost'].event.register('closed', (event) => { self._deps.fileProviders['localhost'].event.register('closed', (event) => {
tooltip('localhost connection closed. ' + JSON.stringify(event))
fileSystemExplorer.hide() fileSystemExplorer.hide()
}) })
......
...@@ -6,7 +6,6 @@ var globalRegistry = require('../../global/registry') ...@@ -6,7 +6,6 @@ var globalRegistry = require('../../global/registry')
var tooltip = require('../ui/tooltip') var tooltip = require('../ui/tooltip')
var copyToClipboard = require('../ui/copy-to-clipboard') var copyToClipboard = require('../ui/copy-to-clipboard')
var styleGuide = require('../ui/styles-guide/theme-chooser') var styleGuide = require('../ui/styles-guide/theme-chooser')
// var styles = styleGuide.chooser()
var Storage = remixLib.Storage var Storage = remixLib.Storage
var EventManager = require('../../lib/events') var EventManager = require('../../lib/events')
......
const csjs = require('csjs-inject') const csjs = require('csjs-inject')
// const styleGuide = require('../../ui/styles-guide/theme-chooser')
// const styles = styleGuide.chooser()
const css = csjs` const css = csjs`
.compilerArticle { .compilerArticle {
......
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('../../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs` var css = csjs`
.settingsTabView { .settingsTabView {
...@@ -8,7 +6,6 @@ var css = csjs` ...@@ -8,7 +6,6 @@ var css = csjs`
display: flex; display: flex;
} }
.info { .info {
${styles.rightPanel.settingsTab.box_SolidityVersionInfo}
margin-bottom: 1em; margin-bottom: 1em;
word-break: break-word; word-break: break-word;
} }
...@@ -41,7 +38,6 @@ var css = csjs` ...@@ -41,7 +38,6 @@ var css = csjs`
.select { .select {
font-weight: bold; font-weight: bold;
margin-top: 1em; margin-top: 1em;
${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
} }
.heading { .heading {
margin-bottom: 0; margin-bottom: 0;
...@@ -64,7 +60,7 @@ var css = csjs` ...@@ -64,7 +60,7 @@ var css = csjs`
vertical-align: top; vertical-align: top;
} }
i.warnIt { i.warnIt {
color: ${styles.appProperties.warningText_Color}; color: var(--warning);
} }
.icon { .icon {
margin-right: .5em; margin-right: .5em;
......
const csjs = require('csjs-inject') const csjs = require('csjs-inject')
const styles = require('../../ui/styles-guide/theme-chooser').chooser()
const css = csjs` const css = csjs`
.supportTabView { .supportTabView {
...@@ -12,7 +11,6 @@ const css = csjs` ...@@ -12,7 +11,6 @@ const css = csjs`
overflow-y: auto; overflow-y: auto;
} }
.chat { .chat {
${styles.rightPanel.supportTab.box_IframeContainer}
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
...@@ -49,7 +47,6 @@ const css = csjs` ...@@ -49,7 +47,6 @@ const css = csjs`
border: none; border: none;
} }
.infoBox { .infoBox {
${styles.rightPanel.supportTab.box_SupportInfo}
} }
.remixdinstallation { .remixdinstallation {
padding: 3px; padding: 3px;
...@@ -57,7 +54,6 @@ const css = csjs` ...@@ -57,7 +54,6 @@ const css = csjs`
margin-left: 5px; margin-left: 5px;
} }
.info { .info {
${styles.rightPanel.settingsTab.box_SolidityVersionInfo};
margin-top: 1em; margin-top: 1em;
word-break: break-word; word-break: break-word;
} }
......
const csjs = require('csjs-inject') const csjs = require('csjs-inject')
const styles = require('../../ui/styles-guide/theme-chooser').chooser()
const css = csjs` const css = csjs`
.menu { .menu {
display: flex; display: flex;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.active { .active {
background-color: ${styles.rightPanel.backgroundColor_Tab};
color: ${styles.appProperties.mainText_Color}
} }
.options { .options {
float: left; float: left;
...@@ -23,7 +19,6 @@ const css = csjs` ...@@ -23,7 +19,6 @@ const css = csjs`
text-align: center; text-align: center;
} }
.optionViews { .optionViews {
background-color: ${styles.rightPanel.backgroundColor_Tab};
overflow: scroll; overflow: scroll;
height: 100%; height: 100%;
} }
...@@ -32,7 +27,6 @@ const css = csjs` ...@@ -32,7 +27,6 @@ const css = csjs`
} }
.optionViews .pre { .optionViews .pre {
word-wrap: break-word; word-wrap: break-word;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
padding: 0 0.6em; padding: 0 0.6em;
......
var yo = require('yo-yo') var yo = require('yo-yo')
// -------------- copyToClipboard ---------------------- // -------------- copyToClipboard ----------------------
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('./styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs` var css = csjs`
.container .container
{ {
display: none; display: none;
position: fixed; position: fixed;
border: 1px solid ${styles.appProperties.solidBorderBox_BorderColor}; border: 1px solid var(--primary);
width:150px; width:150px;
background: ${styles.appProperties.solidBorderBox_BackgroundColor};
border-radius: 2px; border-radius: 2px;
z-index: 1000; z-index: 1000;
} }
...@@ -31,12 +28,12 @@ var css = csjs` ...@@ -31,12 +28,12 @@ var css = csjs`
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
padding-bottom: 3px; padding-bottom: 3px;
color: ${styles.appProperties.solidBorderBox_TextColor}; color: var(--primary);
} }
#menuitems :hover #menuitems :hover
{ {
background: ${styles.appProperties.highlight_BackgroundColor}; background: $var(--seconday);
border-radius: 2px; border-radius: 2px;
} }
` `
......
...@@ -4,8 +4,6 @@ const copy = require('clipboard-copy') ...@@ -4,8 +4,6 @@ const copy = require('clipboard-copy')
var addTooltip = require('./tooltip') var addTooltip = require('./tooltip')
// -------------- styling ---------------------- // -------------- styling ----------------------
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('./styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs` var css = csjs`
.copyIcon { .copyIcon {
...@@ -16,9 +14,6 @@ var css = csjs` ...@@ -16,9 +14,6 @@ var css = csjs`
module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-clipboard') { module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-clipboard') {
var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} fa ${icon}" aria-hidden="true"></i>` var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} fa ${icon}" aria-hidden="true"></i>`
copyIcon.style.color = styles.remix.icon_Color_CopyToClipboard
copyIcon.onmouseenter = function (event) { copyIcon.style.color = styles.remix.icon_HoverColor_CopyToClipboard }
copyIcon.onmouseleave = function (event) { copyIcon.style.color = styles.remix.icon_Color_CopyToClipboard }
copyIcon.onclick = (event) => { copyIcon.onclick = (event) => {
event.stopPropagation() event.stopPropagation()
var copiableContent var copiableContent
......
'use strict' 'use strict'
var yo = require('yo-yo') var yo = require('yo-yo')
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('./styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs` var css = csjs`
.containerDraggableModal { .containerDraggableModal {
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
background-color: ${styles.appProperties.light_BackgroundColor};
text-align: center; text-align: center;
width: 500px; width: 500px;
height: 500px; height: 500px;
border: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
overflow-y: hidden; overflow-y: hidden;
} }
.headerDraggableModal { .headerDraggableModal {
cursor: move; cursor: move;
z-index: 10; z-index: 10;
color: ${styles.appProperties.mainText_Color};
background-color: ${styles.appProperties.primary_BackgroundColor};
border-bottom: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
} }
.modalActions { .modalActions {
float: right; float: right;
color: ${styles.appProperties.solidBorderBox_BorderColor};
} }
.modalAction { .modalAction {
padding-right: 1px; padding-right: 1px;
padding-left: 1px; padding-left: 1px;
cursor: pointer; cursor: pointer;
color: ${styles.appProperties.solidBorderBox_BorderColor};
} }
` `
......
...@@ -82,7 +82,7 @@ module.exports = (title, content, ok, cancel, focusSelector) => { ...@@ -82,7 +82,7 @@ module.exports = (title, content, ok, cancel, focusSelector) => {
function html () { function html () {
return yo`<div id="modal-dialog" class="${css.modal}"> return yo`<div id="modal-dialog" class="${css.modal}">
<div id="modal-background" class="${css['modalBackground']}"> </div> <div id="modal-background" class="${css['modalBackground']}"> </div>
<div class="${css['modalContent']}"> <div class="${css['modalContent']} bg-warning text-info">
<div class="${css['modalHeader']}"> <div class="${css['modalHeader']}">
<h2></h2> <h2></h2>
<i id="modal-close" title="Close" class="fa fa-times ${css['modalClose']}" aria-hidden="true"></i> <i id="modal-close" title="Close" class="fa fa-times ${css['modalClose']}" aria-hidden="true"></i>
......
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('../styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs` var css = csjs`
.popup { .popup {
...@@ -40,11 +38,9 @@ var css = csjs` ...@@ -40,11 +38,9 @@ var css = csjs`
margin-left : 20%; margin-left : 20%;
margin-bottom : 32px; margin-bottom : 32px;
bottom : 0px; bottom : 0px;
background-color : ${styles.colors.black};
padding : 0; padding : 0;
line-height : 18px; line-height : 18px;
font-size : 12px; font-size : 12px;
border : 1px solid ${styles.colors.grey};
width : 50%; width : 50%;
box-shadow : 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); box-shadow : 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatebottom; -webkit-animation-name: animatebottom;
......
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('../styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs` var css = csjs`
.dropdown { .dropdown {
${styles.terminal.dropdown_Filter_MenuBar}
overflow : visible; overflow : visible;
position : relative; position : relative;
display : flex; display : flex;
...@@ -38,8 +35,7 @@ var css = csjs` ...@@ -38,8 +35,7 @@ var css = csjs`
top : 24px; top : 24px;
left : 0; left : 0;
width : 250px; width : 250px;
background-color : ${styles.appProperties.dropdown_BackgroundColor}; border : 1px solid var(--primary);
border : 1px solid ${styles.appProperties.dropdown_BorderColor};
border-radius : 3px; border-radius : 3px;
border-top : 0; border-top : 0;
} }
......
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('../styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs` var css = csjs`
.modal { .modal {
...@@ -12,47 +10,37 @@ var css = csjs` ...@@ -12,47 +10,37 @@ var css = csjs`
width: 100%; /* Full width */ width: 100%; /* Full width */
height: 100%; /* Full height */ height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */ overflow: auto; /* Enable scroll if needed */
background-color: ${styles.colors.black}; /* Fallback color */
background-color: ${styles.colors.opacityBlack}; /* Black w/ opacity */
word-wrap: break-word; word-wrap: break-word;
} }
.modalHeader { .modalHeader {
padding: 2px 16px; padding: 2px 16px;
background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
color: ${styles.remix.modalDialog_Header_Footer_Color};
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.modalBody { .modalBody {
background-color: ${styles.remix.modalDialog_BackgroundColor_Primary};
color: ${styles.remix.modalDialog_text_Primary};
padding: 1.5em; padding: 1.5em;
line-height: 1.5em; line-height: 1.5em;
} }
.modalBody em{ .modalBody em {
color: ${styles.remix.modalDialog_text_Em}; color: var(--text-info)
} }
.modalBody a{ .modalBody a {
color: ${styles.remix.modalDialog_text_Link}; color: color: var(--text-info)
} }
.modalFooter { .modalFooter {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
padding: 10px 30px; padding: 10px 30px;
background-color: ${styles.remix.modalDialog_Header_Footer_BackgroundColor};
color: ${styles.remix.modalDialog_Header_Footer_Color};
text-align: right; text-align: right;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
} }
.modalContent { .modalContent {
position: relative; position: relative;
background-color: ${styles.colors.black};
margin: auto; margin: auto;
padding: 0; padding: 0;
line-height: 18px; line-height: 18px;
font-size: 12px; font-size: 14px;
border: 1px solid ${styles.colors.grey};
width: 50%; width: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop; -webkit-animation-name: animatetop;
...@@ -62,16 +50,13 @@ var css = csjs` ...@@ -62,16 +50,13 @@ var css = csjs`
} }
.modalFooterOk { .modalFooterOk {
cursor: pointer; cursor: pointer;
color: ${styles.remix.modalDialog_Header_Footer_Color};
} }
.modalFooterCancel { .modalFooterCancel {
margin-left: 1em; margin-left: 1em;
cursor: pointer; cursor: pointer;
color: ${styles.remix.modalDialog_Header_Footer_Color};
} }
.modalClose { .modalClose {
margin: auto 0; margin: auto 0;
color: ${styles.remix.modalDialog_Header_Footer_Color};
cursor: pointer; cursor: pointer;
} }
.modalBackground { .modalBackground {
......
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('../styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs` var css = csjs`
.tooltip { .tooltip {
z-index: 1001; z-index: 1001;
display: inline-block; display: inline-block;
position: fixed; position: fixed;
background-color: ${styles.remix.tooltip_CopyToClipboard_BackgroundColor}; color: var(--primary)
color: ${styles.remix.tooltip_CopyToClipboard_Color};
min-height: 50px; min-height: 50px;
min-width: 290px; min-width: 290px;
padding: 16px 24px 12px; padding: 16px 24px 12px;
......
...@@ -2,7 +2,7 @@ var yo = require('yo-yo') ...@@ -2,7 +2,7 @@ var yo = require('yo-yo')
var css = require('./styles/tooltip-styles') var css = require('./styles/tooltip-styles')
module.exports = function addTooltip (tooltipText) { module.exports = function addTooltip (tooltipText) {
var tooltip = yo`<div class=${css.tooltip}>${tooltipText}</div>` var tooltip = yo`<div class="${css.tooltip} bg-primary">${tooltipText}</div>`
document.body.appendChild(tooltip) document.body.appendChild(tooltip)
setTimeout(function () { setTimeout(function () {
document.body.removeChild(tooltip) document.body.removeChild(tooltip)
......
const yo = require('yo-yo') const yo = require('yo-yo')
const csjs = require('csjs-inject') const csjs = require('csjs-inject')
const styleGuide = require('../app/ui/styles-guide/theme-chooser')
const styles = styleGuide.chooser()
const css = csjs` const css = csjs`
.dragbar { .dragbar {
...@@ -12,11 +10,11 @@ const css = csjs` ...@@ -12,11 +10,11 @@ const css = csjs`
bottom : 0; bottom : 0;
cursor : col-resize; cursor : col-resize;
z-index : 999; z-index : 999;
border-right : ${styles.leftPanel.dragbarBorderRight}; border-right : var(--primary);
} }
.ghostbar { .ghostbar {
width : 3px; width : 3px;
background-color : ${styles.colors.lightBlue}; background-color : var(--primary);
opacity : 0.5; opacity : 0.5;
position : absolute; position : absolute;
cursor : col-resize; cursor : col-resize;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment