react-asc 20.2.0 → 21.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "20.2.0",
+	"version": "21.0.3",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",
@@ -10,7 +10,6 @@
 	"license": "MIT",
 	"dependencies": {
 		"@popperjs/core": "2.9.2",
-		"bootstrap": "5.1.3",
 		"react": "17.0.2",
 		"react-dom": "17.0.2",
 		"modern-normalize": "^1.1.0"
@@ -24,7 +23,6 @@
 		"ui library",
 		"components",
 		"library",
-		"bootstrap",
 		"material"
 	]
 }

package/react-asc.scss

@@ -1,3 +1,17 @@
+:root {
+	--breakpoint-xs: 0;
+	--breakpoint-sm: 576px;
+	--breakpoint-md: 768px;
+	--breakpoint-lg: 992px;
+	--breakpoint-xl: 1200px;
+	--breakpoint-xxl: 1400px;
+}
+
+:root {
+	--buttonMinWidth: 62px;
+	--buttonPadding: 11px 15px;
+}
+
 :root {
 	--primary-light: #6573c3;
 	--primary: #3f51b5;
@@ -35,121 +49,182 @@
 	--bodyBg: white;
 	--bodyColor: #212529;
 
-	--borderRadius: 5px;
+	--highlight: rgba(204, 216, 224, 0.2); // ???
+
 	--shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
-		0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+	0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 
-	--buttonMinWidth: 62px;
-	--buttonPadding: 11px 15px;
+	--muted: #6c757d !important;
+}
 
+:root {
 	--fontFamily: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
 		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 	--fontSize: 16px;
 	--fontWeight: 400;
 
-	--highlight: rgba(204, 216, 224, 0.2); // ???
+	--fontLineHeight: 1.5;
+}
 
-	--breakpointMd: 768px;
+:root {
+	.ml-0 {
+		margin-left: var(--0);
+	}
 
-	--bodyLineHeight: 1.5;
+	.ml-1 {
+		margin-left: var(--1);
+	}
 
-	--breakpoint-xs: 0;
-	--breakpoint-sm: 576px;
-	--breakpoint-md: 768px;
-	--breakpoint-lg: 992px;
-	--breakpoint-xl: 1200px;
-	--breakpoint-xxl: 1400px;
-}
+	.ml-2 {
+		margin-left: var(--2);
+	}
 
