feat: button styles

This commit is contained in:
Anoop M D 2022-01-06 21:20:10 +05:30
parent 68c8d636f8
commit f825e53988
6 changed files with 169 additions and 0 deletions

38
package-lock.json generated
View File

@ -33,6 +33,7 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"react-tabs": "^3.2.3",
"sass": "^1.46.0",
"styled-components": "^5.3.3",
"tailwindcss": "^2.2.19"
},
@ -9144,6 +9145,11 @@
"url": "https://opencollective.com/immer"
}
},
"node_modules/immutable": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
"integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
},
"node_modules/import-cwd": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@ -13686,6 +13692,22 @@
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"node_modules/sass": {
"version": "1.46.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.46.0.tgz",
"integrity": "sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=8.9.0"
}
},
"node_modules/scheduler": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@ -16219,6 +16241,7 @@
"codemirror": "^5.64.0",
"escape-html": "^1.0.3",
"markdown-it": "^12.2.0",
"nanoid": "^3.1.30",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-tabs": "^3.2.3",
@ -23109,6 +23132,11 @@
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.7.tgz",
"integrity": "sha512-KGllzpbamZDvOIxnmJ0jI840g7Oikx58lBPWV0hUh7dtAyZpFqqrBZdKka5GlTwMTZ1Tjc/bKKW4VSFAt6BqMA=="
},
"immutable": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
"integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
},
"import-cwd": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@ -26560,6 +26588,16 @@
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"sass": {
"version": "1.46.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.46.0.tgz",
"integrity": "sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==",
"requires": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
}
},
"scheduler": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",

View File

@ -28,6 +28,7 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"react-tabs": "^3.2.3",
"sass": "^1.46.0",
"styled-components": "^5.3.3",
"tailwindcss": "^2.2.19"
},
@ -5770,6 +5771,11 @@
"url": "https://opencollective.com/immer"
}
},
"node_modules/immutable": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
"integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
},
"node_modules/import-cwd": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@ -7768,6 +7774,22 @@
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"node_modules/sass": {
"version": "1.46.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.46.0.tgz",
"integrity": "sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=8.9.0"
}
},
"node_modules/scheduler": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
@ -13617,6 +13639,11 @@
"resolved": "https://registry.npmjs.org/immer/-/immer-9.0.7.tgz",
"integrity": "sha512-KGllzpbamZDvOIxnmJ0jI840g7Oikx58lBPWV0hUh7dtAyZpFqqrBZdKka5GlTwMTZ1Tjc/bKKW4VSFAt6BqMA=="
},
"immutable": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
"integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw=="
},
"import-cwd": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@ -15088,6 +15115,16 @@
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
},
"sass": {
"version": "1.46.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.46.0.tgz",
"integrity": "sha512-Z4BYTgioAOlMmo4LU3Ky2txR8KR0GRPLXxO38kklaYxgo7qMTgy+mpNN4eKsrXDTFlwS5vdruvazG4cihxHRVQ==",
"requires": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
}
},
"scheduler": {
"version": "0.20.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",

View File

@ -40,6 +40,7 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"react-tabs": "^3.2.3",
"sass": "^1.46.0",
"styled-components": "^5.3.3",
"tailwindcss": "^2.2.19"
},

View File

@ -6,6 +6,8 @@ import 'react-tabs/style/react-tabs.css';
import 'codemirror/lib/codemirror.css';
import 'graphiql/graphiql.min.css';
import '../styles/app.scss';
function SafeHydrate({ children }) {
return (
<div suppressHydrationWarning>

View File

@ -0,0 +1,90 @@
.btn {
text-align: center;
white-space: nowrap;
outline: none;
box-shadow: none;
border-radius: 3px;
}
.btn-sm {
padding: .215rem .6rem .215rem .6rem;
}
.btn-md {
padding: .4rem 1.1rem;
line-height: 1.47;
}
.btn-default {
&:active,
&:hover,
&:focus {
outline: none;
box-shadow: none;
}
}
.btn-close {
color: #212529;
background: white;
border: solid 1px white;
padding: .215rem .6rem .215rem .6rem;
&:hover,
&:focus {
outline: none;
box-shadow: none;
border: solid 1px #696969;
}
}
.btn-secondary {
color: #212529;
background: #e2e6ea;
border: solid 1px #dae0e5;
.btn-icon {
color: #3f3f3f;
}
&:hover,
&:focus {
border-color: #696969;
outline: none;
box-shadow: none;
}
&:disabled {
color: #545454;
background: #efefef;
border: solid 1px rgb(234, 234, 234);
cursor: not-allowed;
}
&:disabled.btn-icon {
color: #545454;
}
&.btn-gradient {
background: linear-gradient(#fff, #e0e0e0);
border: solid 1px rgb(191, 191, 191);
&:hover {
border: solid 1px rgb(179, 179, 179);
background: linear-gradient(#f6f6f6, #e0e0e0);
}
&:focus,
&:active {
border: solid 1px rgb(129, 129, 129);
outline: none;
box-shadow: 0 8px 6px -11px black;
}
&:disabled {
color: #545454;
background: linear-gradient(#fff, #ececec);
border: solid 1px rgb(234, 234, 234);
}
}
}

View File

@ -0,0 +1 @@
@import "buttons";