Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-16 00:41:25 -05:00
Code Issues Activity

color and visual refactor

Browse source
This commit is contained in:
Juan de la Cruz 2016-02-17 08:56:02 +01:00 • committed by Andrey Antukh
parent 77fafa85ad
commit 773f67b09b
20 changed files with 149 additions and 104 deletions

6
resources/public/styles/base.scss
View file

@ -1,6 +1,6 @@
body {
background-color: $color-gray-lighter;
color: $color-gray-dark;
background-color: $secondary-ui-bg;
color: $light-ui-text;
display: flex;
flex-direction: column;
font-family: "sourcesanspro", sans-serif;
@ -46,7 +46,7 @@ svg {
a {
color: $color-primary;
color: $main-ui-color;
&:hover {
color: $color-primary-dark;

6
resources/public/styles/dependencies/colors.scss
View file

@ -1,7 +1,7 @@
// Colors
$color-white: #fff;
$color-black: #000;
$color-gray: #9e9e9e;
$color-white: #ffffff;
$color-black: #000000;
$color-gray: #90969d;
// Main color
$color-primary: #78dbbe;

30
resources/public/styles/dependencies/uxbox-theme.scss Normal file
View file

@ -0,0 +1,30 @@
// This is a standard color scheme for UXBOX UI
// Hope you like ir and feel free to create your own one!
// Main color
$main-ui-color: $color-primary;
$dark-main-ui-color: mix($main-ui-color, $color-black, $mix-percentage-dark);
// Background colors
$primary-ui-bg: $color-white;
$secondary-ui-bg: $color-gray-lighter;
$dark-ui-bg: $color-gray-light;
// Border color
$dark-ui-border: $color-gray;
$light-ui-border: $color-gray-light;
$bright-ui-border: lighten($light-ui-border, 18%);
// Icon colors
$dark-ui-icons: $color-gray-dark;
$light-ui-icons: $color-gray-light;
$bright-ui-icons: $color-gray-lighter;
// Text colors
$dark-ui-text: $color-gray-darker;
$light-ui-text: $color-gray;
$bright-ui-text: $color-gray-light;
// Canvas colors
$canvas-bg: $color-gray-lighter;
$scrollbar-bg: $color-gray-light;

8
resources/public/styles/framework.scss
View file

@ -28,7 +28,7 @@
.btn-primary {
@extend %btn;
align-items: center;
background: $color-primary;
background: $main-ui-color;
color: $color-white;
justify-content: center;
display: flex;
@ -763,11 +763,11 @@ input[type=range]:focus::-ms-fill-upper {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: $color-gray;
background-color: $scrollbar-bg;
&:hover {
background-color: $color-gray-darker;
outline: 2px solid $color-primary;
background-color: darken($scrollbar-bg, 14%);
outline: 2px solid $main-ui-color;
}
}

1
resources/public/styles/main.scss
View file

@ -4,6 +4,7 @@
//#################################################
@import 'dependencies/colors';
@import 'dependencies/uxbox-theme';
@import 'dependencies/helpers';
@import 'dependencies/mixin';
@import 'dependencies/fonts';

4
resources/public/styles/partials/color-palette.scss
View file

@ -31,7 +31,7 @@
}
&.fade-out-down {
@include animation(0,.5s,fadeOutDown);
}
}
}
.color-palette-actions {
@ -68,7 +68,7 @@
}
}
&.current {
background-color: $color-primary;
background-color: $main-ui-color;
border-color: $color-white;
svg {
fill: $color-white;

4
resources/public/styles/partials/dashboard-grid.scss
View file

@ -109,10 +109,10 @@
border-bottom: 2px solid lighten($color-gray-light, 12%);
&:hover {
border-color: $color-primary;
border-color: $main-ui-color;
h3 {
color: $color-primary;
color: $main-ui-color;
}
}

12
resources/public/styles/partials/element-options.scss
View file

@ -29,7 +29,7 @@
&:hover {
svg {
fill: $color-primary;
fill: $main-ui-color;
}
}
@ -38,7 +38,7 @@
background-color: $color-gray-darker;
svg {
fill: $color-primary;
fill: $main-ui-color;
}
}
@ -117,7 +117,7 @@
width: 15px;
&:hover {
fill: $color-primary;
fill: $main-ui-color;
}
}
@ -154,9 +154,9 @@
width: 18px;
}
&:hover {
border-color: $color-primary;
border-color: $main-ui-color;
svg {
fill: $color-primary;
fill: $main-ui-color;
}
}
}
@ -200,7 +200,7 @@
&:hover,
&.current {
svg {
fill: $color-primary;
fill: $main-ui-color;
}
}
}