-.input-group-append {
-	.btn {
-		min-width: auto;
+	.ml-3 {
+		margin-left: var(--3);
+	}
 
-		.svg-icon {
-			margin-left: 0;
-			margin-right: 0;
-		}
+	.ml-auto {
+		margin-left: var(--auto);
 	}
-}
 
-.text-muted {
-	color: #6c757d !important;
-}
+	.mr-0 {
+		margin-right: var(--0);
+	}
 
-.ml-0 {
-	margin-left: 0px !important;
-}
+	.mr-1 {
+		margin-right: var(--1);
+	}
 
-.ml-1 {
-	margin-left: 10px !important;
-}
+	.mr-2 {
+		margin-right: var(--2);
+	}
 
-.ml-2 {
-	margin-left: 20px !important;
-}
+	.mr-3 {
+		margin-right: var(--3);
+	}
 
-.ml-3 {
-	margin-left: 30px !important;
-}
+	.mr-auto {
+		margin-right: var(--auto);
+	}
 
-.ml-auto {
-	margin-left: auto !important;
-}
+	.mt-0 {
+		margin-top: var(--0);
+	}
 
-.mr-0 {
-	margin-right: 0px !important;
-}
+	.mt-1 {
+		margin-top: var(--1);
+	}
 
-.mr-1 {
-	margin-right: 10px !important;
-}
+	.mt-2 {
+		margin-top: var(--2);
+	}
 
-.mr-2 {
-	margin-right: 20px !important;
-}
+	.mt-3 {
+		margin-top: var(--3);
+	}
 
-.mr-3 {
-	margin-right: 30px !important;
-}
+	.mt-4 {
+		margin-top: var(--4);
+	}
 
-.mr-auto {
-	margin-right: auto !important;
-}
+	.mb-0 {
+		margin-bottom: var(--0);
+	}
 
-.mt-0 {
-	margin-top: 0px !important;
-}
+	.mb-1 {
+		margin-bottom: var(--1);
+	}
 
-.mt-1 {
-	margin-top: 10px !important;
-}
+	.mb-2 {
+		margin-bottom: var(--2);
+	}
 
-.mt-2 {
-	margin-top: 20px !important;
+	.mb-3 {
+		margin-bottom: var(--3);
+	}
 }
 
-.mt-3 {
-	margin-top: 30px !important;
-}
+:root {
+	.pt-1 {
+		padding-top: var(--1);
+	}
 
-.mt-4 {
-    margin-top: 40px!important;
-}
+	.pt-2 {
+		padding-top: var(--2);
+	}
+
+	.pt-3 {
+		padding-top: var(--3);
+	}
+
+	.pb-1 {
+		padding-bottom: var(--1);
+	}
+
+	.pb-2 {
+		padding-bottom: var(--2);
+	}
 
-.mb-0 {
-	margin-bottom: 0px !important;
+	.pb-3 {
+		padding-bottom: var(--3);
+	}
+
+	.pb-4 {
+		padding-bottom: var(--4);
+	}
+
+	.p-3 {
+		padding: var(--3);
+	}
+
+	.p-1 {
+		padding: var(--1);
+	}
+
+	.p-2 {
+		padding: var(--2);
+	}
+
+	.p-3 {
+		padding: var(--3);
+	}
+
+	.p-4 {
+		padding: var(--3);
+	}
+
+	.pt-0 {
+		padding-top: var(--0);
+	}
+
+	.pb-0 {
+		padding-bottom: var(--0);
+	}
 }
 
-.mb-1 {
-	margin-bottom: 10px !important;
+:root {
+	--borderRadius: 5px;
+	--0: 0px !important;
+	--1: 15px !important;
+	--2: 25px !important;
+	--3: 35px !important;
+	--4: 45px !important;
+	--auto: auto !important;
 }
 
-.mb-2 {
-	margin-bottom: 20px !important;
+.input-group-append {
+	.btn {
+		min-width: auto;
+
+		.svg-icon {
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
 }
 
-.mb-3 {
-	margin-bottom: 30px !important;
+.text-muted {
+	color: var(--muted);
 }
 
 .d-flex {
@@ -171,12 +246,15 @@
 .flex-row {
 	flex-direction: row;
 }
+
 .flex-row-reverse {
 	flex-direction: row-reverse;
 }
+
 .flex-column {
 	flex-direction: column;
 }
+
 .flex-column-reverse {
 	flex-direction: column-reverse;
 }
@@ -189,50 +267,16 @@
 	height: 100%;
 }
 
-.pt-1 {
-	padding-top: 10px !important;
-}
 
-.pt-2 {
-	padding-top: 20px !important;
-}
 
-.pt-3 {
-	padding-top: 30px !important;
-}
-
-
-
-.pb-1 {
-	padding-bottom: 10px !important;
-}
-
-.pb-2 {
-	padding-bottom: 20px !important;
-}
-
-.pb-3 {
-	padding-bottom: 30px !important;
-}
-
-.p-3 {
-    padding: 1rem!important;
-}
-
-.pt-0 {
-	padding-top: 0px !important;
-}
-
-
-.pb-0 {
-	padding-bottom: 0px !important;
+.text-center {
+	text-align: center;
 }
 
 .rounded-pill {
-    border-radius: 50rem!important;
+	border-radius: 50rem !important;
 }
 
-
 @media (max-width: 576px) {
 	.flex-row {
 		flex-direction: column !important;
@@ -240,10 +284,10 @@
 }
 @media (min-width: 768px) {
 	.justify-content-md-center {
-		justify-content: center!important;
+		justify-content: center !important;
 	}
 	.align-items-md-center {
-		align-items: center!important;
+		align-items: center !important;
 	}
 }
 

package/readme.md

@@ -1,87 +1,83 @@
 # react-asc
-handcrafted components inspired by Material Design and bundled with rollup.
 
+handcrafted components inspired by Material Design and bundled with rollup.
 
 ## showcase
-react-asc interactive showcase [link](https://react-asc.netlify.app)
 
+react-asc interactive showcase [link](https://react-asc.netlify.app)
 
 ## usage
 
 ### install package
-`npm install react-asc`
-
 
-### install twitter bootstrap 5
-react-asc aims to get rid of bootstrap - but for now you need Bootstrap
+`npm install react-asc`
 
-`npm install bootstrap`
+### install modern-normalize
 
+`npm install modern-normalize`
 
-### Include needed scss files
+### Include styles
 
 ```scss
-@import "~bootstrap/scss/bootstrap";
+@import "modern-normalize";
 @import "react-asc/react-asc.scss";
 ```
 
+### Usage
 
-### Start using it
 ```js
-import React from 'react';
-import { Button } from 'react-asc';
+import React from "react";
+import { Button } from "react-asc";
 
 const MyApp = () => {
-	return (
-		<Button>some button</Button>
-	)
-}
+	return <Button>some button</Button>;
+};
 ```
 
-
-## Included
-
-- Alert (beta)
-- AppBar
-- AutoComplete (beta)
-- Backdrop
-- Badge
-- Button
-- ButtonGroup
-- Breadcrumb
-- Card
-- Checkbox
-- Chip
-- ConditionalWrapper
-- DateSelect
-- Drawer
-- ExpansionPanel
-- FileInput
-- FloatingActionButton
-- Form (beta)
-- Grid
-- Icon
-- IconButton
-- Link
-- List
-- LoadingIndicator
-- Modal + ModalService
-- Menu
-- NumberSelect
-- Select
-- Snackbar + SnackbarService
-- SpeedDial
-- Stepper (beta)
-- Table (beta)
-- Tabs
-- TimeSelect
-- Textarea
-- Tooltip
-- TreeView (beta)
-- Typography
-
-
-## Credit 
+## Included Components
+
+-   Alert (beta)
+-   AppBar
+-   AutoComplete (beta)
+-   Backdrop
+-   Badge
+-   Breadcrumb
+-   Button
+-   ButtonGroup
+-   Card
+-   Checkbox
+-   Chip
+-   ConditionalWrapper
+-   DateSelect
+-   Drawer
+-   ExpansionPanel
+-   FileInput
+-   FloatingActionButton
+-   Form (beta)
+-   Grid
+-   Icon
+-   IconButton
+-   Link
+-   List
+-   LoadingIndicator
+-   Menu
+-   Modal + ModalService
+-   NumberSelect
+-   Select
+-   Sidebar
+-   Snackbar + SnackbarService
+-   SpeedDial
+-   Stepper (beta)
+-   Table (beta)
+-   Tabs
+-   Textarea
+-   TimeSelect
+-   Tooltip
+-   TreeView (beta)
+-   Typography
+
+
+## Credit
 
 uses fontawesome icons as SVGs
 https://fontawesome.com/license