hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Toolbar styles

Browse Source
main
Jake Dexheimer 7 years ago
parent 1fc9411241
commit c501fa72ee
8 changed files with 45 additions and 27 deletions
Show Stats Download Patch File Download Diff File

4
components/button.js
Unescape Escape View File

@ -8,13 +8,13 @@ export default (props) => (
<style jsx>{`
div {
cursor: pointer;
height: 37px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
color: #000;
border: 0.5px solid #333;
border: 0.5px solid #000;
border-radius: 3px;
}
div:last-of-type {

6
components/colorpicker.js
Unescape Escape View File

@ -37,15 +37,14 @@ class ColorPicker extends React.Component {
</div>
<style jsx>{`
.colorpicker-container {
height: 37px; // TODO fix
height: 100%;
}
.colorpicker-display {
display: flex;
height: 100%;
width: 72px;
background: #000;
border: 0.5px solid #333;
border: 0.5px solid #000;
border-radius: 3px;
}
@ -55,7 +54,6 @@ class ColorPicker extends React.Component {
justify-content: center;
user-select: none;
cursor: default;
color: #fff;
height: 100%;
width: 36px;
}

23
components/dropdown.js
Unescape Escape View File

@ -31,10 +31,10 @@ class Dropdown extends React.Component {
<span>{ item.name }</span>
<style jsx>{`
.dropdown-list-item {
background: #000;
background: #131313;
user-select: none;
padding: 8px 16px;
border-bottom: 0.5px solid #333;
border-bottom: 0.5px solid #000;
}
.selected {
@ -42,13 +42,17 @@ class Dropdown extends React.Component {
color: #fff;
}
.dropdown-list-item:not(.selected):hover {
background: #131313;
.selected:hover {
background: #506874 !important;
}
.dropdown-list-item:hover {
background: #222;
}
.dropdown-list-item:last-of-type {
border-bottom: none;
border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 2px 2px;
}
`}</style>
</div>
@ -84,13 +88,13 @@ class Dropdown extends React.Component {
}
.dropdown-container {
height: 36px;
height: 100%;
cursor: pointer;
color: #fff;
}
.dropdown-display {
border: 0.5px solid #333;
height: 100%;
border: 1px solid #000;
border-radius: 3px;
user-select: none;
padding: 8px 16px;
@ -99,7 +103,6 @@ class Dropdown extends React.Component {
align-items: center;
position: relative;
z-index: 1;
background: #000;
}
.dropdown-display:hover {
@ -113,7 +116,7 @@ class Dropdown extends React.Component {
.dropdown-list {
display: none;
margin-top: -2px;
border: 0.5px solid #333;
border: 0.5px solid #000;
border-radius: 0px 0px 3px 3px;
max-height: 350px;
overflow-y: scroll;

8
components/meta.js
Unescape Escape View File

@ -19,6 +19,14 @@ export default () => (
padding: 0;
box-sizing: border-box;
}
#toolbar > div {
margin-right: 8px; // TODO fix hack
}
#toolbar>div:last-child {
margin-right: 0px;
}
`}</style>
</div>
)

5
components/settings.js
Unescape Escape View File

@ -29,7 +29,7 @@ class Settings extends React.Component {
</div>
<style jsx>{`
.settings-container {
height: 37px;
height: 100%;
width: 37px;
display: flex;
align-items: center;
@ -43,12 +43,11 @@ class Settings extends React.Component {
display: flex;
justify-content: center;
align-items: center;
border: 0.5px solid #333;
border: 0.5px solid #000;
border-radius: 3px;
user-select: none;
position: relative;
z-index: 1;
background: #000;
cursor: pointer;
}

2
components/svg/settings.js
Unescape Escape View File

@ -2,6 +2,6 @@ import React from 'react'
export default () => (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path fill="#B4B3AE" fillRule="evenodd" d="M206.532032,366.702224 L208.523318,368.142728 C208.69279,368.3122 208.721035,368.509915 208.608053,368.735877 L206.786238,371.74399 C206.673257,371.969953 206.503788,372.040565 206.277825,371.955829 L203.989964,371.066106 C203.283831,371.546276 202.775423,371.842848 202.464724,371.955829 L202.125782,374.286058 C202.069291,374.51202 201.913944,374.625 201.659736,374.625 L198.058474,374.625 C197.804266,374.625 197.648919,374.51202 197.592428,374.286058 L197.253486,371.955829 C196.829806,371.786357 196.321398,371.489786 195.728246,371.066106 L193.440385,371.955829 C193.214422,372.068811 193.044953,371.998198 192.931972,371.74399 L191.110157,368.735877 C190.96893,368.481669 190.997175,368.283955 191.194892,368.142728 L193.101443,366.702224 C193.101443,366.617488 193.094382,366.476263 193.080259,366.278546 C193.066136,366.080828 193.059075,365.925481 193.059075,365.8125 C193.059075,365.699519 193.066136,365.544172 193.080259,365.346454 C193.094382,365.148737 193.101443,365.007512 193.101443,364.922776 L191.152525,363.482272 C190.983053,363.3128 190.954808,363.115085 191.067789,362.889123 L192.889604,359.88101 C193.002585,359.655047 193.172055,359.584435 193.398017,359.669171 L195.685878,360.558894 C196.392011,360.078724 196.90042,359.782152 197.211118,359.669171 L197.550061,357.338942 C197.606551,357.11298 197.761898,357 198.016106,357 L201.617368,357 C201.871576,357 202.026923,357.11298 202.083414,357.338942 L202.379988,359.669171 C202.803668,359.838643 203.312077,360.135214 203.905229,360.558894 L206.150722,359.669171 C206.376684,359.556189 206.560276,359.626802 206.701503,359.88101 L208.523318,362.889123 C208.664544,363.143331 208.6363,363.341045 208.438582,363.482272 L206.532032,364.922776 C206.532032,365.007512 206.539093,365.148737 206.553216,365.346454 C206.567338,365.544172 206.5744,365.699519 206.5744,365.8125 C206.5744,366.23618 206.560277,366.532752 206.532032,366.702224 Z M199.795553,368.905349 C200.671159,368.905349 201.419649,368.608777 202.041046,368.015625 C202.662443,367.422473 202.973138,366.688105 202.973138,365.8125 C202.973138,364.936895 202.662443,364.202527 202.041046,363.609375 C201.419649,363.016223 200.671159,362.719651 199.795553,362.719651 C198.919948,362.719651 198.178519,363.016223 197.571244,363.609375 C196.96397,364.202527 196.660337,364.936895 196.660337,365.8125 C196.660337,366.688105 196.96397,367.422473 197.571244,368.015625 C198.178519,368.608777 198.919948,368.905349 199.795553,368.905349 Z" transform="translate(-191 -357)"/>
<path fill="#4F6875" fillRule="evenodd" d="M206.532032,366.702224 L208.523318,368.142728 C208.69279,368.3122 208.721035,368.509915 208.608053,368.735877 L206.786238,371.74399 C206.673257,371.969953 206.503788,372.040565 206.277825,371.955829 L203.989964,371.066106 C203.283831,371.546276 202.775423,371.842848 202.464724,371.955829 L202.125782,374.286058 C202.069291,374.51202 201.913944,374.625 201.659736,374.625 L198.058474,374.625 C197.804266,374.625 197.648919,374.51202 197.592428,374.286058 L197.253486,371.955829 C196.829806,371.786357 196.321398,371.489786 195.728246,371.066106 L193.440385,371.955829 C193.214422,372.068811 193.044953,371.998198 192.931972,371.74399 L191.110157,368.735877 C190.96893,368.481669 190.997175,368.283955 191.194892,368.142728 L193.101443,366.702224 C193.101443,366.617488 193.094382,366.476263 193.080259,366.278546 C193.066136,366.080828 193.059075,365.925481 193.059075,365.8125 C193.059075,365.699519 193.066136,365.544172 193.080259,365.346454 C193.094382,365.148737 193.101443,365.007512 193.101443,364.922776 L191.152525,363.482272 C190.983053,363.3128 190.954808,363.115085 191.067789,362.889123 L192.889604,359.88101 C193.002585,359.655047 193.172055,359.584435 193.398017,359.669171 L195.685878,360.558894 C196.392011,360.078724 196.90042,359.782152 197.211118,359.669171 L197.550061,357.338942 C197.606551,357.11298 197.761898,357 198.016106,357 L201.617368,357 C201.871576,357 202.026923,357.11298 202.083414,357.338942 L202.379988,359.669171 C202.803668,359.838643 203.312077,360.135214 203.905229,360.558894 L206.150722,359.669171 C206.376684,359.556189 206.560276,359.626802 206.701503,359.88101 L208.523318,362.889123 C208.664544,363.143331 208.6363,363.341045 208.438582,363.482272 L206.532032,364.922776 C206.532032,365.007512 206.539093,365.148737 206.553216,365.346454 C206.567338,365.544172 206.5744,365.699519 206.5744,365.8125 C206.5744,366.23618 206.560277,366.532752 206.532032,366.702224 Z M199.795553,368.905349 C200.671159,368.905349 201.419649,368.608777 202.041046,368.015625 C202.662443,367.422473 202.973138,366.688105 202.973138,365.8125 C202.973138,364.936895 202.662443,364.202527 202.041046,363.609375 C201.419649,363.016223 200.671159,362.719651 199.795553,362.719651 C198.919948,362.719651 198.178519,363.016223 197.571244,363.609375 C196.96397,364.202527 196.660337,364.936895 196.660337,365.8125 C196.660337,366.688105 196.96397,367.422473 197.571244,368.015625 C198.178519,368.608777 198.919948,368.905349 199.795553,368.905349 Z" transform="translate(-191 -357)"/>
</svg>
)

23
components/toolbar.js
Unescape Escape View File

@ -85,13 +85,15 @@ const Toolbar = (props) => (
bg={props.bg}
/>
<Settings />
<Button
onClick={props.upload}
title="Copy Imgur Link"
bg="#84ACFC"
style={{ borderRadius: '3px 0px 0px 3px' }}
/>
<Button onClick={props.save} title="Save Image" bg="#C3E98D" />
<div className="buttons">
<Button
onClick={props.upload}
title="Copy Imgur Link"
bg="#84ACFC"
style={{ borderRadius: '3px 0px 0px 3px' }}
/>
<Button onClick={props.save} title="Save Image" bg="#C3E98D" />
</div>
<style jsx>{`
#toolbar {
width: 100%;
@ -100,6 +102,13 @@ const Toolbar = (props) => (
display: flex;
position: relative;
z-index: 1;
font-size: 14px;
color: #4F6875;
}
.buttons {
display: flex;
margin-left: auto;
}
`}</style>
</div>

1
pages/index.js
Unescape Escape View File

@ -68,6 +68,7 @@ class Index extends React.Component {
h1 {
color: #fff;
}
div {
display: flex;
flex-direction: column;

Write Preview
Loading…
Cancel
Save