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