mirror of
https://github.com/desktop/desktop
synced 2024-10-31 11:07:25 +00:00
Move scss to styles and start on a basic structure
This commit is contained in:
parent
93f9a5e10f
commit
833d9dd07a
10 changed files with 130 additions and 41 deletions
|
@ -10,7 +10,7 @@ import {Repo} from './lib/api'
|
|||
if (!process.env.TEST_ENV) {
|
||||
/* This is the magic trigger for webpack to go compile
|
||||
* our sass into css and inject it into the DOM. */
|
||||
require('../static/desktop.scss')
|
||||
require('../styles/desktop.scss')
|
||||
}
|
||||
|
||||
interface AppState {
|
||||
|
|
|
@ -1,40 +0,0 @@
|
|||
* {
|
||||
font-family: system, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Lucida Grande";
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:not(input):not(textarea) {
|
||||
&::after, &::before {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
input, button, textarea, :focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
img {
|
||||
user-drag: none;
|
||||
-webkit-user-drag: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#content {
|
||||
display: flex;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* https://css-tricks.com/cascading-svg-fill-color/ */
|
||||
svg.octicon { fill: currentColor; }
|
79
styles/_globals.scss
Normal file
79
styles/_globals.scss
Normal file
|
@ -0,0 +1,79 @@
|
|||
// Globals
|
||||
//
|
||||
// This file is for things that have to apply globally, if your style
|
||||
// doesn't fit into that description it probably belongs in ui/
|
||||
|
||||
// Reset the box-sizing, lifted from bootstrap reboot css, see:
|
||||
// https://github.com/twbs/bootstrap/blob/bfc16c4a829ba596db28f5f42d7a3e429e6ea2e1/scss/_reboot.scss#L9
|
||||
//
|
||||
// Change from `box-sizing: content-box` to `border-box` so that when you add
|
||||
// `padding` or `border`s to an element, the overall declared `width` does not
|
||||
// change. For example, `width: 100px;` will always be `100px` despite the
|
||||
// `border: 10px solid red;` and `padding: 20px;`.
|
||||
//
|
||||
// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
//
|
||||
// Reset HTML, body, and more
|
||||
//
|
||||
|
||||
// We never want the window to be scrollable, everything has to fit
|
||||
// or be placed into a scrollable container.
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html {
|
||||
// Sets a specific default `font-size` for user with `rem` type scales.
|
||||
font-size: $font-size-root;
|
||||
}
|
||||
|
||||
body {
|
||||
// Make the `body` use the `font-size-root`
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
// Go easy on the eyes and use something other than `#000` for text
|
||||
color: $primary-text-color;
|
||||
// By default, `<body>` has no `background-color` so we set one as a best practice.
|
||||
background-color: $primary-background-color;
|
||||
}
|
||||
|
||||
:not(input):not(textarea) {
|
||||
&::after, &::before {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
input, button, textarea, :focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
img {
|
||||
-webkit-user-drag: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#content {
|
||||
display: flex;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
1
styles/_mixins.scss
Normal file
1
styles/_mixins.scss
Normal file
|
@ -0,0 +1 @@
|
|||
@import "mixins/platform";
|
3
styles/_type.scss
Normal file
3
styles/_type.scss
Normal file
|
@ -0,0 +1,3 @@
|
|||
//
|
||||
// Typography
|
||||
//
|
1
styles/_ui.scss
Normal file
1
styles/_ui.scss
Normal file
|
@ -0,0 +1 @@
|
|||
@import "ui/octicons";
|
24
styles/_variables.scss
Normal file
24
styles/_variables.scss
Normal file
|
@ -0,0 +1,24 @@
|
|||
// Variables
|
||||
//
|
||||
// This files contains variables accessible to all other scss files.
|
||||
// Structure and naming copied largely from bootstrap, see
|
||||
// https://github.com/twbs/bootstrap/blob/bfc16c4a829ba596db28f5f42d7a3e429e6ea2e1/scss/_variables.scss
|
||||
|
||||
// Colors
|
||||
|
||||
$primary-text-color: #5f717f;
|
||||
$primary-background-color: #fff;
|
||||
|
||||
// Typography
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif !default;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
$font-family-base: $font-family-sans-serif;
|
||||
|
||||
// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
|
||||
$font-size-root: 16px;
|
||||
$font-size-base: $font-size-root;
|
||||
|
||||
$line-height-base: 1.5;
|
6
styles/desktop.scss
Normal file
6
styles/desktop.scss
Normal file
|
@ -0,0 +1,6 @@
|
|||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
@import "globals";
|
||||
|
||||
@import "ui"
|
11
styles/mixins/_platform.scss
Normal file
11
styles/mixins/_platform.scss
Normal file
|
@ -0,0 +1,11 @@
|
|||
@mixin win32 {
|
||||
body.platform-win32 & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin darwin {
|
||||
body.platform-darwin & {
|
||||
@content;
|
||||
}
|
||||
}
|
4
styles/ui/_octicons.scss
Normal file
4
styles/ui/_octicons.scss
Normal file
|
@ -0,0 +1,4 @@
|
|||
/* https://css-tricks.com/cascading-svg-fill-color/ */
|
||||
svg.octicon {
|
||||
fill: currentColor;
|
||||
}
|
Loading…
Reference in a new issue