gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.0.10

Browse Source
This commit is contained in:
xidedix 2018-02-02 17:09:03 +01:00
parent be9e2abe03
commit db35210ebb
15 changed files with 162 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -1,5 +1,13 @@
## [react](./REACT.md) version `changelog` ## [react](./REACT.md) version `changelog`
##### `v1.0.10`
- refactor: `<InputGroupAddon addonType="prepend">`
- refactor: `<InputGroupAddon addonType="append">`
- refactor: `<InputGroupText>`
- refactor: remove `<InputGroupButton>`
- update: reactstrap to `5.0.0-beta`
- update: dependencies
###### `v1.0.9` ###### `v1.0.9`
- refactor: Sidebar structure change - refactor: Sidebar structure change

14
React_Full_Project/package.json
View File

@ -1,10 +1,10 @@
{ {
"name": "@coreui/react", "name": "@coreui/react",
"version": "1.0.9", "version": "1.0.10",
"description": "Open Source Bootstrap Admin Template", "description": "Open Source Bootstrap Admin Template",
"author": "Łukasz Holeczek", "author": "Łukasz Holeczek",
"homepage": "http://coreui.io", "homepage": "http://coreui.io",
"copyright": "Copyright 2017 creativeLabs Łukasz Holeczek", "copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
"license": "MIT", "license": "MIT",
"private": true, "private": true,
"devDependencies": { "devDependencies": {
@ -14,7 +14,7 @@
"babel-preset-env": "1.6.1", "babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1", "babel-preset-react": "6.24.1",
"copy-webpack-plugin": "4.3.1", "copy-webpack-plugin": "4.3.1",
"css-hot-loader": "1.3.5", "css-hot-loader": "1.3.6",
"css-loader": "0.28.9", "css-loader": "0.28.9",
"extract-text-webpack-plugin": "3.0.2", "extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6", "file-loader": "1.1.6",
@ -24,11 +24,11 @@
"rimraf": "2.6.2", "rimraf": "2.6.2",
"sass-loader": "6.0.6", "sass-loader": "6.0.6",
"source-list-map": "2.0.0", "source-list-map": "2.0.0",
"style-loader": "0.19.1", "style-loader": "0.20.1",
"uglify-js": "3.3.7", "uglify-js": "3.3.9",
"url-loader": "0.6.2", "url-loader": "0.6.2",
"webpack": "3.10.0", "webpack": "3.10.0",
"webpack-dev-server": "2.9.7" "webpack-dev-server": "2.11.1"
}, },
"dependencies": { "dependencies": {
"bootstrap": "4.0.0", "bootstrap": "4.0.0",
@ -41,7 +41,7 @@
"react-dom": "16.2.0", "react-dom": "16.2.0",
"react-router-dom": "4.2.2", "react-router-dom": "4.2.2",
"react-transition-group": "2.2.1", "react-transition-group": "2.2.1",
"reactstrap": "5.0.0-alpha.4", "reactstrap": "5.0.0-beta",
"simple-line-icons": "2.4.1" "simple-line-icons": "2.4.1"
}, },
"scripts": { "scripts": {

8
React_Full_Project/scss/core/_card.scss
View File

@ -20,7 +20,7 @@
.card-header { .card-header {
.icon-bg { .icon-bg {
display: inline-body; display: inline-block;
padding: $card-spacer-y $card-spacer-x !important; padding: $card-spacer-y $card-spacer-x !important;
margin-top: -$card-spacer-y; margin-top: -$card-spacer-y;
margin-right: $card-spacer-x; margin-right: $card-spacer-x;
@ -135,12 +135,12 @@
} }
[class^="icon-"], [class*=" icon-"] { [class^="icon-"], [class*=" icon-"] {
display: inline-body; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
i { i {
display: inline-body; display: inline-block;
transition: .4s; transition: .4s;
} }
@ -153,7 +153,7 @@
width: 230px; width: 230px;
margin: 6px; margin: 6px;
.input-group-addon { .input-group-prepend, .input-group-append {
background: #fff; background: #fff;
} }

5
React_Full_Project/scss/core/_input-group.scss
View File

@ -1,6 +1,5 @@
.input-group-addon, .input-group-prepend,
.input-group-btn { .input-group-append {
min-width: 40px;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; // Match the inputs vertical-align: middle; // Match the inputs
} }

2
React_Full_Project/scss/style.scss
View File

@ -1,6 +1,6 @@
/*! /*!
* CoreUI - Open Source Bootstrap Admin Template * CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.9 * @version v1.0.10
* @link http://coreui.io * @link http://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek * Copyright (c) 2018 creativeLabs Łukasz Holeczek
* @license MIT * @license MIT

168
React_Full_Project/src/views/Base/Forms/Forms.js
View File

@ -19,7 +19,7 @@ import {
Input, Input,
InputGroup, InputGroup,
InputGroupAddon, InputGroupAddon,
InputGroupButton InputGroupText
} from 'reactstrap'; } from 'reactstrap';
class Forms extends Component { class Forms extends Component {
@ -612,11 +612,11 @@ class Forms extends Component {
<FormGroup row> <FormGroup row>
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text"> <InputGroupText>
<i className="fa fa-user"></i> <i className="fa fa-user"></i>
</span> </InputGroupText>
</div> </InputGroupAddon>
<Input type="text" id="input1-group1" name="input1-group1" placeholder="Username"/> <Input type="text" id="input1-group1" name="input1-group1" placeholder="Username"/>
</InputGroup> </InputGroup>
</Col> </Col>
@ -625,26 +625,26 @@ class Forms extends Component {
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<Input type="email" id="input2-group1" name="input2-group1" placeholder="Email"/> <Input type="email" id="input2-group1" name="input2-group1" placeholder="Email"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<span className="input-group-text"> <InputGroupText>
<i className="fa fa-envelope-o"></i> <i className="fa fa-envelope-o"></i>
</span> </InputGroupText>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text"> <InputGroupText>
<i className="fa fa-euro"></i> <i className="fa fa-euro"></i>
</span> </InputGroupText>
</div> </InputGroupAddon>
<Input type="text" id="input3-group1" name="input3-group1" placeholder=".."/> <Input type="text" id="input3-group1" name="input3-group1" placeholder=".."/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<span className="input-group-text">.00</span> <InputGroupText>.00</InputGroupText>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</Col> </Col>
</FormGroup> </FormGroup>
@ -666,9 +666,9 @@ class Forms extends Component {
<FormGroup row> <FormGroup row>
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-search"></i> Search</Button> <Button type="button" color="primary"><i className="fa fa-search"></i> Search</Button>
</div> </InputGroupAddon>
<Input type="text" id="input1-group2" name="input1-group2" placeholder="Username"/> <Input type="text" id="input1-group2" name="input1-group2" placeholder="Username"/>
</InputGroup> </InputGroup>
</Col> </Col>
@ -677,22 +677,22 @@ class Forms extends Component {
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<Input type="email" id="input2-group2" name="input2-group2" placeholder="Email"/> <Input type="email" id="input2-group2" name="input2-group2" placeholder="Email"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<Button type="button" color="primary">Submit</Button> <Button type="button" color="primary">Submit</Button>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-facebook"></i></Button> <Button type="button" color="primary"><i className="fa fa-facebook"></i></Button>
</div> </InputGroupAddon>
<Input type="text" id="input3-group2" name="input3-group2" placeholder="Search"/> <Input type="text" id="input3-group2" name="input3-group2" placeholder="Search"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<Button type="button" color="primary"><i className="fa fa-twitter"></i></Button> <Button type="button" color="primary"><i className="fa fa-twitter"></i></Button>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</Col> </Col>
</FormGroup> </FormGroup>
@ -714,7 +714,7 @@ class Forms extends Component {
<FormGroup row> <FormGroup row>
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<ButtonDropdown isOpen={this.state.first} <ButtonDropdown isOpen={this.state.first}
toggle={() => { this.setState({ first: !this.state.first }); }}> toggle={() => { this.setState({ first: !this.state.first }); }}>
<DropdownToggle caret color="primary"> <DropdownToggle caret color="primary">
@ -728,7 +728,7 @@ class Forms extends Component {
<DropdownItem>Separated link</DropdownItem> <DropdownItem>Separated link</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
</div> </InputGroupAddon>
<Input type="text" id="input1-group3" name="input1-group3" placeholder="Username"/> <Input type="text" id="input1-group3" name="input1-group3" placeholder="Username"/>
</InputGroup> </InputGroup>
</Col> </Col>
@ -737,7 +737,7 @@ class Forms extends Component {
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<Input type="email" id="input2-group3" name="input2-group3" placeholder="Email"/> <Input type="email" id="input2-group3" name="input2-group3" placeholder="Email"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<ButtonDropdown isOpen={this.state.second} <ButtonDropdown isOpen={this.state.second}
toggle={() => { this.setState({ second: !this.state.second }); }}> toggle={() => { this.setState({ second: !this.state.second }); }}>
<DropdownToggle caret color="primary"> <DropdownToggle caret color="primary">
@ -751,14 +751,14 @@ class Forms extends Component {
<DropdownItem>Separated link</DropdownItem> <DropdownItem>Separated link</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<ButtonDropdown isOpen={this.state.third} <ButtonDropdown isOpen={this.state.third}
toggle={() => { this.setState({ third: !this.state.third }); }}> toggle={() => { this.setState({ third: !this.state.third }); }}>
{/*<Button id="caret" color="primary">Action</Button>*/} {/*<Button id="caret" color="primary">Action</Button>*/}
@ -771,9 +771,9 @@ class Forms extends Component {
<DropdownItem>Separated link</DropdownItem> <DropdownItem>Separated link</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
</div> </InputGroupAddon>
<Input type="text" id="input3-group3" name="input3-group3" placeholder=".."/> <Input type="text" id="input3-group3" name="input3-group3" placeholder=".."/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<ButtonDropdown isOpen={this.state.fourth} <ButtonDropdown isOpen={this.state.fourth}
toggle={() => { this.setState({ fourth: !this.state.fourth }); }}> toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
<DropdownToggle caret color="primary"> <DropdownToggle caret color="primary">
@ -787,7 +787,7 @@ class Forms extends Component {
<DropdownItem>Separated link</DropdownItem> <DropdownItem>Separated link</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</Col> </Col>
</FormGroup> </FormGroup>
@ -930,35 +930,35 @@ class Forms extends Component {
<Form action="" method="post"> <Form action="" method="post">
<FormGroup> <FormGroup>
<InputGroup> <InputGroup>
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text">Username</span> <InputGroupText>Username</InputGroupText>
</div> </InputGroupAddon>
<Input type="text" id="username3" name="username3"/> <Input type="text" id="username3" name="username3"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<span className="input-group-text"><i className="fa fa-user"></i></span> <InputGroupText><i className="fa fa-user"></i></InputGroupText>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<InputGroup> <InputGroup>
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text">Email</span> <InputGroupText>Email</InputGroupText>
</div> </InputGroupAddon>
<Input type="email" id="email3" name="email3"/> <Input type="email" id="email3" name="email3"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<span className="input-group-text"><i className="fa fa-envelope"></i></span> <InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<InputGroup> <InputGroup>
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text">Password</span> <InputGroupText>Password</InputGroupText>
</div> </InputGroupAddon>
<Input type="password" id="password3" name="password3"/> <Input type="password" id="password3" name="password3"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<span className="input-group-text"><i className="fa fa-asterisk"></i></span> <InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<FormGroup className="form-actions"> <FormGroup className="form-actions">
@ -978,25 +978,25 @@ class Forms extends Component {
<FormGroup> <FormGroup>
<InputGroup> <InputGroup>
<Input type="text" id="username2" name="username2" placeholder="Username"/> <Input type="text" id="username2" name="username2" placeholder="Username"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<span className="input-group-text"><i className="fa fa-user"></i></span> <InputGroupText><i className="fa fa-user"></i></InputGroupText>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<InputGroup> <InputGroup>
<Input type="email" id="email2" name="email2" placeholder="Email"/> <Input type="email" id="email2" name="email2" placeholder="Email"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<span className="input-group-text"><i className="fa fa-envelope"></i></span> <InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<InputGroup> <InputGroup>
<Input type="password" id="password2" name="password2" placeholder="Password"/> <Input type="password" id="password2" name="password2" placeholder="Password"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<span className="input-group-text"><i className="fa fa-asterisk"></i></span> <InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<FormGroup className="form-actions"> <FormGroup className="form-actions">
@ -1015,25 +1015,25 @@ class Forms extends Component {
<Form action="" method="post"> <Form action="" method="post">
<FormGroup> <FormGroup>
<InputGroup> <InputGroup>
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text"><i className="fa fa-user"></i></span> <InputGroupText><i className="fa fa-user"></i></InputGroupText>
</div> </InputGroupAddon>
<Input type="text" id="username" name="username" placeholder="Username"/> <Input type="text" id="username" name="username" placeholder="Username"/>
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<InputGroup> <InputGroup>
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text"><i className="fa fa-envelope"></i></span> <InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</div> </InputGroupAddon>
<Input type="email" id="email" name="email" placeholder="Email"/> <Input type="email" id="email" name="email" placeholder="Email"/>
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<InputGroup> <InputGroup>
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text"><i className="fa fa-asterisk"></i></span> <InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</div> </InputGroupAddon>
<Input type="password" id="password" name="password" placeholder="Password"/> <Input type="password" id="password" name="password" placeholder="Password"/>
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
@ -1063,9 +1063,9 @@ class Forms extends Component {
<Label htmlFor="prependedInput">Prepended text</Label> <Label htmlFor="prependedInput">Prepended text</Label>
<div className="controls"> <div className="controls">
<InputGroup className="input-prepend"> <InputGroup className="input-prepend">
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text">@</span> <InputGroupText>@</InputGroupText>
</div> </InputGroupAddon>
<Input id="prependedInput" size="16" type="text"/> <Input id="prependedInput" size="16" type="text"/>
</InputGroup> </InputGroup>
<p className="help-block">Here's some help text</p> <p className="help-block">Here's some help text</p>
@ -1076,9 +1076,9 @@ class Forms extends Component {
<div className="controls"> <div className="controls">
<InputGroup> <InputGroup>
<Input id="appendedInput" size="16" type="text"/> <Input id="appendedInput" size="16" type="text"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<span className="input-group-text">.00</span> <InputGroupText>.00</InputGroupText>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
<span className="help-block">Here's more help text</span> <span className="help-block">Here's more help text</span>
</div> </div>
@ -1087,13 +1087,13 @@ class Forms extends Component {
<Label htmlFor="appendedPrependedInput">Append and prepend</Label> <Label htmlFor="appendedPrependedInput">Append and prepend</Label>
<div className="controls"> <div className="controls">
<InputGroup className="input-prepend"> <InputGroup className="input-prepend">
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text">$</span> <InputGroupText>$</InputGroupText>
</div> </InputGroupAddon>
<Input id="appendedPrependedInput" size="16" type="text"/> <Input id="appendedPrependedInput" size="16" type="text"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<span className="input-group-text">.00</span> <InputGroupText>.00</InputGroupText>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</div> </div>
</FormGroup> </FormGroup>
@ -1102,9 +1102,9 @@ class Forms extends Component {
<div className="controls"> <div className="controls">
<InputGroup> <InputGroup>
<Input id="appendedInputButton" size="16" type="text"/> <Input id="appendedInputButton" size="16" type="text"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<Button color="secondary">Go!</Button> <Button color="secondary">Go!</Button>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</div> </div>
</FormGroup> </FormGroup>
@ -1113,10 +1113,10 @@ class Forms extends Component {
<div className="controls"> <div className="controls">
<InputGroup> <InputGroup>
<Input id="appendedInputButtons" size="16" type="text"/> <Input id="appendedInputButtons" size="16" type="text"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<Button color="secondary">Search</Button> <Button color="secondary">Search</Button>
<Button color="secondary">Options</Button> <Button color="secondary">Options</Button>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</div> </div>
</FormGroup> </FormGroup>

6
React_Full_Project/src/views/Buttons/ButtonGroups/ButtonGroups.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, Button, ButtonGroup, ButtonToolbar, Input, InputGroup, InputGroupAddon } from 'reactstrap'; import {Row, Col, Card, CardHeader, CardBody, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, Button, ButtonGroup, ButtonToolbar, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
class ButtonGroups extends Component { class ButtonGroups extends Component {
@ -77,7 +77,7 @@ class ButtonGroups extends Component {
<Button>4</Button> <Button>4</Button>
</ButtonGroup> </ButtonGroup>
<InputGroup> <InputGroup>
<div className="input-group-prepend"><span className="input-group-text">@</span></div> <InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>
<Input placeholder="Input group example" /> <Input placeholder="Input group example" />
</InputGroup> </InputGroup>
</ButtonToolbar> </ButtonToolbar>
@ -89,7 +89,7 @@ class ButtonGroups extends Component {
<Button>4</Button> <Button>4</Button>
</ButtonGroup> </ButtonGroup>
<InputGroup> <InputGroup>
<div className="input-group-prepend"><span className="input-group-text">@</span></div> <InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>
<Input placeholder="Input group example" /> <Input placeholder="Input group example" />
</InputGroup> </InputGroup>
</ButtonToolbar> </ButtonToolbar>

18
React_Full_Project/src/views/Pages/Login/Login.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Container, Row, Col, CardGroup, Card, CardBody, Button, Input, InputGroup, InputGroupAddon} from 'reactstrap'; import {Container, Row, Col, CardGroup, Card, CardBody, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap';
class Login extends Component { class Login extends Component {
@ -15,19 +15,19 @@ class Login extends Component {
<h1>Login</h1> <h1>Login</h1>
<p className="text-muted">Sign In to your account</p> <p className="text-muted">Sign In to your account</p>
<InputGroup className="mb-3"> <InputGroup className="mb-3">
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text"> <InputGroupText>
<i className="icon-user"></i> <i className="icon-user"></i>
</span> </InputGroupText>
</div> </InputGroupAddon>
<Input type="text" placeholder="Username"/> <Input type="text" placeholder="Username"/>
</InputGroup> </InputGroup>
<InputGroup className="mb-4"> <InputGroup className="mb-4">
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text"> <InputGroupText>
<i className="icon-lock"></i> <i className="icon-lock"></i>
</span> </InputGroupText>
</div> </InputGroupAddon>
<Input type="password" placeholder="Password"/> <Input type="password" placeholder="Password"/>
</InputGroup> </InputGroup>
<Row> <Row>

14
React_Full_Project/src/views/Pages/Page404/Page404.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Container, Row, Col, Button, Input, InputGroupAddon, InputGroup, InputGroupButton} from 'reactstrap'; import {Container, Row, Col, Button, Input, InputGroupAddon, InputGroup, InputGroupText} from 'reactstrap';
class Page404 extends Component { class Page404 extends Component {
render() { render() {
@ -14,15 +14,15 @@ class Page404 extends Component {
<p className="text-muted float-left">The page you are looking for was not found.</p> <p className="text-muted float-left">The page you are looking for was not found.</p>
</div> </div>
<InputGroup className="input-prepend"> <InputGroup className="input-prepend">
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text"> <InputGroupText>
<i className="fa fa-search"></i> <i className="fa fa-search"></i>
</span> </InputGroupText>
</div> </InputGroupAddon>
<Input size="16" type="text" placeholder="What are you looking for?"/> <Input size="16" type="text" placeholder="What are you looking for?"/>
<div className="input-group-append"> <InputGroupAddon addonType="append">
<Button color="info">Search</Button> <Button color="info">Search</Button>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</Col> </Col>
</Row> </Row>

14
React_Full_Project/src/views/Pages/Page500/Page500.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Container, Row, Col, Button, Input, InputGroup, InputGroupAddon, InputGroupButton} from 'reactstrap'; import {Container, Row, Col, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap';
class Page500 extends Component { class Page500 extends Component {
render() { render() {
@ -14,15 +14,15 @@ class Page500 extends Component {
<p className="text-muted float-left">The page you are looking for is temporarily unavailable.</p> <p className="text-muted float-left">The page you are looking for is temporarily unavailable.</p>
</span> </span>
<InputGroup className="input-prepend"> <InputGroup className="input-prepend">
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text"> <InputGroupText>
<i className="fa fa-search"></i> <i className="fa fa-search"></i>
</span> </InputGroupText>
</div> </InputGroupAddon>
<Input size="16" type="text" placeholder="What are you looking for?" /> <Input size="16" type="text" placeholder="What are you looking for?" />
<div className="input-group-append"> <InputGroupAddon addonType="append">
<Button color="info">Search</Button> <Button color="info">Search</Button>
</div> </InputGroupAddon>
</InputGroup> </InputGroup>
</Col> </Col>
</Row> </Row>

32
React_Full_Project/src/views/Pages/Register/Register.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Container, Row, Col, Card, CardBody, CardFooter, Button, Input, InputGroup, InputGroupAddon} from 'reactstrap'; import {Container, Row, Col, Card, CardBody, CardFooter, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap';
class Register extends Component { class Register extends Component {
render() { render() {
@ -13,33 +13,33 @@ class Register extends Component {
<h1>Register</h1> <h1>Register</h1>
<p className="text-muted">Create your account</p> <p className="text-muted">Create your account</p>
<InputGroup className="mb-3"> <InputGroup className="mb-3">
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text"> <InputGroupText>
<i className="icon-user"></i> <i className="icon-user"></i>
</span> </InputGroupText>
</div> </InputGroupAddon>
<Input type="text" placeholder="Username"/> <Input type="text" placeholder="Username"/>
</InputGroup> </InputGroup>
<InputGroup className="mb-3"> <InputGroup className="mb-3">
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text">@</span> <InputGroupText>@</InputGroupText>
</div> </InputGroupAddon>
<Input type="text" placeholder="Email"/> <Input type="text" placeholder="Email"/>
</InputGroup> </InputGroup>
<InputGroup className="mb-3"> <InputGroup className="mb-3">
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text"> <InputGroupText>
<i className="icon-lock"></i> <i className="icon-lock"></i>
</span> </InputGroupText>
</div> </InputGroupAddon>
<Input type="password" placeholder="Password"/> <Input type="password" placeholder="Password"/>
</InputGroup> </InputGroup>
<InputGroup className="mb-4"> <InputGroup className="mb-4">
<div className="input-group-prepend"> <InputGroupAddon addonType="prepend">
<span className="input-group-text"> <InputGroupText>
<i className="icon-lock"></i> <i className="icon-lock"></i>
</span> </InputGroupText>
</div> </InputGroupAddon>
<Input type="password" placeholder="Repeat password"/> <Input type="password" placeholder="Repeat password"/>
</InputGroup> </InputGroup>
<Button color="success" block>Create Account</Button> <Button color="success" block>Create Account</Button>

14
React_Starter/package.json
View File

@ -1,10 +1,10 @@
{ {
"name": "@coreui/react", "name": "@coreui/react",
"version": "1.0.9", "version": "1.0.10",
"description": "Open Source Bootstrap Admin Template", "description": "Open Source Bootstrap Admin Template",
"author": "Łukasz Holeczek", "author": "Łukasz Holeczek",
"homepage": "http://coreui.io", "homepage": "http://coreui.io",
"copyright": "Copyright 2017 creativeLabs Łukasz Holeczek", "copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
"license": "MIT", "license": "MIT",
"private": true, "private": true,
"devDependencies": { "devDependencies": {
@ -14,7 +14,7 @@
"babel-preset-env": "1.6.1", "babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1", "babel-preset-react": "6.24.1",
"copy-webpack-plugin": "4.3.1", "copy-webpack-plugin": "4.3.1",
"css-hot-loader": "1.3.5", "css-hot-loader": "1.3.6",
"css-loader": "0.28.9", "css-loader": "0.28.9",
"extract-text-webpack-plugin": "3.0.2", "extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6", "file-loader": "1.1.6",
@ -24,11 +24,11 @@
"rimraf": "2.6.2", "rimraf": "2.6.2",
"sass-loader": "6.0.6", "sass-loader": "6.0.6",
"source-list-map": "2.0.0", "source-list-map": "2.0.0",
"style-loader": "0.19.1", "style-loader": "0.20.1",
"uglify-js": "3.3.7", "uglify-js": "3.3.9",
"url-loader": "0.6.2", "url-loader": "0.6.2",
"webpack": "3.10.0", "webpack": "3.10.0",
"webpack-dev-server": "2.9.7" "webpack-dev-server": "2.11.1"
}, },
"dependencies": { "dependencies": {
"bootstrap": "4.0.0", "bootstrap": "4.0.0",
@ -41,7 +41,7 @@
"react-dom": "16.2.0", "react-dom": "16.2.0",
"react-router-dom": "4.2.2", "react-router-dom": "4.2.2",
"react-transition-group": "2.2.1", "react-transition-group": "2.2.1",
"reactstrap": "5.0.0-alpha.4", "reactstrap": "5.0.0-beta",
"simple-line-icons": "2.4.1" "simple-line-icons": "2.4.1"
}, },
"scripts": { "scripts": {

8
React_Starter/scss/core/_card.scss
View File

@ -20,7 +20,7 @@
.card-header { .card-header {
.icon-bg { .icon-bg {
display: inline-body; display: inline-block;
padding: $card-spacer-y $card-spacer-x !important; padding: $card-spacer-y $card-spacer-x !important;
margin-top: -$card-spacer-y; margin-top: -$card-spacer-y;
margin-right: $card-spacer-x; margin-right: $card-spacer-x;
@ -135,12 +135,12 @@
} }
[class^="icon-"], [class*=" icon-"] { [class^="icon-"], [class*=" icon-"] {
display: inline-body; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
i { i {
display: inline-body; display: inline-block;
transition: .4s; transition: .4s;
} }
@ -153,7 +153,7 @@
width: 230px; width: 230px;
margin: 6px; margin: 6px;
.input-group-addon { .input-group-prepend, .input-group-append {
background: #fff; background: #fff;
} }

5
React_Starter/scss/core/_input-group.scss
View File

@ -1,6 +1,5 @@
.input-group-addon, .input-group-prepend,
.input-group-btn { .input-group-append {
min-width: 40px;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; // Match the inputs vertical-align: middle; // Match the inputs
} }

2
React_Starter/scss/style.scss
View File

@ -1,6 +1,6 @@
/*! /*!
* CoreUI - Open Source Bootstrap Admin Template * CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.9 * @version v1.0.10
* @link http://coreui.io * @link http://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek * Copyright (c) 2018 creativeLabs Łukasz Holeczek
* @license MIT * @license MIT