development/github-desktop
development/github-desktop
1
0
Fork 0
mirror of https://github.com/desktop/desktop synced 2024-10-31 11:07:25 +00:00
Code Issues Projects Releases Packages Wiki Activity

Move scss to styles and start on a basic structure

Browse source
This commit is contained in:
Markus Olsson 2016-06-20 21:18:20 +02:00
parent 93f9a5e10f
commit 833d9dd07a
10 changed files with 130 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app.tsx
View file

@ -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 {

40
static/desktop.scss
View file

@ -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
View 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
View file

@ -0,0 +1 @@
@import "mixins/platform";

3
styles/_type.scss Normal file
View file

@ -0,0 +1,3 @@
//
// Typography
//

1
styles/_ui.scss Normal file
View file

@ -0,0 +1 @@
@import "ui/octicons";

24
styles/_variables.scss Normal file
View 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
View file

@ -0,0 +1,6 @@
@import "variables";
@import "mixins";
@import "globals";
@import "ui"

11
styles/mixins/_platform.scss Normal file
View file

@ -0,0 +1,11 @@
@mixin win32 {
body.platform-win32 & {
@content;
}
}
@mixin darwin {
body.platform-darwin & {
@content;
}
}

4
styles/ui/_octicons.scss Normal file
View file

@ -0,0 +1,4 @@
/* https://css-tricks.com/cascading-svg-fill-color/ */
svg.octicon {
fill: currentColor;
}