4
resources/public/styles/partials/library-bar.scss
View file

@ -35,7 +35,7 @@
&.current {
background-color: $color-white;
color: $color-primary;
color: $main-ui-color;
}
}
@ -69,7 +69,7 @@
&:hover,
&.current {
background-color: $color-primary;
background-color: $main-ui-color;
.element-title,
.element-subtitle {

2
resources/public/styles/partials/lightbox.scss
View file

@ -117,7 +117,7 @@
&:hover {
.big-svg {
background-color: $color-primary;
background-color: $main-ui-color;
svg {
fill: $color-white;

25
resources/public/styles/partials/main-bar.scss
View file

@ -1,6 +1,6 @@
.main-bar {
align-items: center;
background-color: $color-gray;
background-color: $primary-ui-bg;
display: flex;
height: 50px;
padding: $x-small $medium;
@ -10,7 +10,7 @@
.main-logo {
svg {
fill: $color-white;
fill: $light-ui-icons;
height: 40px;
width: 120px;
}
@ -28,11 +28,11 @@
li {
a {
color: lighten($color-gray-light, 12%);
color: $bright-ui-text;
padding: 1rem;
&:hover {
color: $color-white;
color: $dark-ui-text;
}
}
@ -40,7 +40,7 @@
&.current {
a {
color: $color-white;
color: $dark-ui-text;
}
}
@ -57,19 +57,20 @@
position: relative;
span {
color: $color-gray-lighter;
color: $light-ui-text;
margin: $small;
}
img {
border: 2px solid $color-gray-lighter;
border: 2px solid $dark-ui-bg;
border-radius: 50%;
width: 32px;
}
.dropdown {
background-color: $color-white;
background-color: $secondary-ui-bg;
border-radius: $br-small;
border: 1px solid $bright-ui-border;
box-sizing: border-box;
min-width: 150px;
padding: 0 $small;
@ -85,23 +86,23 @@
padding: $small 0;
svg {
fill: $color-gray-light;
fill: $light-ui-text;
height: 12px;
width: 12px;
}
span {
color: $color-gray-light;
color: $light-ui-text;
}
&:hover {
span {
color: $color-gray-darker;
color: $dark-ui-text;
}
svg {
fill: $color-gray-darker;
fill: $dark-ui-text;
}
}

11
resources/public/styles/partials/settings-bar-icons.scss
View file

@ -11,7 +11,9 @@
.figure-btn {
align-items: center;
background-color: $color-gray-light;
background-color: $secondary-ui-bg;
border-radius: 3px;
border: 1px solid transparent;
cursor: pointer;
display: flex;
flex-shrink: 0;
@ -21,20 +23,21 @@
width: 54px;
svg {
fill: $color-gray-darker;
fill: $dark-ui-icons;
height: 40px;
width: 40px;
}
&:hover {
background-color: $color-white;
border-color: $bright-ui-border;
}
&.selected {
background-color: $color-gray-darker;
background-color: $main-ui-color;
svg {
fill: $color-primary;
fill: $color-white;
}
}

38
resources/public/styles/partials/settings-bar-layers.scss
View file

@ -1,5 +1,4 @@
.layers-tools {
background-color: $color-gray-darker;
bottom: 0;
display: flex;
height: 30px;
@ -18,12 +17,12 @@
cursor: pointer;
svg {
fill: $color-gray;
fill: $light-ui-icons;
height: 16px;
width: 16px;
&:hover {
fill: $color-white;
fill: $dark-ui-text;
}
}
@ -79,15 +78,14 @@
.element-list-body {
align-items: center;
border-bottom: 1px solid $color-gray-darker;
border-bottom: 1px solid $bright-ui-border;
box-sizing: border-box;
background-color: $color-gray-dark;
display: flex;
padding: $small;
width: 100%;
svg {
fill: $color-gray;
fill: $bright-ui-icons;
height: 13px;
margin-right: 8px;
width: 13px;
@ -104,7 +102,7 @@
.sublevel-element {
svg {
fill: $color-gray-darker;
fill: $light-ui-icons;
}
}
@ -114,7 +112,7 @@
width: 12px;
svg {
fill: $color-gray-darker;
fill: $dark-ui-icons;
transform: rotate(90deg);
width: 12px;
}
@ -126,7 +124,7 @@
&:hover {
svg {
fill: $color-white;
fill: $light-ui-icons;
}
}
@ -151,25 +149,25 @@
}
span {
color: darken($color-gray-darker, 8%);
color: $light-ui-text;
font-size: $fs13;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.selected {
background-color: lighten($color-gray-darker, 5%);
.element-icon {
svg {
fill: $color-primary;
fill: $main-ui-color;
}
}
span {
color: $color-primary;
color: $main-ui-color;
}
}
@ -177,38 +175,38 @@
.selected {
svg {
fill: $color-gray-lighter;
fill: $dark-ui-icons;
}
}
&:hover {
border-color: $color-gray-light;
border-color: $main-ui-color;
.element-icon {
svg {
fill: $color-gray-lighter;
fill: $dark-ui-icons;
}
}
span {
color: $color-gray-lighter;
color: $dark-ui-text;
}
}
&.drag-top {
border-top: 2px solid $color-primary;
border-top: 2px solid $main-ui-color;
}
&.drag-bottom {
border-bottom: 2px solid $color-primary;
border-bottom: 2px solid $main-ui-color;
}
&.drag-inside {
border: 2px solid $color-primary;
border: 2px solid $main-ui-color;
}
}

13
resources/public/styles/partials/settings-bar-tools.scss
View file

@ -1,6 +1,11 @@
.drawing-tools {
max-height: 115px;
}
.tool-btn {
align-items: center;
background-color: $color-gray-light;
background-color: $secondary-ui-bg;
border-radius: 3px;
cursor: pointer;
display: flex;
flex-shrink: 0;
@ -10,7 +15,7 @@
width: 54px;
svg {
fill: $color-gray-darker;
fill: $dark-ui-icons;
height: 35px;
width: 35px;
}
@ -20,10 +25,10 @@
}
&.selected {
background-color: $color-gray-darker;
background-color: $main-ui-color;
svg {
fill: $color-primary;
fill: $color-white;
}
}

15
resources/public/styles/partials/settings-bar.scss
View file

@ -1,5 +1,5 @@
.settings-bar {
background-color: $color-gray-dark;
background-color: $primary-ui-bg;
bottom: 0;
height: 100%;
position: fixed;
@ -21,29 +21,28 @@
height: 100%;
.tool-window {
border-bottom: 1px solid $color-gray-darker;
border-bottom: 1px solid $light-ui-border;
display: flex;
flex-direction: column;
height: 100%;
max-height: 40%;
height: 40%;
//flex: 1;
width: 100%;
.tool-window-bar {
align-items: center;
background-color: $color-gray-darker;
border-bottom: 1px solid $light-ui-border;
display: flex;
flex-shrink: 0;
padding: 2px $x-small;
svg {
fill: $color-gray;
fill: $dark-ui-icons;
height: 12px;
width: 12px;
}
span {
color: $color-gray-light;
color: $dark-ui-text;
font-weight: bold;
}
@ -59,7 +58,7 @@
&:hover {
svg {
fill: $color-gray-lighter;
fill: $color-danger;
}
}

43
resources/public/styles/partials/workspace-bar.scss
View file

@ -1,7 +1,7 @@
.workspace-bar {
align-items: center;
background-color: $color-gray;
border-bottom: 1px solid $color-gray-dark;
background-color: $primary-ui-bg;
border-bottom: 1px solid $bright-ui-border;
display: flex;
height: 40px;
padding: $x-small $medium $x-small 65px;
@ -10,7 +10,7 @@
.main-icon {
align-items: center;
background-color: $color-gray-dark;
background-color: $secondary-ui-bg;
cursor: pointer;
display: flex;
height: 100%;
@ -24,7 +24,7 @@
height: 35px;
svg {
fill: darken($color-gray-darker, 7%);
fill: $light-ui-icons;
height: 35px;
width: 35px;
@ -33,7 +33,7 @@
&:hover {
svg {
fill: $color-primary;
fill: $main-ui-color;
}
}
@ -44,7 +44,7 @@
.project-tree-btn {
align-items: center;
background-color: $color-gray-dark;
background-color: $secondary-ui-bg;
border-radius: $br-small;
box-sizing: border-box;
cursor: pointer;
@ -53,18 +53,30 @@
padding: $x-small $x-big+$x-small $x-small $medium;
svg {
fill: $color-primary;
fill: $dark-ui-icons;
height: 20px;
margin-right: $small;
width: 20px;
}
span {
color: $color-primary;
color: $color-gray-light;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:hover {
background-color: $color-gray-darker;
background-color: $main-ui-color;
svg {
fill: $color-white;
}
span {
color: $color-white;
}
}
}
@ -74,7 +86,7 @@
.options-btn {
align-items: center;
border-right: 1px solid $color-gray-dark;
border-right: 1px solid $bright-ui-border;
display: flex;
margin: 0;
@ -85,6 +97,7 @@
li {
align-items: center;
background-color: $color-gray-lighter;
border: 1px solid transparent;
border-radius: $br-small;
cursor: pointer;
display: flex;
@ -99,22 +112,18 @@
}
svg {
fill: $color-gray-dark;
fill: $dark-ui-icons;
height: 18px;
width: 18px;
}
&:hover {
background-color: $color-white;
svg {
fill: $color-gray-darker;
}
border-color: $bright-ui-border;
}
&.selected {
background-color: $color-primary;
background-color: $main-ui-color;
svg {
fill: $color-white;

3
resources/public/styles/partials/workspace-canvas.scss
View file

@ -1,4 +1,5 @@
.workspace-content {
background-color: $canvas-bg;
display: flex;
height: 100%;
width: 100%;
@ -88,4 +89,4 @@
pointer-events: none;
left: 0px;
}
}
}

22
src/uxbox/ui/workspace/rules.cljs
View file

@ -30,10 +30,10 @@
:x2 position
:y1 5
:y2 step-padding
:stroke "#7f7f7f"}]
:stroke "#9da2a6"}]
[:text {:x (+ position 2)
:y 13
:fill "#7f7f7f"
:fill "#9da2a6"
:style {:font-size "12px"}}
value]])
@ -44,7 +44,7 @@
:x2 position
:y1 10
:y2 step-padding
:stroke "#7f7f7f"}])
:stroke "#9da2a6"}])
:else
(html
@ -53,7 +53,7 @@
:x2 position
:y1 15
:y2 step-padding
:stroke "#7f7f7f"}])))
:stroke "#9da2a6"}])))
(defn v-line
[position value]
@ -65,11 +65,11 @@
:y2 position
:x1 5
:x2 step-padding
:stroke "#7f7f7f"}]
:stroke "#9da2a6"}]
[:text {:y position
:x 5
:transform (str/format "rotate(90 0 %s)" position)
:fill "#7f7f7f"
:fill "#9da2a6"
:style {:font-size "12px"}}
value]])
@ -80,7 +80,7 @@
:y2 position
:x1 10
:x2 step-padding
:stroke "#7f7f7f"}])
:stroke "#9da2a6"}])
:else
(html
@ -89,7 +89,7 @@
:y2 position
:x1 15
:x2 step-padding
:stroke "#7f7f7f"}])))
:stroke "#9da2a6"}])))
(defn h-rule-render
[own sidebar?]
@ -101,8 +101,8 @@
{:width wb/viewport-width
:height 20}
[:g
[:rect {:x step-padding :y 0 :width width :height step-padding :fill "#bab7b7"}]
[:rect {:x 0 :y 0 :width step-padding :height step-padding :fill "#bab7b7"}]]
[:rect {:x step-padding :y 0 :width width :height step-padding :fill "rgb(233, 234, 235)"}]
[:rect {:x 0 :y 0 :width step-padding :height step-padding :fill "rgb(233, 234, 235)"}]]
[:g
(for [tick ticks
:let [pos (* (+ tick start-width) zoom)]]
@ -128,7 +128,7 @@
:y step-padding
:height height
:width step-padding
:fill "#bab7b7"}]
:fill "rgb(233, 234, 235)"}]
(for [tick ticks
:let [pos (* (+ tick start-height) zoom)]]
(v-line pos tick))]])))

2
src/uxbox/ui/workspace/sidebar/drawtools.cljs
View file

@ -71,7 +71,7 @@
tools (->> (into [] +draw-tools+)
(sort-by (comp :priority second)))]
(html
[:div#form-tools.tool-window
[:div#form-tools.tool-window.drawing-tools
[:div.tool-window-bar
[:div.tool-window-icon i/window]
[:span (tr "ds.tools")]

4
src/uxbox/ui/workspace/sidebar/layers.cljs
View file

@ -152,8 +152,7 @@
:class (when selected? "selected")}
[:div.element-list-body
{:class classes
:style {:background-color "gray"
:opacity (if (:dragging @local)
:style {:opacity (if (:dragging @local)
"0.5"
"1")}
:on-click select
@ -314,4 +313,3 @@
{:render layers-render
:name "layers"
:mixins [rum/reactive]}))