split into multiple files

matheusps · May 22, 2020 · 3610fc9 · 3610fc9
1 parent 89c127a
commit 3610fc9
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 215 deletions.
diff --git a/raw.css b/raw.css
@@ -1,193 +1,10 @@
-:root {
-  --color-base: rgb(255, 255, 255);
-  --color-on-base: rgb(28, 28, 30);
-  --color-surface: rgb(242, 242, 247);
-  --color-on-surface: rgb(28, 28, 30);
-  --color-surface--hover: rgb(232, 232, 237);
-  --color-surface--active: rgb(222, 222, 227);
-  --color-surface--disabled: rgb(248, 248, 255);
-  --color-primary:rgb(0, 122, 255);
-  --color-on-primary: rgb(255, 255, 255);
-  --color-text: rgb(28, 28, 30);
-  --color-text-subtle: rgb(142, 142, 147);
-  --color-shadow-outline: rgba(0, 155, 255, 0.5);
+@import url("styles/root.css");
+@import url("styles/general.css");
+@import url("styles/typo.css");
+@import url("styles/form.css");
+@import url("styles/media.css");
+@import url("styles/misc.css");
 
-  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-  'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
-  --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-  'Courier New', monospace;
-
-  --focus-outline: 0 0 0 0.1rem var(--color-shadow-outline);
-  --active-outline: 0 0 0 1rem var(--color-shadow-outline);
 
-}
 
-/** general **/
-
-html {
-  font-family: var(--font-family-sans);
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-body {
-  background-color: var(--color-base);
-  color: var(--color-on-base);
-}
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: currentColor;
-}
-
-/** typo **/
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-  color: inherit;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: inherit;
-}
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/** form **/
-
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-
-optgroup,
-select,
-textarea {
-  padding: 0;
-  line-height: inherit;
-  color: inherit;
-  background-color: var(--color-surface);
-}
-
-
-
-textarea {
-  resize: vertical;
-}
-
-input::placeholder,
-textarea::placeholder {
-  color: var(--color-text-subtle);
-}
-
-button,
-[role='button'] {
-  cursor: pointer;
-}
-
-button,
-input {
-  padding: 0.5rem;
-  margin: 0.1rem;
-  background-color: var(--color-surface);
-  color: var(--color-on-surface);
-  background-image: none;
-  font-size: 1rem;
-  transition: all 0.3s
-}
-
-input:active,
-button:active {
-  background-color: var(--color-surface--active);
-  outline: none;
-}
-
-input:hover,
-button:hover {
-  background-color:  var(--color-surface--hover);
-}
-
-input:disabled,
-button:disabled {
-  background-color:  var(--color-surface--disabled);
-  color: var(--color-text-subtle);
-  cursor: not-allowed;
-}
-
-input:focus,
-button:focus {
-  outline: none;
-  box-shadow: var(--focus-outline);
-}
-
-/** media **/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-}
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-img {
-  border-style: solid;
-}
-
-/** misc **/
-ol,
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-hr {
-  border-top-width: 0.063rem;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: var(--font-family-mono);
-}
diff --git a/src/form.css → styles/form.css b/src/form.css → styles/form.css
@@ -36,20 +36,29 @@ input {
   color: var(--color-on-surface);
   background-image: none;
   font-size: 1rem;
+  transition: all 0.3s
 }
 
 input:active,
 button:active {
   background-color: var(--color-surface--active);
+  outline: none;
 }
 
 input:hover,
 button:hover {
   background-color:  var(--color-surface--hover);
 }
 
+input:disabled,
+button:disabled {
+  background-color:  var(--color-surface--disabled);
+  color: var(--color-text-subtle);
+  cursor: not-allowed;
+}
+
 input:focus,
 button:focus {
   outline: none;
   box-shadow: var(--focus-outline);
-}
+}
diff --git a/styles/general.css b/styles/general.css
@@ -0,0 +1,19 @@
+html {
+  font-family: var(--font-family-sans);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+body {
+  background-color: var(--color-base);
+  color: var(--color-on-base);
+}
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+}
diff --git a/src/media.css → styles/media.css b/src/media.css → styles/media.css
@@ -17,4 +17,4 @@ video {
 
 img {
   border-style: solid;
-}
+}
diff --git a/src/misc.css → styles/misc.css b/src/misc.css → styles/misc.css
@@ -18,4 +18,4 @@ code,
 kbd,
 samp {
   font-family: var(--font-family-mono);
-}
+}
diff --git a/src/root.css → styles/root.css b/src/root.css → styles/root.css
@@ -4,7 +4,8 @@
   --color-surface: rgb(242, 242, 247);
   --color-on-surface: rgb(28, 28, 30);
   --color-surface--hover: rgb(232, 232, 237);
-  --color-surface--active: rgb(242, 242, 247);
+  --color-surface--active: rgb(222, 222, 227);
+  --color-surface--disabled: rgb(248, 248, 255);
   --color-primary:rgb(0, 122, 255);
   --color-on-primary: rgb(255, 255, 255);
   --color-text: rgb(28, 28, 30);
@@ -19,24 +20,5 @@
   'Courier New', monospace;
 
   --focus-outline: 0 0 0 0.1rem var(--color-shadow-outline);
-}
-
-html {
-  font-family: var(--font-family-sans);
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-body {
-  background-color: var(--color-base);
-  color: var(--color-on-base);
-}
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: currentColor;
-}
+  --active-outline: 0 0 0 1rem var(--color-shadow-outline);
+}
diff --git a/src/typo.css → styles/typo.css b/src/typo.css → styles/typo.css
@@ -27,4 +27,4 @@ h6 {
 a {
   color: inherit;
   text-decoration: inherit;
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,4 +17,4 @@ video { @@
     img {
       border-style: solid;
-    }
+    }