mirror of
https://github.com/pulsar-edit/pulsar.git
synced 2024-08-16 14:40:23 +03:00
➡️ Migrate core package 'one-light-ui' into ./packages
This commit is contained in:
Jason Rudolph
parent
84c6b5067b
commit
b120777fac
3
package-lock.json
generated
3
package-lock.json
generated
@ -4149,8 +4149,7 @@
|
||||
"integrity": "sha512-fXUzR34G+uepHq9vzmZZyKK6bGehOt2shX91iNqdecPvoHxR3lwWmAHoUMux7O0rXvClz5z0efVmnxgiDml6hQ=="
|
||||
},
|
||||
"one-light-ui": {
|
||||
"version": "https://www.atom.io/api/packages/one-light-ui/versions/1.12.4/tarball",
|
||||
"integrity": "sha512-uU3Kvl3yPxy3Cdd8DukjRdtdW2f+BuwmgnDKCA3wXrAVKcDDsz+FLUyEYsvSG13EtaAACe2yUIaGa52PMmIS7w=="
|
||||
"version": "file:packages/one-light-ui"
|
||||
},
|
||||
"oniguruma": {
|
||||
"version": "6.2.1",
|
||||
|
||||
@ -130,7 +130,7 @@
|
||||
"one-dark-syntax": "https://www.atom.io/api/packages/one-dark-syntax/versions/1.8.4/tarball",
|
||||
"one-dark-ui": "https://www.atom.io/api/packages/one-dark-ui/versions/1.12.4/tarball",
|
||||
"one-light-syntax": "https://www.atom.io/api/packages/one-light-syntax/versions/1.8.4/tarball",
|
||||
"one-light-ui": "https://www.atom.io/api/packages/one-light-ui/versions/1.12.4/tarball",
|
||||
"one-light-ui": "file:packages/one-light-ui",
|
||||
"oniguruma": "6.2.1",
|
||||
"open-on-github": "https://www.atom.io/api/packages/open-on-github/versions/1.3.1/tarball",
|
||||
"package-generator": "https://www.atom.io/api/packages/package-generator/versions/1.3.0/tarball",
|
||||
@ -178,7 +178,7 @@
|
||||
"base16-tomorrow-dark-theme": "1.5.0",
|
||||
"base16-tomorrow-light-theme": "1.5.0",
|
||||
"one-dark-ui": "1.12.4",
|
||||
"one-light-ui": "1.12.4",
|
||||
"one-light-ui": "file:./packages/one-light-ui",
|
||||
"one-dark-syntax": "1.8.4",
|
||||
"one-light-syntax": "1.8.4",
|
||||
"solarized-dark-syntax": "1.1.5",
|
||||
|
||||
@ -81,7 +81,7 @@ See [RFC 003](https://github.com/atom/atom/blob/master/docs/rfcs/003-consolidate
|
||||
| **one-dark-syntax** | [`atom/one-dark-syntax`][one-dark-syntax] | [#17853](https://github.com/atom/atom/issues/17853) |
|
||||
| **one-dark-ui** | [`atom/one-dark-ui`][one-dark-ui] | [#17854](https://github.com/atom/atom/issues/17854) |
|
||||
| **one-light-syntax** | [`atom/one-light-syntax`][one-light-syntax] | [#17855](https://github.com/atom/atom/issues/17855) |
|
||||
| **one-light-ui** | [`atom/one-light-ui`][one-light-ui] | |
|
||||
| **one-light-ui** | [`./packages/one-light-ui`](./one-light-ui) | |
|
||||
| **open-on-github** | [`atom/open-on-github`][open-on-github] | |
|
||||
| **package-generator** | [`atom/package-generator`][package-generator] | |
|
||||
| **settings-view** | [`atom/settings-view`][settings-view] | |
|
||||
|
||||
1
packages/one-light-ui/.coffeelintignore
Normal file
1
packages/one-light-ui/.coffeelintignore
Normal file
@ -0,0 +1 @@
|
||||
spec/fixtures
|
||||
1
packages/one-light-ui/.gitignore
vendored
Normal file
1
packages/one-light-ui/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
node_modules
|
||||
20
packages/one-light-ui/LICENSE.md
Normal file
20
packages/one-light-ui/LICENSE.md
Normal file
@ -0,0 +1,20 @@
|
||||
Copyright (c) 2014 GitHub Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
42
packages/one-light-ui/README.md
Normal file
42
packages/one-light-ui/README.md
Normal file
@ -0,0 +1,42 @@
|
||||
## One Light UI theme [](https://travis-ci.org/atom/one-light-ui)
|
||||
|
||||
A light UI theme that adapts to most syntax themes.
|
||||
|
||||
|
||||
|
||||
> The font used in the screenshot is [Fira Mono](https://github.com/mozilla/Fira).
|
||||
|
||||
|
||||
### Install
|
||||
|
||||
This theme comes bundled with Atom and can be activated by going to the __Settings > Themes__ section and selecting "One Light" from the __UI Themes__ drop-down menu.
|
||||
|
||||
|
||||
### Settings
|
||||
|
||||
In the theme settings you can:
|
||||
|
||||
- Change the __Font Size__ to scale the whole UI up or down.
|
||||
- Choose between 3 __Tab Sizing__ modes.
|
||||
- Hide the __dock buttons__.
|
||||
|
||||
To make changes, go to `Settings > Themes > One Light UI > Settings` or the cog icon next to the theme picker.
|
||||
|
||||
|
||||
### Customize
|
||||
|
||||
It's also possible to resize only certain areas by adding the following to your `styles.less` (Use DevTools to find the right selectors):
|
||||
|
||||
```css
|
||||
.theme-one-light-ui {
|
||||
.tab-bar { font-size: 18px; }
|
||||
.tree-view { font-size: 14px; }
|
||||
.status-bar { font-size: 12px; }
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### FAQ
|
||||
|
||||
__Why do the colors change when I switch Syntax themes.__
|
||||
This UI theme uses the same background color as the chosen syntax theme. If that syntax theme has a dark background color, it only uses its hue, but otherwise stays light. This lets you use light-dark combos.
|
||||
37
packages/one-light-ui/coffeelint.json
Normal file
37
packages/one-light-ui/coffeelint.json
Normal file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"max_line_length": {
|
||||
"level": "ignore"
|
||||
},
|
||||
"no_empty_param_list": {
|
||||
"level": "error"
|
||||
},
|
||||
"arrow_spacing": {
|
||||
"level": "error"
|
||||
},
|
||||
"no_interpolation_in_single_quotes": {
|
||||
"level": "error"
|
||||
},
|
||||
"no_debugger": {
|
||||
"level": "error"
|
||||
},
|
||||
"prefer_english_operator": {
|
||||
"level": "error"
|
||||
},
|
||||
"colon_assignment_spacing": {
|
||||
"spacing": {
|
||||
"left": 0,
|
||||
"right": 1
|
||||
},
|
||||
"level": "error"
|
||||
},
|
||||
"braces_spacing": {
|
||||
"spaces": 0,
|
||||
"level": "error"
|
||||
},
|
||||
"spacing_after_comma": {
|
||||
"level": "error"
|
||||
},
|
||||
"no_stand_alone_at": {
|
||||
"level": "error"
|
||||
}
|
||||
}
|
||||
35
packages/one-light-ui/index.less
Normal file
35
packages/one-light-ui/index.less
Normal file
@ -0,0 +1,35 @@
|
||||
|
||||
// Atom UI Theme: One
|
||||
|
||||
@import "styles/ui-variables.less";
|
||||
@import "styles/ui-mixins.less";
|
||||
@import "octicon-mixins.less"; // https://github.com/atom/atom/blob/master/static/variables/octicon-mixins.less
|
||||
|
||||
@import "styles/atom.less";
|
||||
@import "styles/badges.less";
|
||||
@import "styles/buttons.less";
|
||||
@import "styles/docks.less";
|
||||
@import "styles/editor.less";
|
||||
@import "styles/git.less";
|
||||
@import "styles/inputs.less";
|
||||
@import "styles/lists.less";
|
||||
@import "styles/messages.less";
|
||||
@import "styles/nav.less";
|
||||
@import "styles/notifications.less";
|
||||
@import "styles/modal.less";
|
||||
@import "styles/panels.less";
|
||||
@import "styles/panes.less";
|
||||
@import "styles/progress.less";
|
||||
@import "styles/tabs.less";
|
||||
@import "styles/text.less";
|
||||
@import "styles/title-bar.less";
|
||||
@import "styles/tooltips.less";
|
||||
@import "styles/tree-view.less";
|
||||
@import "styles/status-bar.less";
|
||||
@import "styles/key-binding.less";
|
||||
@import "styles/sites.less";
|
||||
|
||||
@import "styles/settings.less";
|
||||
@import "styles/packages.less";
|
||||
@import "styles/core.less";
|
||||
@import "styles/config.less";
|
||||
86
packages/one-light-ui/lib/main.coffee
Normal file
86
packages/one-light-ui/lib/main.coffee
Normal file
@ -0,0 +1,86 @@
|
||||
root = document.documentElement
|
||||
themeName = 'one-light-ui'
|
||||
|
||||
|
||||
module.exports =
|
||||
activate: (state) ->
|
||||
atom.config.observe "#{themeName}.fontSize", (value) ->
|
||||
setFontSize(value)
|
||||
|
||||
atom.config.observe "#{themeName}.tabSizing", (value) ->
|
||||
setTabSizing(value)
|
||||
|
||||
atom.config.observe "#{themeName}.tabCloseButton", (value) ->
|
||||
setTabCloseButton(value)
|
||||
|
||||
atom.config.observe "#{themeName}.hideDockButtons", (value) ->
|
||||
setHideDockButtons(value)
|
||||
|
||||
atom.config.observe "#{themeName}.stickyHeaders", (value) ->
|
||||
setStickyHeaders(value)
|
||||
|
||||
# DEPRECATED: This can be removed at some point (added in Atom 1.17/1.18ish)
|
||||
# It removes `layoutMode`
|
||||
if atom.config.get("#{themeName}.layoutMode")
|
||||
atom.config.unset("#{themeName}.layoutMode")
|
||||
|
||||
deactivate: ->
|
||||
unsetFontSize()
|
||||
unsetTabSizing()
|
||||
unsetTabCloseButton()
|
||||
unsetHideDockButtons()
|
||||
unsetStickyHeaders()
|
||||
|
||||
|
||||
# Font Size -----------------------
|
||||
|
||||
setFontSize = (currentFontSize) ->
|
||||
root.style.fontSize = "#{currentFontSize}px"
|
||||
|
||||
unsetFontSize = ->
|
||||
root.style.fontSize = ''
|
||||
|
||||
|
||||
# Tab Sizing -----------------------
|
||||
|
||||
setTabSizing = (tabSizing) ->
|
||||
root.setAttribute("theme-#{themeName}-tabsizing", tabSizing.toLowerCase())
|
||||
|
||||
unsetTabSizing = ->
|
||||
root.removeAttribute("theme-#{themeName}-tabsizing")
|
||||
|
||||
|
||||
# Tab Close Button -----------------------
|
||||
|
||||
setTabCloseButton = (tabCloseButton) ->
|
||||
if tabCloseButton is 'Left'
|
||||
root.setAttribute("theme-#{themeName}-tab-close-button", 'left')
|
||||
else
|
||||
unsetTabCloseButton()
|
||||
|
||||
unsetTabCloseButton = ->
|
||||
root.removeAttribute("theme-#{themeName}-tab-close-button")
|
||||
|
||||
|
||||
# Dock Buttons -----------------------
|
||||
|
||||
setHideDockButtons = (hideDockButtons) ->
|
||||
if hideDockButtons
|
||||
root.setAttribute("theme-#{themeName}-dock-buttons", 'hidden')
|
||||
else
|
||||
unsetHideDockButtons()
|
||||
|
||||
unsetHideDockButtons = ->
|
||||
root.removeAttribute("theme-#{themeName}-dock-buttons")
|
||||
|
||||
|
||||
# Sticky Headers -----------------------
|
||||
|
||||
setStickyHeaders = (stickyHeaders) ->
|
||||
if stickyHeaders
|
||||
root.setAttribute("theme-#{themeName}-sticky-headers", 'sticky')
|
||||
else
|
||||
unsetStickyHeaders()
|
||||
|
||||
unsetStickyHeaders = ->
|
||||
root.removeAttribute("theme-#{themeName}-sticky-headers")
|
||||
78
packages/one-light-ui/package.json
Normal file
78
packages/one-light-ui/package.json
Normal file
@ -0,0 +1,78 @@
|
||||
{
|
||||
"name": "one-light-ui",
|
||||
"theme": "ui",
|
||||
"version": "1.12.5",
|
||||
"description": "Atom One light UI theme",
|
||||
"keywords": [
|
||||
"light",
|
||||
"adaptive",
|
||||
"ui"
|
||||
],
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/atom/one-light-ui",
|
||||
"main": "lib/main",
|
||||
"engines": {
|
||||
"atom": ">0.40.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"coffeelint": "^1.9.7"
|
||||
},
|
||||
"configSchema": {
|
||||
"fontSize": {
|
||||
"title": "Font Size",
|
||||
"description": "Change the font size for the UI.",
|
||||
"type": "integer",
|
||||
"default": 12,
|
||||
"enum": [
|
||||
10,
|
||||
11,
|
||||
12,
|
||||
13,
|
||||
14,
|
||||
15,
|
||||
16,
|
||||
17,
|
||||
18,
|
||||
19,
|
||||
20
|
||||
],
|
||||
"order": 1
|
||||
},
|
||||
"tabSizing": {
|
||||
"title": "Tab Sizing",
|
||||
"description": "In Even mode all tabs will be the same size. Great for quickly closing many tabs. In Maximum mode the tabs will expand to take up the full width. In Minimum mode the tabs will only take as little space as needed and also show longer file names.",
|
||||
"type": "string",
|
||||
"default": "Even",
|
||||
"enum": [
|
||||
"Even",
|
||||
"Maximum",
|
||||
"Minimum"
|
||||
],
|
||||
"order": 2
|
||||
},
|
||||
"tabCloseButton": {
|
||||
"title": "Tab Close Button",
|
||||
"description": "Choose the position of the close button shown in tabs.",
|
||||
"type": "string",
|
||||
"default": "Right",
|
||||
"enum": [
|
||||
"Left",
|
||||
"Right"
|
||||
],
|
||||
"order": 3
|
||||
},
|
||||
"hideDockButtons": {
|
||||
"title": "Hide dock toggle buttons",
|
||||
"description": "Note: When hiding the toggle buttons, opening a dock needs to be done by using the keyboard or other alternatives.",
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"order": 4
|
||||
},
|
||||
"stickyHeaders": {
|
||||
"title": "Make tree-view project headers sticky",
|
||||
"type": "boolean",
|
||||
"default": "false",
|
||||
"order": 5
|
||||
}
|
||||
}
|
||||
}
|
||||
36
packages/one-light-ui/spec/theme-spec.coffee
Normal file
36
packages/one-light-ui/spec/theme-spec.coffee
Normal file
@ -0,0 +1,36 @@
|
||||
themeName = 'one-light-ui'
|
||||
|
||||
describe "#{themeName} theme", ->
|
||||
beforeEach ->
|
||||
waitsForPromise ->
|
||||
atom.packages.activatePackage(themeName)
|
||||
|
||||
it "allows the font size to be set via config", ->
|
||||
expect(document.documentElement.style.fontSize).toBe '12px'
|
||||
|
||||
atom.config.set("#{themeName}.fontSize", '10')
|
||||
expect(document.documentElement.style.fontSize).toBe '10px'
|
||||
|
||||
it "allows the tab sizing to be set via config", ->
|
||||
atom.config.set("#{themeName}.tabSizing", 'Maximum')
|
||||
expect(document.documentElement.getAttribute("theme-#{themeName}-tabsizing")).toBe 'maximum'
|
||||
|
||||
it "allows the tab sizing to be set via config", ->
|
||||
atom.config.set("#{themeName}.tabSizing", 'Minimum')
|
||||
expect(document.documentElement.getAttribute("theme-#{themeName}-tabsizing")).toBe 'minimum'
|
||||
|
||||
it "allows the tab close button to be shown on the left via config", ->
|
||||
atom.config.set("#{themeName}.tabCloseButton", 'Left')
|
||||
expect(document.documentElement.getAttribute("theme-#{themeName}-tab-close-button")).toBe 'left'
|
||||
|
||||
it "allows the dock toggle buttons to be hidden via config", ->
|
||||
atom.config.set("#{themeName}.hideDockButtons", true)
|
||||
expect(document.documentElement.getAttribute("theme-#{themeName}-dock-buttons")).toBe 'hidden'
|
||||
|
||||
it "allows the tree-view headers to be sticky via config", ->
|
||||
atom.config.set("#{themeName}.stickyHeaders", true)
|
||||
expect(document.documentElement.getAttribute("theme-#{themeName}-sticky-headers")).toBe 'sticky'
|
||||
|
||||
it "allows the tree-view headers to not be sticky via config", ->
|
||||
atom.config.set("#{themeName}.stickyHeaders", false)
|
||||
expect(document.documentElement.getAttribute("theme-#{themeName}-sticky-headers")).toBe null
|
||||
67
packages/one-light-ui/styles/atom.less
Normal file
67
packages/one-light-ui/styles/atom.less
Normal file
@ -0,0 +1,67 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: @font-size;
|
||||
}
|
||||
|
||||
atom-workspace {
|
||||
background-color: @app-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Scrollbars ------------------------------------
|
||||
|
||||
.scrollbars-visible-always {
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: @scrollbar-background-color;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
border: 3px solid @scrollbar-background-color;
|
||||
background: @scrollbar-color;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: @scrollbar-background-color;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:vertical:active {
|
||||
border-radius: 0;
|
||||
border-left-width: 0;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:horizontal:active {
|
||||
border-radius: 0;
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
atom-text-editor {
|
||||
::-webkit-scrollbar-track {
|
||||
background: @scrollbar-background-color-editor;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background: @scrollbar-background-color-editor;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-color: @scrollbar-background-color-editor;
|
||||
background: @scrollbar-color-editor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Move to a better place, not sure where it gets used
|
||||
.caret {
|
||||
border-top: 5px solid #fff;
|
||||
margin-top: -1px;
|
||||
}
|
||||
14
packages/one-light-ui/styles/badges.less
Normal file
14
packages/one-light-ui/styles/badges.less
Normal file
@ -0,0 +1,14 @@
|
||||
.badge {
|
||||
padding: @ui-padding/4 @ui-padding/2.5;
|
||||
min-width: @ui-padding*1.25;
|
||||
.text(highlight);
|
||||
border-radius: @ui-size*2;
|
||||
background-color: @badge-background-color;
|
||||
|
||||
// Icon ----------------------
|
||||
&.icon {
|
||||
font-size: @ui-size;
|
||||
padding: @ui-padding-icon @ui-padding-icon*1.5;
|
||||
}
|
||||
|
||||
}
|
||||
186
packages/one-light-ui/styles/buttons.less
Normal file
186
packages/one-light-ui/styles/buttons.less
Normal file
@ -0,0 +1,186 @@
|
||||
|
||||
@btn-border: 1px solid @button-border-color;
|
||||
@btn-padding: 0 @ui-size/1.25;
|
||||
|
||||
// Mixins -----------------------
|
||||
|
||||
.btn-default (@color, @hover-color, @selected-color, @text-color) {
|
||||
color: @text-color;
|
||||
text-shadow: none;
|
||||
border: @btn-border;
|
||||
background-color: @color;
|
||||
background-image: linear-gradient(lighten(@color, 2%), @color);
|
||||
|
||||
&:hover {
|
||||
color: @text-color-highlight;
|
||||
background-image: linear-gradient(lighten(@hover-color, 2%), @hover-color);
|
||||
}
|
||||
&:active {
|
||||
background: darken(@color, 4%);
|
||||
box-shadow: none;
|
||||
}
|
||||
&.selected {
|
||||
background: @selected-color;
|
||||
}
|
||||
&.selected:focus,
|
||||
&.selected:hover {
|
||||
background: lighten(@selected-color, 2%);
|
||||
}
|
||||
&:focus {
|
||||
.focus(); // unfortunately :focus styles stay even after releasing mouse.
|
||||
}
|
||||
}
|
||||
|
||||
.btn-variant (@color) {
|
||||
@_text-color: contrast(@color, white, hsl(0,0%,20%), 33% );
|
||||
.btn-default(
|
||||
@color,
|
||||
lighten(@color, 3%),
|
||||
saturate(darken(@color, 12%), 20%),
|
||||
@text-color-highlight
|
||||
);
|
||||
color: @_text-color;
|
||||
|
||||
& when (@ui-lightness > 50%) {
|
||||
border-color: transparent; // hide border on light backgrounds
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @_text-color;
|
||||
}
|
||||
&:focus {
|
||||
border-color: transparent;
|
||||
background-clip: padding-box;
|
||||
box-shadow: inset 0 0 0 1px fade(@base-border-color, 50%), 0 0 0 1px @color;
|
||||
}
|
||||
|
||||
&.icon:before {
|
||||
color: @_text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Buttons -----------------------
|
||||
|
||||
.btn {
|
||||
height: initial;
|
||||
padding: @btn-padding;
|
||||
font-size: @ui-size;
|
||||
line-height: @ui-line-height;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn.btn-default {
|
||||
.btn-default(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color);
|
||||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
.btn-variant(@accent-bg-color);
|
||||
}
|
||||
.btn.btn-info {
|
||||
.btn-variant(@background-color-info);
|
||||
}
|
||||
.btn.btn-success {
|
||||
.btn-variant(@background-color-success);
|
||||
}
|
||||
.btn.btn-warning {
|
||||
.btn-variant(@background-color-warning);
|
||||
}
|
||||
.btn.btn-error {
|
||||
.btn-variant(@background-color-error);
|
||||
}
|
||||
|
||||
|
||||
// Button Sizes -----------------------
|
||||
|
||||
.btn.btn-xs,
|
||||
.btn-group-xs > .btn {
|
||||
font-size: @ui-size*.8;
|
||||
line-height: @ui-line-height;
|
||||
padding: @btn-padding;
|
||||
}
|
||||
.btn.btn-sm,
|
||||
.btn-group-sm > .btn {
|
||||
font-size: @ui-size*.9;
|
||||
line-height: @ui-line-height;
|
||||
padding: @btn-padding;
|
||||
}
|
||||
.btn.btn-lg,
|
||||
.btn-group-lg > .btn {
|
||||
font-size: @ui-size * 1.5;
|
||||
line-height: @ui-line-height;
|
||||
padding: @btn-padding;
|
||||
}
|
||||
|
||||
|
||||
// Button Group -----------------------
|
||||
|
||||
.btn-group > .btn {
|
||||
z-index: 0;
|
||||
&:hover {
|
||||
z-index: 0;
|
||||
}
|
||||
&.btn:focus {
|
||||
z-index: 1;
|
||||
.focus();
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left: @btn-border;
|
||||
}
|
||||
&:last-child,
|
||||
&.selected:last-child {
|
||||
border-right: @btn-border;
|
||||
}
|
||||
|
||||
// hide border on light backgrounds
|
||||
& when (@ui-lightness > 50%) {
|
||||
&.btn-primary:first-child,
|
||||
&.btn-info:first-child,
|
||||
&.btn-success:first-child,
|
||||
&.btn-warning:first-child,
|
||||
&.btn-error:first-child {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
&.btn-primary:last-child,
|
||||
&.btn-info:last-child,
|
||||
&.btn-success:last-child,
|
||||
&.btn-warning:last-child,
|
||||
&.btn-error:last-child {
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&.selected:first-child,
|
||||
&.selected:last-child {
|
||||
color: @button-text-color-selected;
|
||||
border-color: @button-border-color-selected;
|
||||
}
|
||||
|
||||
& when (@ui-lightness > 50%) {
|
||||
&.selected + .btn {
|
||||
border-left-color: @button-border-color-selected;
|
||||
}
|
||||
&.selected + .selected {
|
||||
border-left-color: mix(@button-border-color, @button-border-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected:focus {
|
||||
border-color: @button-background-color-selected;
|
||||
box-shadow: inset 0 0 0 1px fade(@base-border-color, 50%), 0 0 0 1px @button-background-color-selected;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button Icons -----------------------
|
||||
|
||||
.btn.icon:before {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 1.333333em;
|
||||
vertical-align: -.1em;
|
||||
}
|
||||
156
packages/one-light-ui/styles/config.less
Normal file
156
packages/one-light-ui/styles/config.less
Normal file
@ -0,0 +1,156 @@
|
||||
|
||||
// Theme config
|
||||
// This gets changed from the theme settings
|
||||
|
||||
@theme-tabsizing: ~'theme-@{ui-theme-name}-tabsizing';
|
||||
@theme-dockButtons: ~'theme-@{ui-theme-name}-dock-buttons';
|
||||
@theme-stickyHeaders: ~'theme-@{ui-theme-name}-sticky-headers';
|
||||
@theme-closeButton: ~'theme-@{ui-theme-name}-tab-close-button';
|
||||
|
||||
|
||||
// Tabs ----------------------------------------------
|
||||
|
||||
@tab-min-width: 7em; // ~ icon + 6 characters
|
||||
|
||||
// Even (default)
|
||||
|
||||
.tab-bar {
|
||||
.tab,
|
||||
.tab.active {
|
||||
flex: 1 1 0;
|
||||
max-width: 22em;
|
||||
min-width: @tab-min-width;
|
||||
}
|
||||
atom-dock & {
|
||||
.tab,
|
||||
.tab.active {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Turn this into a config
|
||||
// Truncates the beginning instead
|
||||
// .title.title.title {
|
||||
// direction: rtl; // change direction
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
// Maximum (full width)
|
||||
|
||||
[@{theme-tabsizing}="maximum"] .tab-bar {
|
||||
.tab,
|
||||
.tab.active {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Minimum (show long paths)
|
||||
|
||||
[@{theme-tabsizing}="minimum"] .tab-bar {
|
||||
.tab,
|
||||
.tab.active {
|
||||
flex: 0 0 auto;
|
||||
min-width: 2.75em;
|
||||
max-width: @tab-min-width * 3.3;
|
||||
}
|
||||
atom-dock {
|
||||
.tab,
|
||||
.tab.active {
|
||||
max-width: @tab-min-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tabs: close button position ------------------------------
|
||||
|
||||
[@{theme-closeButton}="left"] {
|
||||
|
||||
.tab-bar .tab {
|
||||
.close-icon {
|
||||
right: auto;
|
||||
left: @icon-padding-right;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Hide docks toggle buttons ------------------------------
|
||||
|
||||
[@{theme-dockButtons}="hidden"] {
|
||||
|
||||
// Hide docks when not open
|
||||
.atom-dock-inner:not(.atom-dock-open) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Hide toggle buttons
|
||||
.atom-dock-toggle-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Sticky Projects ------------------------------
|
||||
|
||||
[@{theme-stickyHeaders}="sticky"] {
|
||||
|
||||
.tree-view {
|
||||
.project-root-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
padding-left: 5px;
|
||||
padding-right: 10px;
|
||||
border-bottom: 1px solid @base-border-color;
|
||||
background-color: @tree-view-background-color;
|
||||
}
|
||||
.project-root.project-root {
|
||||
margin-left: -5px;
|
||||
margin-right: -10px;
|
||||
|
||||
// Disable selection
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Add selection back
|
||||
&.selected .project-root-header {
|
||||
background-color: @background-color-selected;
|
||||
}
|
||||
}
|
||||
&:focus .selected .project-root-header.project-root-header {
|
||||
background: @button-background-color-selected;
|
||||
}
|
||||
|
||||
// Fix sticky header from covering auto-revealed files
|
||||
.entry.file.selected {
|
||||
padding-top: @ui-tab-height;
|
||||
margin-top: -@ui-tab-height;
|
||||
}
|
||||
|
||||
// Fix sticky header from covering auto-revealed directories when using up/down keys
|
||||
// for directories, scroll test moves to .header, see https://github.com/atom/tree-view/blob/d2857ad4d7eeb7dad5cf94b33257a8740211480e/lib/tree-view.coffee#L839
|
||||
.entry.directory.selected:not(.project-root) {
|
||||
& > .header {
|
||||
padding-top: @ui-tab-height;
|
||||
margin-top: -@ui-tab-height;
|
||||
}
|
||||
&::before {
|
||||
margin-top: @ui-tab-height;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix above directory is not being clickable
|
||||
.entry.directory:not(.project-root) > .header {
|
||||
z-index: 2;
|
||||
}
|
||||
.entry.directory.selected:not(.project-root) > .header {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
25
packages/one-light-ui/styles/core.less
Normal file
25
packages/one-light-ui/styles/core.less
Normal file
@ -0,0 +1,25 @@
|
||||
// Misc
|
||||
|
||||
.preview-pane .results-view .path-match-number {
|
||||
// show number also on selected item
|
||||
color: inherit;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.tool-panel.incompatible-packages {
|
||||
// incompatible-packages isn't really a tool-panel and more a whole pane
|
||||
.text(normal);
|
||||
background-color: @level-2-color;
|
||||
}
|
||||
|
||||
// Styleguide ----------------------------------------------
|
||||
|
||||
.styleguide {
|
||||
// Modal
|
||||
atom-panel.modal:after {
|
||||
position: absolute; // prevent overlay backdrop from leaking outside
|
||||
left: -@ui-padding;
|
||||
right: -@ui-padding;
|
||||
bottom: -@ui-padding;
|
||||
}
|
||||
}
|
||||
43
packages/one-light-ui/styles/docks.less
Normal file
43
packages/one-light-ui/styles/docks.less
Normal file
@ -0,0 +1,43 @@
|
||||
|
||||
// Docks ------------------------------
|
||||
|
||||
// Make handles not take up any space when dock is open
|
||||
.atom-dock-resize-handle {
|
||||
position: absolute;
|
||||
z-index: 11; // same as toggle buttons
|
||||
|
||||
&.left {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
&.right {
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
&.bottom {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Add borders
|
||||
.atom-dock-inner.atom-dock-open.left {
|
||||
border-right: 1px solid @base-border-color;
|
||||
}
|
||||
.atom-dock-inner.atom-dock-open.right {
|
||||
border-left: 1px solid @base-border-color;
|
||||
}
|
||||
|
||||
// Make toggle buttons cover ^ border
|
||||
.atom-dock-toggle-button.left {
|
||||
margin-left: -2px;
|
||||
}
|
||||
.atom-dock-toggle-button.right {
|
||||
margin-right: -2px;
|
||||
}
|
||||
.atom-dock-inner:not(.atom-dock-open) .atom-dock-toggle-button.bottom {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
15
packages/one-light-ui/styles/dropdowns.less
Normal file
15
packages/one-light-ui/styles/dropdowns.less
Normal file
@ -0,0 +1,15 @@
|
||||
.dropdown-menu {
|
||||
background-color: @overlay-background-color;
|
||||
border-radius: @component-border-radius;
|
||||
border: 1px solid @base-border-color;
|
||||
padding: 0;
|
||||
|
||||
> li > a {
|
||||
.text(normal);
|
||||
}
|
||||
|
||||
> li > a:hover {
|
||||
.text(highlight);
|
||||
background-color: @background-color-highlight;
|
||||
}
|
||||
}
|
||||
44
packages/one-light-ui/styles/editor.less
Normal file
44
packages/one-light-ui/styles/editor.less
Normal file
@ -0,0 +1,44 @@
|
||||
|
||||
// Editor in a panel
|
||||
|
||||
// TODO: Find a better selector, maybe a new class like atom-text-editor[medium]
|
||||
atom-panel-container atom-text-editor.is-focused {
|
||||
.focus();
|
||||
}
|
||||
|
||||
|
||||
// Mini
|
||||
// Usually just single line inputs
|
||||
|
||||
atom-text-editor[mini] {
|
||||
overflow: auto;
|
||||
font-size: @ui-input-size;
|
||||
line-height: @ui-line-height;
|
||||
max-height: @ui-line-height * 5; // rows
|
||||
padding-left: @ui-padding/3;
|
||||
border-radius: @component-border-radius;
|
||||
color: @text-color-highlight;
|
||||
border: 1px solid @input-border-color;
|
||||
background-color: @input-background-color;
|
||||
|
||||
.placeholder-text {
|
||||
color: @text-color-subtle;
|
||||
}
|
||||
|
||||
.selection .region {
|
||||
background-color: @input-selection-color;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
border-color: @accent-color;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&.is-focused {
|
||||
.focus();
|
||||
background-color: @input-background-color-focus;
|
||||
.selection .region {
|
||||
background-color: @input-selection-color-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
6
packages/one-light-ui/styles/git.less
Normal file
6
packages/one-light-ui/styles/git.less
Normal file
@ -0,0 +1,6 @@
|
||||
.status { .text(normal); }
|
||||
.status-added { .text(success); } // green
|
||||
.status-ignored { .text(subtle); } // faded
|
||||
.status-modified { .text(warning); } // orange
|
||||
.status-removed { .text(error); } // red
|
||||
.status-renamed { .text(info); } // blue
|
||||
87
packages/one-light-ui/styles/inputs.less
Normal file
87
packages/one-light-ui/styles/inputs.less
Normal file
@ -0,0 +1,87 @@
|
||||
|
||||
//
|
||||
// Checkbox
|
||||
// -------------------------
|
||||
|
||||
.input-checkbox {
|
||||
&:active {
|
||||
background-color: @accent-color;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
background-color: @accent-text-color;
|
||||
}
|
||||
&:checked {
|
||||
background-color: @accent-color;
|
||||
}
|
||||
|
||||
&:indeterminate {
|
||||
background-color: @accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Radio
|
||||
// -------------------------
|
||||
|
||||
.input-radio {
|
||||
&:before {
|
||||
background-color: @accent-text-color;
|
||||
}
|
||||
&:active {
|
||||
background-color: @accent-color;
|
||||
}
|
||||
&:checked {
|
||||
background-color: @accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Range (Slider)
|
||||
// -------------------------
|
||||
|
||||
.input-range {
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: @accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Toggle
|
||||
// -------------------------
|
||||
|
||||
.input-toggle {
|
||||
&:checked {
|
||||
background-color: @accent-color;
|
||||
}
|
||||
&:before {
|
||||
background-color: @accent-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// States -------------------------
|
||||
|
||||
.input-text,
|
||||
.input-search,
|
||||
.input-number,
|
||||
.input-textarea,
|
||||
.input-select,
|
||||
.input-color {
|
||||
&:focus {
|
||||
.focus();
|
||||
}
|
||||
}
|
||||
|
||||
.input-text,
|
||||
.input-search,
|
||||
.input-number,
|
||||
.input-textarea {
|
||||
&:invalid {
|
||||
.invalid();
|
||||
}
|
||||
}
|
||||
12
packages/one-light-ui/styles/key-binding.less
Normal file
12
packages/one-light-ui/styles/key-binding.less
Normal file
@ -0,0 +1,12 @@
|
||||
.key-binding {
|
||||
display: inline-block;
|
||||
margin-left: @ui-padding-icon;
|
||||
padding: 0 @ui-padding/4;
|
||||
line-height: 2;
|
||||
font-family: inherit;
|
||||
font-size: max(1em, @ui-size*.85);
|
||||
letter-spacing: @ui-size/10;
|
||||
border-radius: @component-border-radius;
|
||||
color: @accent-bg-text-color;
|
||||
background-color: @accent-bg-color;
|
||||
}
|
||||
150
packages/one-light-ui/styles/lists.less
Normal file
150
packages/one-light-ui/styles/lists.less
Normal file
@ -0,0 +1,150 @@
|
||||
.list-group,
|
||||
.list-tree {
|
||||
li:not(.list-nested-item),
|
||||
li.list-nested-item > .list-item {
|
||||
.text(normal);
|
||||
}
|
||||
|
||||
.generate-list-item-text-color(@class) {
|
||||
li:not(.list-nested-item).text-@{class},
|
||||
li.list-nested-item.text-@{class} > .list-item {
|
||||
.text(@class);
|
||||
}
|
||||
}
|
||||
.generate-list-item-text-color(subtle);
|
||||
.generate-list-item-text-color(info);
|
||||
.generate-list-item-text-color(success);
|
||||
.generate-list-item-text-color(warning);
|
||||
.generate-list-item-text-color(error);
|
||||
.generate-list-item-text-color(selected);
|
||||
|
||||
.generate-list-item-status-color(@color, @status) {
|
||||
li:not(.list-nested-item).status-@{status},
|
||||
li.list-nested-item.status-@{status} > .list-item {
|
||||
color: @color;
|
||||
}
|
||||
|
||||
li:not(.list-nested-item).selected.status-@{status},
|
||||
li.list-nested-item.selected.status-@{status} > .list-item {
|
||||
color: @color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.generate-list-item-status-color(@text-color-added, added);
|
||||
.generate-list-item-status-color(@text-color-ignored, ignored);
|
||||
.generate-list-item-status-color(@text-color-modified, modified);
|
||||
.generate-list-item-status-color(@text-color-removed, removed);
|
||||
.generate-list-item-status-color(@text-color-renamed, renamed);
|
||||
|
||||
li:not(.list-nested-item).selected,
|
||||
li.list-nested-item.selected > .list-item {
|
||||
.text(selected);
|
||||
}
|
||||
|
||||
.no-icon {
|
||||
padding-left: calc(@ui-padding-icon ~"+" @component-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
.list-tree.has-collapsable-children .list-nested-item > .list-item::before {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.select-list ol.list-group,
|
||||
&.select-list ol.list-group {
|
||||
li.two-lines {
|
||||
.secondary-line {
|
||||
color: @text-color-subtle;
|
||||
}
|
||||
&.selected .secondary-line {
|
||||
color: fade(@text-color-highlight, 50%);
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset icon to allow nesting
|
||||
.icon {
|
||||
display: initial;
|
||||
height: initial;
|
||||
}
|
||||
|
||||
// We want to highlight the background of the list items because we dont
|
||||
// know their size.
|
||||
li.selected {
|
||||
background-color: @background-color-selected;
|
||||
&:before{ display: none; }
|
||||
}
|
||||
|
||||
&.mark-active {
|
||||
@active-icon-size: 14px;
|
||||
|
||||
// pad in front of the text where the icon would be We'll pad the non-
|
||||
// active items with a 'fake' icon so other classes can pad the item
|
||||
// without worrying about the icon padding.
|
||||
li:before {
|
||||
content: '';
|
||||
background-color: transparent;
|
||||
position: static;
|
||||
display: inline-block;
|
||||
left: auto; right: auto;
|
||||
height: @active-icon-size;
|
||||
width: @active-icon-size;
|
||||
font-size: @active-icon-size;
|
||||
}
|
||||
> li:not(.active):before {
|
||||
margin-right: @ui-padding-icon;
|
||||
}
|
||||
li.active {
|
||||
.octicon(check, @active-icon-size);
|
||||
&:before {
|
||||
margin-right: @ui-padding-icon;
|
||||
color: @text-color-success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-list.popover-list {
|
||||
@popover-list-padding: @ui-padding/4;
|
||||
background-color: @overlay-background-color;
|
||||
box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.3);
|
||||
padding: @popover-list-padding;
|
||||
border-radius: @component-border-radius;
|
||||
|
||||
atom-text-editor[mini] {
|
||||
margin-bottom: @popover-list-padding;
|
||||
}
|
||||
|
||||
ol.list-group {
|
||||
margin-top: @popover-list-padding;
|
||||
}
|
||||
|
||||
.list-group li {
|
||||
padding-left: @popover-list-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-sortable {
|
||||
li {
|
||||
line-height: 2.5;
|
||||
}
|
||||
|
||||
// For sortable lists in the settings view
|
||||
li.ui-sortable-placeholder {
|
||||
visibility: visible !important;
|
||||
background-color: darken(@pane-item-background-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
li.ui-draggable-dragging,
|
||||
li.ui-sortable-helper {
|
||||
line-height: @ui-line-height;
|
||||
height: @ui-line-height;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
list-style: none;
|
||||
padding: 0 @ui-padding;
|
||||
background: @background-color-highlight;
|
||||
box-shadow: 0 0 1px @base-border-color;
|
||||
}
|
||||
16
packages/one-light-ui/styles/messages.less
Normal file
16
packages/one-light-ui/styles/messages.less
Normal file
@ -0,0 +1,16 @@
|
||||
background-tips ul.background-message {
|
||||
font-weight: 500;
|
||||
font-size: 2em;
|
||||
color: @text-color-faded;
|
||||
|
||||
.message {
|
||||
padding: 0 @component-padding * 10;
|
||||
|
||||
.keystroke {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
padding: .1em .4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
125
packages/one-light-ui/styles/modal.less
Normal file
125
packages/one-light-ui/styles/modal.less
Normal file
@ -0,0 +1,125 @@
|
||||
|
||||
@modal-padding: @ui-padding/2 @ui-padding/1.5;
|
||||
@modal-width: @ui-size * 50;
|
||||
|
||||
atom-panel-container.modal {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
}
|
||||
|
||||
atom-panel.modal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: @modal-width;
|
||||
margin: 0 auto;
|
||||
left: initial;
|
||||
color: @text-color;
|
||||
background-color: transparent;
|
||||
padding: @ui-padding/2;
|
||||
|
||||
&.from-top {
|
||||
top: @component-padding * 5;
|
||||
}
|
||||
|
||||
atom-text-editor[mini] {
|
||||
margin-bottom: @ui-padding/2;
|
||||
}
|
||||
|
||||
.select-list ol.list-group,
|
||||
&.select-list ol.list-group {
|
||||
border: 1px solid @overlay-border-color;
|
||||
background-color: lighten(@overlay-background-color, 2%);
|
||||
|
||||
&:empty {
|
||||
border: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: @modal-padding;
|
||||
line-height: @ui-line-height;
|
||||
border-bottom: 1px solid @overlay-border-color;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.icon::before {
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
.icon.status {
|
||||
float: right;
|
||||
margin-left: @ui-padding-icon;
|
||||
&:before {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.status.icon {
|
||||
color: @text-color-selected;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.select-list .key-binding {
|
||||
margin-top: -1px;
|
||||
margin-left: @ui-padding/2;
|
||||
margin-right: calc( -@ui-padding/3 ~"+" 1px);
|
||||
}
|
||||
|
||||
.select-list .primary-line {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& > * {
|
||||
position: relative; // fixes stacking order
|
||||
}
|
||||
|
||||
.command-palette {
|
||||
padding: 1px; // prevents the box-shadow of the input from being cut off
|
||||
background-color: @overlay-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Container
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
background-color: @overlay-background-color;
|
||||
border-radius: @component-border-radius*2;
|
||||
box-shadow: 0 6px 12px -2px hsla(0,0%,0%,.4);
|
||||
}
|
||||
|
||||
// Backdrop
|
||||
// TODO: Add extra wrapper to translate individually or easier positioning
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
background: @overlay-backdrop-color;
|
||||
opacity: @overlay-backdrop-opacity;
|
||||
backface-visibility: hidden; // fixes scrollbar on retina screens
|
||||
-webkit-animation: overlay-fade .24s cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@-webkit-keyframes overlay-fade {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: @overlay-backdrop-opacity; }
|
||||
}
|
||||
|
||||
}
|
||||
25
packages/one-light-ui/styles/nav.less
Normal file
25
packages/one-light-ui/styles/nav.less
Normal file
@ -0,0 +1,25 @@
|
||||
.nav-tabs {
|
||||
border-bottom: 1px solid @base-border-color;
|
||||
li {
|
||||
a,
|
||||
&.active a {
|
||||
border: none;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
&.active a,
|
||||
&.active a:hover {
|
||||
background-color: @background-color-highlight;
|
||||
border: none;
|
||||
color: @text-color-selected;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
&.active a {
|
||||
background-color: @tab-background-color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
packages/one-light-ui/styles/notifications.less
Normal file
45
packages/one-light-ui/styles/notifications.less
Normal file
@ -0,0 +1,45 @@
|
||||
|
||||
atom-notifications {
|
||||
font-size: @ui-size * 1.2;
|
||||
|
||||
atom-notification {
|
||||
width: 32em;
|
||||
&.has-detail {
|
||||
width: 32em;
|
||||
}
|
||||
|
||||
&:first-child.has-close .message {
|
||||
padding-right: 9em;
|
||||
}
|
||||
&:only-child.has-close .message,
|
||||
&.has-close .message {
|
||||
padding-right: 2.5em;
|
||||
}
|
||||
.item {
|
||||
padding: @ui-padding/2;
|
||||
}
|
||||
|
||||
.detail,
|
||||
.description {
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
&.icon:before {
|
||||
padding-top: .85em;
|
||||
}
|
||||
.close {
|
||||
width: 2.5em;
|
||||
height: 3em;
|
||||
line-height: 3em;
|
||||
font-size: inherit;
|
||||
}
|
||||
.close-all.btn {
|
||||
top: .5em;
|
||||
right: 2.5em;
|
||||
}
|
||||
.btn-copy-report {
|
||||
line-height: 2em;
|
||||
margin-left: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
231
packages/one-light-ui/styles/packages.less
Normal file
231
packages/one-light-ui/styles/packages.less
Normal file
@ -0,0 +1,231 @@
|
||||
// Overrides packages
|
||||
|
||||
// find-and-replace + project-find ---------------------------
|
||||
|
||||
.find-and-replace,
|
||||
.project-find {
|
||||
padding: @ui-padding/4;
|
||||
.input-block-item {
|
||||
padding: @ui-padding/4;
|
||||
}
|
||||
}
|
||||
|
||||
// find-and-replace
|
||||
.find-and-replace {
|
||||
.header,
|
||||
.input-block {
|
||||
min-width: @ui-size*22;
|
||||
}
|
||||
|
||||
.input-block-item {
|
||||
flex: 1 1 @ui-size*22;
|
||||
}
|
||||
.input-block-item--flex {
|
||||
flex: 100 1 @ui-size*22;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-group-options .btn {
|
||||
font-size: @ui-size*1.1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn-group-options .btn,
|
||||
.btn-group-options .btn.option-selection,
|
||||
.btn-group-options .btn.option-whole-word {
|
||||
padding: 0;
|
||||
font-size: @ui-input-size; // keep same as text input
|
||||
}
|
||||
|
||||
.find-container atom-text-editor {
|
||||
padding-right: @ui-size*5; // leave some room for the results count
|
||||
}
|
||||
.find-meta-container {
|
||||
top: 0;
|
||||
font-size: @ui-size;
|
||||
line-height: @ui-size*2.5;
|
||||
}
|
||||
}
|
||||
|
||||
// project-find
|
||||
.project-find {
|
||||
.header,
|
||||
.input-block {
|
||||
min-width: @ui-size*15;
|
||||
}
|
||||
|
||||
.input-block-item {
|
||||
flex: 1 1 @ui-size*14;
|
||||
}
|
||||
.input-block-item--flex {
|
||||
flex: 100 1 @ui-size*20;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: @ui-size*1.1;
|
||||
padding: 0;
|
||||
}
|
||||
.btn-group-options .btn {
|
||||
padding: 0;
|
||||
font-size: @ui-input-size; // keep same as text input
|
||||
}
|
||||
}
|
||||
|
||||
// Colorize find-and-replace based on results
|
||||
& when (@ui-hue >= 190) and (@ui-hue <= 340) {
|
||||
.find-and-replace {
|
||||
&.has-no-results .find-container atom-text-editor[mini].is-focused {
|
||||
.invalid();
|
||||
.selection .region {
|
||||
background-color: mix(@text-color-error, @input-background-color, 50%);
|
||||
}
|
||||
.cursor {
|
||||
border-color: @text-color-error;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-results .find-container atom-text-editor[mini].is-focused {
|
||||
.valid();
|
||||
.selection .region {
|
||||
background-color: mix(@text-color-success, @input-background-color, 50%);
|
||||
}
|
||||
.cursor {
|
||||
border-color: @text-color-success;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-results .find-container .result-counter { color: @text-color-success; }
|
||||
&.has-no-results .find-container .result-counter { color: @text-color-error; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Timecop ---------------------------
|
||||
|
||||
.timecop {
|
||||
.timecop-panel {
|
||||
padding: @component-padding/2;
|
||||
background-color: @level-2-color;
|
||||
}
|
||||
|
||||
.tool-panel {
|
||||
padding: @component-padding/2;
|
||||
background-color: @level-2-color;
|
||||
}
|
||||
|
||||
.inset-panel {
|
||||
border: 1px solid @base-border-color;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
.text(highlight);
|
||||
border-color: @base-border-color;
|
||||
background-color: @level-1-color;
|
||||
}
|
||||
|
||||
.list-item .inline-block {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Command Palette + Fuzzy Finder ---------------------------
|
||||
|
||||
.command-palette .list-group .character-match,
|
||||
.fuzzy-finder .list-group .character-match {
|
||||
color: @accent-only-text-color;
|
||||
}
|
||||
|
||||
|
||||
// Deprecation Cop ---------------------------
|
||||
|
||||
.deprecation-cop {
|
||||
.deprecation-overview {
|
||||
background-color: @level-2-color;
|
||||
border-bottom: 1px solid @base-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tool Bar ---------------------------
|
||||
|
||||
.tool-bar {
|
||||
// Make it look the same as other panels
|
||||
background-color: @level-3-color;
|
||||
border: none;
|
||||
|
||||
// just a single border + more spacing
|
||||
&.tool-bar-horizontal .tool-bar-spacer {
|
||||
border-left: 0 none;
|
||||
margin-left: .5em;
|
||||
margin-right: .5em;
|
||||
}
|
||||
&.tool-bar-vertical .tool-bar-spacer {
|
||||
border-bottom: 0 none;
|
||||
margin-top: .5em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
// only show button styles on hover
|
||||
button.tool-bar-btn {
|
||||
background-color: @level-3-color;
|
||||
background-image: none;
|
||||
border-color: @level-3-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// GitHub package ---------------------------------------------------
|
||||
|
||||
.github {
|
||||
|
||||
// Fix focus styles
|
||||
// Since it's not possible to add a padding to <atom-text-editor>
|
||||
// a pseudo element is used to add the border when focused.
|
||||
&-CommitView-editor atom-text-editor.is-focused {
|
||||
box-shadow: none;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
border: 2px solid;
|
||||
border-color: inherit;
|
||||
border-radius: @component-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
// Add focus styles since :focus doesn't work
|
||||
&-CommitView-coAuthorEditor {
|
||||
&.is-focused {
|
||||
.focus();
|
||||
}
|
||||
&.is-open {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
.Select-option {
|
||||
&.is-focused {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
color: @accent-text-color;
|
||||
background-color: @accent-color;
|
||||
}
|
||||
}
|
||||
.Select-menu-outer {
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: 100%;
|
||||
border: 2px solid @accent-color;
|
||||
background-color: @overlay-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
64
packages/one-light-ui/styles/panels.less
Normal file
64
packages/one-light-ui/styles/panels.less
Normal file
@ -0,0 +1,64 @@
|
||||
|
||||
// Panels
|
||||
|
||||
atom-panel {
|
||||
.text(normal);
|
||||
position: relative;
|
||||
border-bottom: 1px solid @base-border-color;
|
||||
|
||||
&.top {
|
||||
border-right: 1px solid @base-border-color;
|
||||
}
|
||||
&.left {
|
||||
border-right: 1px solid @base-border-color;
|
||||
}
|
||||
&.right {
|
||||
border-left: 1px solid @base-border-color;
|
||||
}
|
||||
&.bottom {
|
||||
border-right: 1px solid @base-border-color;
|
||||
}
|
||||
&.footer:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
&.tool-panel:empty {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
&.bordered {
|
||||
border: 1px solid @base-border-color;
|
||||
border-radius: @component-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.inset-panel {
|
||||
position: relative;
|
||||
background-color: @inset-panel-background-color;
|
||||
border-radius: @component-border-radius;
|
||||
&.bordered {
|
||||
border: 1px solid @base-border-color;
|
||||
border-radius: @component-border-radius;
|
||||
}
|
||||
& .panel-heading {
|
||||
border-color: @inset-panel-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
.text(normal);
|
||||
border-bottom: 1px solid @panel-heading-border-color;
|
||||
background-color: @panel-heading-background-color;
|
||||
|
||||
.btn {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
.btn-default(
|
||||
lighten(@button-background-color, 10%),
|
||||
lighten(@button-background-color-hover, 10%),
|
||||
lighten(@button-background-color-selected, 10%),
|
||||
lighten(@text-color, 10%)
|
||||
);
|
||||
}
|
||||
}
|
||||
22
packages/one-light-ui/styles/panes.less
Normal file
22
packages/one-light-ui/styles/panes.less
Normal file
@ -0,0 +1,22 @@
|
||||
|
||||
atom-pane-container {
|
||||
|
||||
atom-pane {
|
||||
position: relative;
|
||||
border-right: 1px solid @base-border-color;
|
||||
border-bottom: 1px solid @base-border-color;
|
||||
|
||||
.item-views {
|
||||
// prevent atom-text-editor from leaking ouside might improve performance
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Hide right-most border
|
||||
atom-pane:only-child,
|
||||
atom-pane-axis.pane-row > atom-pane:last-child,
|
||||
atom-pane-axis.pane-column:last-child > atom-pane {
|
||||
border-right: none;
|
||||
}
|
||||
94
packages/one-light-ui/styles/progress.less
Normal file
94
packages/one-light-ui/styles/progress.less
Normal file
@ -0,0 +1,94 @@
|
||||
|
||||
// Spinner ----------------------
|
||||
|
||||
@spinner-duration: 1.2s;
|
||||
|
||||
.loading-spinner(@size) {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
font-size: @size;
|
||||
background: radial-gradient(@accent-color .1em, transparent .11em);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 10; // prevent sibling elements from getting their own layers
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 1em;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 1em;
|
||||
border: 2px solid;
|
||||
-webkit-animation: spinner-animation @spinner-duration infinite;
|
||||
-webkit-animation-fill-mode: backwards;
|
||||
}
|
||||
&::before {
|
||||
border-color: @accent-color transparent transparent transparent;
|
||||
}
|
||||
&::after {
|
||||
border-color: transparent lighten(@accent-color, 15%) transparent transparent;
|
||||
-webkit-animation-delay: @spinner-duration/2;
|
||||
}
|
||||
|
||||
&.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spinner-animation {
|
||||
0% { transform: rotateZ( 0deg); -webkit-animation-timing-function: cubic-bezier(0, 0, .8, .2); }
|
||||
50% { transform: rotateZ(180deg); -webkit-animation-timing-function: cubic-bezier(.2, .8, 1, 1); }
|
||||
100% { transform: rotateZ(360deg); }
|
||||
}
|
||||
|
||||
// Spinner sizes
|
||||
.loading-spinner-tiny { .loading-spinner(16px); &::before, &::after { border-width: 1px; } }
|
||||
.loading-spinner-small { .loading-spinner(32px); }
|
||||
.loading-spinner-medium { .loading-spinner(48px); }
|
||||
.loading-spinner-large { .loading-spinner(64px); }
|
||||
|
||||
|
||||
|
||||
|
||||
// Progress Bar ----------------------
|
||||
|
||||
@progress-height: 8px;
|
||||
@progress-buffer-color: fade(@progress-background-color, 20%);
|
||||
|
||||
progress {
|
||||
-webkit-appearance: none;
|
||||
height: @progress-height;
|
||||
border-radius: @component-border-radius;
|
||||
background-color: @input-background-color;
|
||||
box-shadow: inset 0 0 0 1px @input-border-color;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
border-radius: @component-border-radius;
|
||||
background-color: @progress-background-color;
|
||||
}
|
||||
|
||||
// Is buffering (when no value is set)
|
||||
&:indeterminate {
|
||||
background-image:
|
||||
linear-gradient(-45deg, transparent 33%, @progress-buffer-color 33%,
|
||||
@progress-buffer-color 66%, transparent 66%);
|
||||
background-size: 25px @progress-height, 100% 100%, 100% 100%;
|
||||
|
||||
// Plays animation for 1min (12runs) at normal speed,
|
||||
// then slows down frame-rate for 9mins (108runs) to limit CPU usage
|
||||
-webkit-animation: progress-buffering 5s linear 12,
|
||||
progress-buffering 5s 60s steps(10) 108;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes progress-buffering {
|
||||
100% { background-position: -100px 0px; }
|
||||
}
|
||||
140
packages/one-light-ui/styles/settings.less
Normal file
140
packages/one-light-ui/styles/settings.less
Normal file
@ -0,0 +1,140 @@
|
||||
|
||||
// Settings
|
||||
|
||||
// Modular Scale (1.125): http://www.modularscale.com/?1&em&1.125&web&table
|
||||
@ms-6: @ui-size * 2.027;
|
||||
@ms-5: @ui-size * 1.802;
|
||||
@ms-4: @ui-size * 1.602;
|
||||
@ms-3: @ui-size * 1.424;
|
||||
@ms-2: @ui-size * 1.266;
|
||||
@ms-1: @ui-size * 1.125;
|
||||
@ms-0: @ui-size * 1;
|
||||
@ms_1: @ui-size * 0.889;
|
||||
@ms_2: @ui-size * 0.790;
|
||||
|
||||
|
||||
|
||||
.settings-view {
|
||||
|
||||
// Menu ------------------------------
|
||||
|
||||
.config-menu {
|
||||
position: relative;
|
||||
min-width: @ui-size * 15;
|
||||
max-width: @ui-size * 20;
|
||||
border-width: 0 1px 0 0;
|
||||
border-image: linear-gradient(@level-2-color 10px, @base-border-color 200px) 0 1 0 0 stretch;
|
||||
background: @level-2-color;
|
||||
|
||||
.btn {
|
||||
white-space: initial;
|
||||
font-size: @ms_1;
|
||||
line-height: 1;
|
||||
padding: @ui-padding/3 @ui-padding/2;
|
||||
&::before {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.nav {
|
||||
& > li > a {
|
||||
padding: @ui-padding/2 @ui-padding;
|
||||
line-height: @ui-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Sections ------------------------------
|
||||
|
||||
& > .panels {
|
||||
background-color: @level-2-color;
|
||||
}
|
||||
|
||||
.section-container {
|
||||
max-width: @ui-size*60;
|
||||
}
|
||||
.sub-section {
|
||||
margin: @ui-padding*3 0;
|
||||
}
|
||||
|
||||
.section,
|
||||
.section:first-child,
|
||||
.section:last-child {
|
||||
padding: @ui-padding*3;
|
||||
}
|
||||
|
||||
.themes-panel .control-group {
|
||||
margin-top: @ui-padding*2;
|
||||
}
|
||||
|
||||
|
||||
// Titles ------------------------------
|
||||
|
||||
.section .section-heading {
|
||||
margin-bottom: @ui-padding/1.5;
|
||||
}
|
||||
|
||||
.sub-section-heading.icon:before,
|
||||
.section-heading.icon:before {
|
||||
margin-right: @ui-padding-icon;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Cards ------------------------------
|
||||
|
||||
.package-card {
|
||||
padding: @ui-padding;
|
||||
.meta-controls .status-indicator {
|
||||
width: @ui-padding/4;
|
||||
&:before {
|
||||
content: "\00a0"; // fixes 0 height
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Components ------------------------------
|
||||
|
||||
.icon::before {
|
||||
color: @text-color-subtle;
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
margin: @ui-padding 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
font-size: @ui-size*1.25;
|
||||
height: @ui-line-height;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.update-all-button {
|
||||
font-size: .75em;
|
||||
}
|
||||
|
||||
.install-button {
|
||||
.btn-variant(@accent-bg-color);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
background-color: @background-color-selected;
|
||||
&:active,
|
||||
&:checked {
|
||||
background-color: @accent-color;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
background-color: @accent-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.search-container .btn {
|
||||
font-size: @ui-input-size;
|
||||
}
|
||||
|
||||
}
|
||||
13
packages/one-light-ui/styles/sites.less
Normal file
13
packages/one-light-ui/styles/sites.less
Normal file
@ -0,0 +1,13 @@
|
||||
// Site Colors
|
||||
|
||||
.ui-site(@num, @color) {
|
||||
.ui-site-@{num} {
|
||||
background-color: @color;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-site(1, @ui-site-color-1);
|
||||
.ui-site(2, @ui-site-color-2);
|
||||
.ui-site(3, @ui-site-color-3);
|
||||
.ui-site(4, @ui-site-color-4);
|
||||
.ui-site(5, @ui-site-color-5);
|
||||
97
packages/one-light-ui/styles/status-bar.less
Normal file
97
packages/one-light-ui/styles/status-bar.less
Normal file
@ -0,0 +1,97 @@
|
||||
|
||||
@status-bar-height: @ui-tab-height; // same as tabs
|
||||
@status-bar-padding: @ui-padding;
|
||||
|
||||
.status-bar {
|
||||
font-size: @ui-size;
|
||||
height: @status-bar-height;
|
||||
line-height: @status-bar-height;
|
||||
background-color: @level-3-color;
|
||||
|
||||
.flexbox-repaint-hack {
|
||||
padding: 0; // override default
|
||||
}
|
||||
|
||||
// underlines should only be used for external links
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
margin: 0; // override default
|
||||
padding: 0 @status-bar-padding/2;
|
||||
vertical-align: top;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: @level-3-color-hover;
|
||||
}
|
||||
&:active {
|
||||
background-color: @level-3-color-active;
|
||||
}
|
||||
|
||||
// reset on child inline-block
|
||||
.inline-block {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar-right {
|
||||
.inline-block {
|
||||
margin-left: 0; // override default
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.icon::before {
|
||||
font-size: 1.33333em; // should be 16px with a default of 12px
|
||||
width: auto; // use natural width
|
||||
line-height: 1;
|
||||
height: 1em; // same as line-height
|
||||
margin-right: .25em;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Package overrides -------------------------------
|
||||
|
||||
.status-bar.status-bar {
|
||||
|
||||
// Read-only -> Remove hover effect
|
||||
.is-read-only, // <- use this class in packages
|
||||
status-bar-launch-mode,
|
||||
busy-signal {
|
||||
&:hover,
|
||||
&:active,
|
||||
.inline-block:hover,
|
||||
.inline-block:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove underline
|
||||
.package-updates-status-view,
|
||||
.github-ChangedFilesCount {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove margin for icon without text
|
||||
status-bar-launch-mode::before, // Launch mode
|
||||
.about-release-notes::before, // New release squirrel
|
||||
.PortalStatusBarIndicator .icon::before, // Teletype
|
||||
.icon.is-icon-only::before {
|
||||
margin-right: 0;
|
||||
}
|
||||
.github-PushPull-label.is-push:empty { // GitHub package when nothing to push
|
||||
margin-right: -.25em;
|
||||
}
|
||||
}
|
||||
250
packages/one-light-ui/styles/tabs.less
Normal file
250
packages/one-light-ui/styles/tabs.less
Normal file
@ -0,0 +1,250 @@
|
||||
|
||||
// Tabs
|
||||
|
||||
@tab-border: 1px solid @tab-border-color;
|
||||
@title-padding: .66em;
|
||||
@icon-padding-top: .5em; // 2.5 (total) - 1.5 (text) / 2
|
||||
@icon-padding-right: .5em;
|
||||
|
||||
.tab-bar {
|
||||
position: relative;
|
||||
height: @ui-tab-height;
|
||||
box-shadow: inset 0 -1px 0 @tab-border-color;
|
||||
background: @tab-bar-background-color;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
border-radius: 0;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
// Tab ----------------------
|
||||
|
||||
.tab {
|
||||
position: relative;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: inherit;
|
||||
font-size: inherit;
|
||||
line-height: @ui-tab-height;
|
||||
color: @tab-text-color;
|
||||
background-color: @tab-background-color;
|
||||
box-shadow: inherit;
|
||||
border-left: @tab-border;
|
||||
&.active {
|
||||
color: @tab-text-color-active;
|
||||
background-color: @tab-background-color-active;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:first-of-type {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&:last-of-type {
|
||||
// use box-shadow to not take up any space
|
||||
box-shadow: inset 0 -1px 0 @tab-border-color, 1px 0 0 @base-border-color;
|
||||
}
|
||||
&.active:last-of-type {
|
||||
box-shadow: 1px 0 0 @base-border-color;
|
||||
}
|
||||
|
||||
|
||||
// Title ----------------------
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
margin: 0 @title-padding;
|
||||
}
|
||||
|
||||
// VCS coloring ----------------------
|
||||
&:not(.active) .status-added { color: @tab-inactive-status-added; }
|
||||
&:not(.active) .status-modified { color: @tab-inactive-status-modified; }
|
||||
|
||||
|
||||
// Icons ----------------------
|
||||
|
||||
.title.title:before {
|
||||
margin-right: .3em;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
font-size: 1.125em;
|
||||
vertical-align: -.0625em; // Adjust center for the 0.1em font-size increase
|
||||
}
|
||||
|
||||
// Close icon ----------------------
|
||||
|
||||
.close-icon {
|
||||
top: @icon-padding-top;
|
||||
right: @icon-padding-right;
|
||||
z-index: 2;
|
||||
font-size: 1em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
border-radius: @component-border-radius;
|
||||
background-color: inherit;
|
||||
overflow: hidden;
|
||||
transform: scale(0);
|
||||
transition: transform .08s;
|
||||
&:hover {
|
||||
color: @accent-text-color;
|
||||
background-color: @accent-color;
|
||||
}
|
||||
&:active {
|
||||
background-color: fade(@accent-color, 50%);
|
||||
}
|
||||
&::before {
|
||||
z-index: 1;
|
||||
font-size: 1.1em;
|
||||
vertical-align: -.05em; // Adjust center for the 0.1em font-size increase
|
||||
width: auto;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
&:hover .close-icon {
|
||||
transform: scale(1);
|
||||
transition-duration: .16s;
|
||||
}
|
||||
}
|
||||
|
||||
// Modified icon ----------------------
|
||||
|
||||
.tab.modified {
|
||||
&:hover .close-icon {
|
||||
color: @accent-color;
|
||||
&:hover {
|
||||
color: @accent-bg-text-color;
|
||||
}
|
||||
}
|
||||
&:not(:hover) .close-icon {
|
||||
top: @icon-padding-top;
|
||||
right: @icon-padding-right;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
line-height: 1.5;
|
||||
color: @accent-color;
|
||||
border-radius: @component-border-radius;
|
||||
border: none;
|
||||
transform: scale(1);
|
||||
&::before {
|
||||
content: "\f052";
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tabs in the docks ----------------------
|
||||
|
||||
atom-dock & {
|
||||
.tab.active {
|
||||
background-color: @tool-panel-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dragging ----------------------
|
||||
|
||||
.tab.is-dragging {
|
||||
opacity: .5;
|
||||
|
||||
.close-icon,
|
||||
&:before {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
|
||||
// bar
|
||||
&:before {
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
width: 2px;
|
||||
height: @ui-tab-height;
|
||||
background-color: @accent-color;
|
||||
}
|
||||
|
||||
// arrow
|
||||
&:after {
|
||||
z-index: 0;
|
||||
top: @ui-tab-height/2;
|
||||
margin: -4px 0 0 -3px;
|
||||
border-radius: 0;
|
||||
border: 4px solid @accent-color;
|
||||
transform: rotate(45deg);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:before {
|
||||
margin-left: -2px;
|
||||
}
|
||||
&:after {
|
||||
transform: none;
|
||||
margin-left: -10px;
|
||||
border-color: transparent @accent-color transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Overrides ----------------------
|
||||
|
||||
// keep tabs same size when active
|
||||
.tab,
|
||||
.tab.active {
|
||||
padding-right: 0;
|
||||
.title {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Active pane marker --------------
|
||||
|
||||
atom-pane-axis > atom-pane.active,
|
||||
atom-pane-container > atom-pane.pane {
|
||||
.tab.active:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: -1px; // cover left border
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: @accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
// hide marker in docks
|
||||
atom-dock .tab-bar .tab::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
// Custom tabs --------------
|
||||
|
||||
.tab-bar .tab.active {
|
||||
&[data-type$="Editor"],
|
||||
&[data-type$="AboutView"],
|
||||
&[data-type$="TimecopView"],
|
||||
&[data-type$="StyleguideView"],
|
||||
&[data-type="MarkdownPreviewView"] {
|
||||
color: @tab-text-color-editor;
|
||||
background-color: @tab-background-color-editor; // Match syntax background color
|
||||
}
|
||||
}
|
||||
84
packages/one-light-ui/styles/text.less
Normal file
84
packages/one-light-ui/styles/text.less
Normal file
@ -0,0 +1,84 @@
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
line-height: 1em;
|
||||
margin-bottom: 15px
|
||||
}
|
||||
h1 { font-size: 2em; }
|
||||
h2 { font-size: 1.5em; }
|
||||
h3 { font-size: 1.2em; }
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
pre {
|
||||
box-shadow: none;
|
||||
color: @text-color;
|
||||
background: @inset-panel-background-color;
|
||||
border-radius: @component-border-radius;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
.text(highlight);
|
||||
background: @background-color-highlight;
|
||||
border-radius: @component-border-radius;
|
||||
}
|
||||
|
||||
.selected { .text(highlight); }
|
||||
|
||||
.text-smaller { font-size: 0.9em; }
|
||||
|
||||
.text-subtle { .text(subtle); }
|
||||
.text-highlight { .text(highlight); }
|
||||
|
||||
.text-error { .text(error); }
|
||||
.text-info {
|
||||
.text(info);
|
||||
&:hover { color: @text-color-info; }
|
||||
}
|
||||
.text-warning {
|
||||
.text(warning);
|
||||
&:hover { color: @text-color-warning; }
|
||||
}
|
||||
.text-success {
|
||||
.text(success);
|
||||
&:hover { color: @text-color-success; }
|
||||
}
|
||||
|
||||
.highlight-mixin {
|
||||
padding: 1px 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
.highlight-mixin();
|
||||
font-weight: 700;
|
||||
color: @text-color-highlight;
|
||||
background-color: @background-color-highlight;
|
||||
}
|
||||
|
||||
.highlight-color(@name, @background-color) {
|
||||
.highlight-@{name} {
|
||||
.highlight-mixin();
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
text-shadow: 0 1px 0px hsla(0,0%,0%,.2);
|
||||
background-color: @background-color;
|
||||
}
|
||||
}
|
||||
.highlight-color( info, @background-color-info);
|
||||
.highlight-color(warning, @background-color-warning);
|
||||
.highlight-color( error, @background-color-error);
|
||||
.highlight-color(success, @background-color-success);
|
||||
|
||||
.results-view .path-details.list-item {
|
||||
color: darken(@text-color-highlight, 18%);
|
||||
}
|
||||
4
packages/one-light-ui/styles/title-bar.less
Normal file
4
packages/one-light-ui/styles/title-bar.less
Normal file
@ -0,0 +1,4 @@
|
||||
.title-bar {
|
||||
height: 22px; // remove 1px since there is no border
|
||||
border-bottom: none;
|
||||
}
|
||||
53
packages/one-light-ui/styles/tooltips.less
Normal file
53
packages/one-light-ui/styles/tooltips.less
Normal file
@ -0,0 +1,53 @@
|
||||
.tooltip {
|
||||
white-space: nowrap;
|
||||
font-size: @ui-size*1.15;
|
||||
|
||||
&.in {
|
||||
opacity: 1;
|
||||
transition: opacity .12s ease-out;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
line-height: 1;
|
||||
padding: @ui-padding*.5 @ui-padding*.65;
|
||||
border-radius: @component-border-radius;
|
||||
background-color: @tooltip-background-color;
|
||||
color: @tooltip-text-color;
|
||||
white-space: nowrap;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.keystroke {
|
||||
font-size: max(1em, @ui-size*.85);
|
||||
padding: .1em .4em;
|
||||
margin: 0 @ui-padding*-.35 0 @ui-padding*.25;
|
||||
border-radius: max(2px, @component-border-radius / 2);
|
||||
color: @tooltip-text-key-color;
|
||||
background: @tooltip-background-key-color;
|
||||
}
|
||||
|
||||
&.top .tooltip-arrow {
|
||||
border-top-color: @tooltip-background-color;
|
||||
}
|
||||
&.top-left .tooltip-arrow {
|
||||
border-top-color: @tooltip-background-color;
|
||||
}
|
||||
&.top-right .tooltip-arrow {
|
||||
border-top-color: @tooltip-background-color;
|
||||
}
|
||||
&.right .tooltip-arrow {
|
||||
border-right-color: @tooltip-background-color;
|
||||
}
|
||||
&.left .tooltip-arrow {
|
||||
border-left-color: @tooltip-background-color;
|
||||
}
|
||||
&.bottom .tooltip-arrow {
|
||||
border-bottom-color: @tooltip-background-color;
|
||||
}
|
||||
&.bottom-left .tooltip-arrow {
|
||||
border-bottom-color: @tooltip-background-color;
|
||||
}
|
||||
&.bottom-right .tooltip-arrow {
|
||||
border-bottom-color: @tooltip-background-color;
|
||||
}
|
||||
}
|
||||
85
packages/one-light-ui/styles/tree-view.less
Normal file
85
packages/one-light-ui/styles/tree-view.less
Normal file
@ -0,0 +1,85 @@
|
||||
@tree-view-height: @ui-line-height;
|
||||
|
||||
.tree-view {
|
||||
font-size: @ui-size;
|
||||
background: @tree-view-background-color;
|
||||
|
||||
.project-root.project-root {
|
||||
&:before {
|
||||
height: @ui-tab-height;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
& > .header .name {
|
||||
line-height: @ui-tab-height;
|
||||
}
|
||||
}
|
||||
|
||||
// Selected state
|
||||
.selected:before {
|
||||
background: @background-color-selected;
|
||||
}
|
||||
|
||||
// Focus + selected state
|
||||
&:focus {
|
||||
.selected.list-item > .name, // files
|
||||
.selected.list-nested-item > .list-item > .name, // folders
|
||||
.selected.list-nested-item > .header:before { // arrow icon
|
||||
color: contrast(@button-background-color-selected);
|
||||
}
|
||||
.selected:before {
|
||||
background: @button-background-color-selected;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-one-dark-ui .tree-view .project-root.project-root::before {
|
||||
border-top: 1px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.tree-view-resizer {
|
||||
.tree-view-resize-handle {
|
||||
width: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Variable height, based on ems
|
||||
.list-group li:not(.list-nested-item),
|
||||
.list-tree li:not(.list-nested-item),
|
||||
.list-group li.list-nested-item > .list-item,
|
||||
.list-tree li.list-nested-item > .list-item {
|
||||
line-height: @tree-view-height;
|
||||
}
|
||||
|
||||
.list-group .selected::before,
|
||||
.list-tree .selected::before {
|
||||
height: @tree-view-height;
|
||||
}
|
||||
|
||||
// icon
|
||||
.list-group .icon,
|
||||
.list-tree .icon {
|
||||
display: inline-block;
|
||||
height: inherit;
|
||||
&::before {
|
||||
top: initial;
|
||||
line-height: inherit;
|
||||
height: inherit;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
// Arrow icon
|
||||
.list-group,
|
||||
.list-tree {
|
||||
.header.header.header.header::before {
|
||||
top: initial;
|
||||
line-height: inherit;
|
||||
height: inherit;
|
||||
vertical-align: top;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
.tree-view .project-root-header.project-root-header.project-root-header.project-root-header::before {
|
||||
line-height: @ui-tab-height;
|
||||
}
|
||||
49
packages/one-light-ui/styles/ui-mixins.less
Normal file
49
packages/one-light-ui/styles/ui-mixins.less
Normal file
@ -0,0 +1,49 @@
|
||||
// Pattern matching; ish is cray.
|
||||
// http://lesscss.org/#-pattern-matching-and-guard-expressions
|
||||
|
||||
.text(normal) {
|
||||
font-weight: normal;
|
||||
color: @text-color;
|
||||
}
|
||||
.text(subtle) {
|
||||
font-weight: normal;
|
||||
color: @text-color-subtle;
|
||||
}
|
||||
.text(highlight) {
|
||||
font-weight: normal;
|
||||
color: @text-color-highlight;
|
||||
}
|
||||
.text(selected) {
|
||||
.text(highlight)
|
||||
}
|
||||
|
||||
.text(info) {
|
||||
color: @text-color-info;
|
||||
}
|
||||
.text(success) {
|
||||
color: @text-color-success;
|
||||
}
|
||||
.text(warning) {
|
||||
color: @text-color-warning;
|
||||
}
|
||||
.text(error) {
|
||||
color: @text-color-error;
|
||||
}
|
||||
|
||||
.focus() {
|
||||
outline: none;
|
||||
border-color: @accent-color;
|
||||
box-shadow: 0 0 0 1px @accent-color;
|
||||
}
|
||||
|
||||
.valid() {
|
||||
border-color: @text-color-success;
|
||||
box-shadow: 0 0 0 1px @text-color-success;
|
||||
background-color: mix(@text-color-success, @input-background-color, 10%);
|
||||
}
|
||||
|
||||
.invalid() {
|
||||
border-color: @text-color-error;
|
||||
box-shadow: 0 0 0 1px @text-color-error;
|
||||
background-color: mix(@text-color-error, @input-background-color, 10%);
|
||||
}
|
||||
132
packages/one-light-ui/styles/ui-variables-custom.less
Normal file
132
packages/one-light-ui/styles/ui-variables-custom.less
Normal file
@ -0,0 +1,132 @@
|
||||
|
||||
// ONE light UI variables
|
||||
// ----------------------------------------------
|
||||
|
||||
@import "syntax-variables";
|
||||
|
||||
.ui-syntax-color() { @syntax-background-color: hsl(220,1%,98%); } .ui-syntax-color(); // fallback color
|
||||
@ui-syntax-color: @syntax-background-color;
|
||||
|
||||
// Color guards -----------------
|
||||
@ui-s-h: hue(@ui-syntax-color);
|
||||
.ui-hue() when (@ui-s-h = 0) { @ui-hue: 220; } // Use blue hue when no saturation
|
||||
.ui-hue() when (@ui-s-h > 0) { @ui-hue: @ui-s-h; }
|
||||
.ui-hue();
|
||||
|
||||
@ui-saturation: min( saturation(@ui-syntax-color), 24%); // max saturation
|
||||
@ui-lightness: max( lightness(@ui-syntax-color), 92%); // min lightness
|
||||
|
||||
// Main colors -----------------
|
||||
@ui-fg: hsl(@ui-hue, @ui-saturation, @ui-lightness - 72%);
|
||||
@ui-bg: hsl(@ui-hue, @ui-saturation, @ui-lightness); // normalized @syntax-background-color
|
||||
@ui-border: darken(@level-3-color, 6%);
|
||||
|
||||
|
||||
|
||||
|
||||
// Custom variables
|
||||
// These variables are only used in this theme
|
||||
// ----------------------------------------------
|
||||
|
||||
@ui-theme-name: one-light-ui;
|
||||
|
||||
// Text (Custom) -----------------
|
||||
@text-color-faded: fade(@text-color, 30%);
|
||||
|
||||
@text-color-added: @text-color-success; // green
|
||||
@text-color-ignored: @text-color-subtle; // faded
|
||||
@text-color-modified: @text-color-warning; // orange
|
||||
@text-color-removed: @text-color-error; // red
|
||||
@text-color-renamed: @text-color-info; // blue
|
||||
|
||||
|
||||
// Background (Custom) -----------------
|
||||
@level-1-color: lighten(@base-background-color, 4%);
|
||||
@level-2-color: @base-background-color;
|
||||
@level-3-color: darken(@base-background-color, 6%);
|
||||
|
||||
@level-3-color-hover: darken(@level-3-color, 6%);
|
||||
@level-3-color-active: darken(@level-3-color, 3%);
|
||||
|
||||
|
||||
// Accent (Custom) -----------------
|
||||
@accent-luma: luma( hsl(@ui-hue, 50%, 50%) ); // get lightness of current hue
|
||||
|
||||
// used for marker, inputs (smaller things)
|
||||
@accent-color: mix( hsv( @ui-hue, 60%, 60%), hsl( @ui-hue, 100%, 68%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors)
|
||||
@accent-text-color: contrast(@accent-color, hsl(@ui-hue,100%,16%), #fff, 40% );
|
||||
|
||||
// used for button, tooltip (larger things)
|
||||
@accent-bg-color: mix( hsv( @ui-hue, 40%, 72%), hsl( @ui-hue, 100%, 66%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors)
|
||||
@accent-bg-text-color: contrast(@accent-bg-color, hsl(@ui-hue,100%,10%), #fff, 40% );
|
||||
|
||||
// used for text only
|
||||
@accent-only-text-color: mix( hsv( @ui-hue, 70%, 50%), hsl( @ui-hue, 100%, 60%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors)
|
||||
|
||||
|
||||
// Components (Custom) -----------------
|
||||
@badge-background-color: @background-color-selected;
|
||||
|
||||
@button-text-color-selected: @accent-bg-text-color;
|
||||
@button-border-color-selected: @accent-color;
|
||||
|
||||
@checkbox-background-color: fade(@accent-bg-color, 33%);
|
||||
|
||||
@input-background-color-focus: hsl(@ui-hue, 100%, 96%);
|
||||
@input-selection-color: mix( hsv( @ui-hue, 33%, 95%), hsl( @ui-hue, 100%, 98%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors)
|
||||
@input-selection-color-focus: mix( hsv( @ui-hue, 44%, 90%), hsl( @ui-hue, 100%, 94%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors)
|
||||
|
||||
@overlay-backdrop-color: hsl(@ui-hue, @ui-saturation*0.4, @ui-lightness*0.8);
|
||||
@overlay-backdrop-opacity: .66;
|
||||
|
||||
@progress-background-color: @accent-color;
|
||||
|
||||
@scrollbar-color: darken(@level-3-color, 14%);
|
||||
@scrollbar-background-color: @level-3-color; // replaced `transparent` with a solid color to test https://github.com/atom/one-light-ui/issues/4
|
||||
@scrollbar-color-editor: contrast(@ui-syntax-color, darken(@ui-syntax-color, 14%), lighten(@ui-syntax-color, 9%) );
|
||||
@scrollbar-background-color-editor: @ui-syntax-color;
|
||||
|
||||
@tab-text-color: @text-color-subtle;
|
||||
@tab-text-color-active: @text-color-highlight;
|
||||
@tab-text-color-editor: contrast(@ui-syntax-color, lighten(@ui-syntax-color, 70%), @text-color-highlight );
|
||||
@tab-background-color-editor: @ui-syntax-color;
|
||||
@tab-inactive-status-added: fade(@text-color-success, 77%);
|
||||
@tab-inactive-status-modified: fade(@text-color-warning, 77%);
|
||||
|
||||
@tooltip-background-color: @accent-bg-color;
|
||||
@tooltip-text-color: @accent-bg-text-color;
|
||||
@tooltip-text-key-color: @tooltip-background-color;
|
||||
@tooltip-background-key-color: @tooltip-text-color;
|
||||
|
||||
|
||||
// Sizes (Custom) -----------------
|
||||
|
||||
@ui-size: 1em;
|
||||
@ui-input-size: @ui-size*1.15;
|
||||
@ui-padding: @ui-size*1.5;
|
||||
@ui-padding-pane: @ui-size*.5;
|
||||
@ui-padding-icon: @ui-padding/3.3;
|
||||
@ui-line-height: @ui-size*2;
|
||||
@ui-tab-height: @ui-size*2.5;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Packages variables
|
||||
// These variables are used to override packages
|
||||
// ----------------------------------------------
|
||||
|
||||
@settings-list-background-color: darken(@level-2-color, 3%);
|
||||
@theme-config-box-shadow: inset 0 1px 2px hsla(0, 0%, 0%, .2), 0 1px 0 hsla(0, 0%, 100%, .3);
|
||||
@theme-config-box-shadow-selected: inset 0 1px 3px hsla(0, 0%, 0%, .2);
|
||||
@theme-config-border-selected: hsla(0, 0%, 0%, .5);
|
||||
|
||||
|
||||
// Debug
|
||||
// Output variables to the top of the UI
|
||||
// -------------------------------------
|
||||
|
||||
// html:before {
|
||||
// content: "@{variable}";
|
||||
// }
|
||||
97
packages/one-light-ui/styles/ui-variables.less
Normal file
97
packages/one-light-ui/styles/ui-variables.less
Normal file
@ -0,0 +1,97 @@
|
||||
|
||||
@import "ui-variables-custom.less"; // import colors and custom variables
|
||||
|
||||
// ONE light UI variables
|
||||
// ----------------------------------------------
|
||||
|
||||
// Official variables
|
||||
// These variables must be defined in every theme
|
||||
// Source: https://github.com/atom/atom/blob/master/static/variables/ui-variables.less
|
||||
// ----------------------------------------------
|
||||
|
||||
|
||||
// Text -----------------
|
||||
@text-color: @ui-fg;
|
||||
@text-color-subtle: lighten(@text-color, 30%);
|
||||
@text-color-highlight: darken(@text-color, 12%);
|
||||
@text-color-selected: darken(@text-color-highlight, 12%);
|
||||
|
||||
@text-color-info: hsl(208, 100%, 54%);
|
||||
@text-color-success: hsl(132, 60%, 44%);
|
||||
@text-color-warning: hsl( 37, 90%, 44%);
|
||||
@text-color-error: hsl( 0, 90%, 56%);
|
||||
|
||||
|
||||
// Background -----------------
|
||||
@background-color-info: hsl(208, 100%, 56%);
|
||||
@background-color-success: hsl(132, 52%, 48%);
|
||||
@background-color-warning: hsl( 40, 60%, 48%);
|
||||
@background-color-error: hsl( 5, 72%, 56%);
|
||||
|
||||
@background-color-highlight: darken(@level-3-color, 2%);
|
||||
@background-color-selected: darken(@level-3-color, 6%);
|
||||
|
||||
@app-background-color: @level-3-color;
|
||||
|
||||
|
||||
// Base -----------------
|
||||
@base-background-color: @ui-bg;
|
||||
@base-border-color: @ui-border;
|
||||
|
||||
|
||||
// Components -----------------
|
||||
@pane-item-background-color: @base-background-color;
|
||||
@pane-item-border-color: @base-border-color;
|
||||
|
||||
@input-background-color: @level-1-color;
|
||||
@input-border-color: @base-border-color;
|
||||
|
||||
@tool-panel-background-color: @level-3-color;
|
||||
@tool-panel-border-color: @base-border-color;
|
||||
|
||||
@inset-panel-background-color: lighten(@level-2-color, 4%);
|
||||
@inset-panel-border-color: fadeout(@base-border-color, 15%);
|
||||
|
||||
@panel-heading-background-color: @level-2-color;
|
||||
@panel-heading-border-color: @base-border-color;
|
||||
|
||||
@overlay-background-color: mix(@level-2-color, @level-3-color);
|
||||
@overlay-border-color: @base-border-color;
|
||||
|
||||
@button-background-color: @level-1-color;
|
||||
@button-background-color-hover: darken(@button-background-color, 4%);
|
||||
@button-background-color-selected: @accent-bg-color;
|
||||
@button-border-color: @base-border-color;
|
||||
|
||||
@tab-bar-background-color: @level-3-color;
|
||||
@tab-bar-border-color: @base-border-color;
|
||||
@tab-background-color: @level-3-color;
|
||||
@tab-background-color-active: @level-2-color;
|
||||
@tab-border-color: @base-border-color;
|
||||
|
||||
@tree-view-background-color: @level-3-color;
|
||||
@tree-view-border-color: @base-border-color;
|
||||
|
||||
@ui-site-color-1: hsl(208, 100%, 56%); // blue
|
||||
@ui-site-color-2: hsl(132, 48%, 48%); // green
|
||||
@ui-site-color-3: hsl( 40, 60%, 52%); // orange
|
||||
@ui-site-color-4: #D831B0; // pink
|
||||
@ui-site-color-5: #EBDD5B; // yellow
|
||||
|
||||
|
||||
// Sizes -----------------
|
||||
@font-size: 12px;
|
||||
@input-font-size: 14px;
|
||||
@disclosure-arrow-size: 12px;
|
||||
|
||||
@component-padding: 10px;
|
||||
@component-icon-padding: 5px;
|
||||
@component-icon-size: 16px; // needs to stay 16px to look sharpest
|
||||
@component-line-height: 25px;
|
||||
@component-border-radius: 3px;
|
||||
|
||||
@tab-height: 30px;
|
||||
|
||||
|
||||
// Font -----------------
|
||||
@font-family: system-ui;
|
||||
Loading…
Reference in New Issue
Block a user