Dwayne Harris
5 years ago
14 changed files with 961 additions and 1155 deletions
-
1675package-lock.json
-
7package.json
-
21postcss-preset-env.d.ts
-
79src/apps/gif-app/composer/app.tsx
-
12src/apps/gif-app/composer/gif.tsx
-
18src/apps/gif-app/composer/webpack.config.ts
-
93src/apps/text-app/composer/app.tsx
-
18src/apps/text-app/composer/webpack.config.ts
-
32src/communicator/index.ts
-
72src/styles/default.css
-
50src/styles/default.scss
-
18src/styles/spinner.css
-
18src/types/index.ts
-
3src/utils/index.ts
1675
package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,21 @@ |
|||
declare module 'postcss-preset-env' { |
|||
import { |
|||
plugin, Plugin, ParserInput, |
|||
Result, LazyResult, Root, ProcessOptions |
|||
} from 'postcss'; |
|||
|
|||
interface PluginOptions { |
|||
stage?: number; |
|||
features?: any; |
|||
browsers?: string; |
|||
insertBefore?: any; |
|||
insertAfter?: any; |
|||
autoprefixer?: any; |
|||
preserve?: boolean; |
|||
importFrom?: string; |
|||
exportTo?: string; |
|||
} |
|||
|
|||
const PostcssPresetEnv: Plugin<PluginOptions>; |
|||
export default PostcssPresetEnv; |
|||
} |
@ -0,0 +1,72 @@ |
|||
@charset "utf-8"; |
|||
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap'); |
|||
|
|||
:root { |
|||
--default-font: 'Source Sans Pro', sans-serif; |
|||
--input-padding: 0.5rem; |
|||
} |
|||
|
|||
html { |
|||
font-size: 18px; |
|||
} |
|||
|
|||
body { |
|||
font-family: var(--default-font); |
|||
margin: 0px; |
|||
padding: 10px; |
|||
} |
|||
|
|||
input, textarea, select { |
|||
border: 1px solid; |
|||
box-sizing: border-box; |
|||
font-family: var(--default-font); |
|||
font-size: 1rem; |
|||
padding: var(--input-padding); |
|||
width: 100%; |
|||
} |
|||
|
|||
button { |
|||
border: none; |
|||
border-radius: 8px; |
|||
cursor: pointer; |
|||
font-size: 0.8rem; |
|||
font-weight: 700; |
|||
padding: 0.5rem 1rem; |
|||
min-width: 100px; |
|||
} |
|||
|
|||
nav.level { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
div.control-container { |
|||
display: flex; |
|||
padding: 0.5rem 0px; |
|||
} |
|||
|
|||
div.control-container > div.icon { |
|||
margin: 0px; |
|||
padding: var(--input-padding); |
|||
} |
|||
|
|||
div.control { |
|||
flex-grow: 1; |
|||
} |
|||
|
|||
div.gifs { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
div.gif { |
|||
margin: 5px; |
|||
} |
|||
|
|||
div.gif > img { |
|||
height: 100px; |
|||
} |
|||
|
|||
.gif.selected { |
|||
border: 3px solid; |
|||
} |
@ -1,50 +0,0 @@ |
|||
@charset "utf-8"; |
|||
|
|||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap'); |
|||
|
|||
// Colors |
|||
$orange: hsl(14, 100%, 53%); |
|||
$yellow: hsl(48, 100%, 67%); |
|||
$green: hsl(141, 65%, 31%); |
|||
$turquoise: hsl(171, 100%, 41%); |
|||
$cyan: hsl(204, 86%, 53%); |
|||
$blue: hsl(217, 72%, 30%); |
|||
$purple: hsl(271, 63%, 32%); |
|||
$red: hsl(348, 71%, 42%); |
|||
$grey: hsl(0, 0%, 48%); |
|||
$grey-light: hsl(0, 0%, 71%); |
|||
$grey-lighter: hsl(0, 0%, 86%); |
|||
$white-ter: hsl(0, 0%, 96%); |
|||
$white-bis: hsl(0, 0%, 98%); |
|||
|
|||
$family-sans-serif: "Open Sans", sans-serif; |
|||
$primary: $blue; |
|||
$body-size: 14px; |
|||
|
|||
@import "../../node_modules/bulma/sass/utilities/_all.sass"; |
|||
@import "../../node_modules/bulma/sass/base/_all.sass"; |
|||
@import "../../node_modules/bulma/sass/form/_all.sass"; |
|||
@import "../../node_modules/bulma/sass/elements/button.sass"; |
|||
@import "../../node_modules/bulma/sass/elements/icon.sass"; |
|||
@import "../../node_modules/bulma/sass/components/level.sass"; |
|||
|
|||
body { |
|||
padding: 10px; |
|||
} |
|||
|
|||
div.gifs { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
div.gif { |
|||
margin: 5px; |
|||
|
|||
img { |
|||
height: 100px; |
|||
} |
|||
} |
|||
|
|||
.gif.selected { |
|||
border: solid 3px $green; |
|||
} |
@ -0,0 +1,18 @@ |
|||
.spinner { |
|||
width: 40px; |
|||
height: 40px; |
|||
background-color: #333; |
|||
|
|||
margin: 100px auto; |
|||
animation: sk-rotateplane 1.2s infinite ease-in-out; |
|||
} |
|||
|
|||
@keyframes sk-rotateplane { |
|||
0% { |
|||
transform: perspective(120px) rotateX(0deg) rotateY(0deg); |
|||
} 50% { |
|||
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); |
|||
} 100% { |
|||
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); |
|||
} |
|||
} |
@ -0,0 +1,3 @@ |
|||
import { ClassDictionary } from '../types' |
|||
|
|||
export const classNames = (dictionary: ClassDictionary) => Object.entries(dictionary).filter(([_, value]) => !!value).map(([key, _]) => key).join(' ') |
Write
Preview
Loading…
Cancel
Save
Reference in new issue