forked from community/device-mgt-core
Menaka Jayawardena
7 years ago
parent
db5d71b9a7
commit
828bb316f6
2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx
2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Base/BaseLayout.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx
23
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
23
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/ApplicationCreate.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/ApplicationCreate.jsx
16
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
16
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step1.jsx
12
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
12
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step2.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step2.jsx
11
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
11
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step3.jsx
22
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step4.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
22
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step4.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/Step4.jsx
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/index.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/index.js
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/index.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Create/CreateSteps/index.js
@ -1,37 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class ApplicationEdit extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div id="application-edit-base">
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ApplicationEdit;
|
||||
@ -0,0 +1,169 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React, {Component} from 'react';
|
||||
import './baseLayout.css';
|
||||
import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
|
||||
import {Button, Col, Row} from "reactstrap";
|
||||
|
||||
class ApplicationEdit extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.getTabContent = this.getTabContent.bind(this);
|
||||
this.state = {
|
||||
general: "active",
|
||||
release: "",
|
||||
pkgmgt: "",
|
||||
activeTab: 1
|
||||
}
|
||||
}
|
||||
|
||||
handleClick(event) {
|
||||
event.stopPropagation();
|
||||
console.log(typeof event.target.value);
|
||||
const key = event.target.value;
|
||||
|
||||
switch (key) {
|
||||
case "1": {
|
||||
console.log("Step1");
|
||||
this.setState({activeTab: 1, general: "active", release: "", pkgmgt: ""});
|
||||
break;
|
||||
}
|
||||
case "2": {
|
||||
this.setState({activeTab: 2, general: "", release: "active", pkgmgt: ""});
|
||||
break;
|
||||
}
|
||||
case "3": {
|
||||
this.setState({activeTab: 3, general: "", release: "", pkgmgt: "active"});
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
return "No Content";
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getTabContent(tab) {
|
||||
|
||||
switch (tab) {
|
||||
case 1: {
|
||||
return ("Step 1")
|
||||
}
|
||||
case 2: {
|
||||
return <ReleaseManager/>
|
||||
}
|
||||
case 3: {
|
||||
return ("Step3")
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.state);
|
||||
return (
|
||||
<div id="application-edit-base">
|
||||
|
||||
<Row id="application-edit-header">
|
||||
<Col>Application Name</Col>
|
||||
</Row>
|
||||
<Row id="application-edit-main-container">
|
||||
<Col xs="3">
|
||||
<div className="tab">
|
||||
<button className={this.state.general} value={1} onClick={this.handleClick.bind(this)}>
|
||||
General
|
||||
</button>
|
||||
<button className={this.state.release} value={2} onClick={this.handleClick.bind(this)}>
|
||||
App
|
||||
Releases
|
||||
</button>
|
||||
<button className={this.state.pkgmgt} value={3} onClick={this.handleClick.bind(this)}>
|
||||
Package Manager
|
||||
</button>
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs="9">
|
||||
<div id="app-edit-content">
|
||||
<Row>
|
||||
<Col xs="12">
|
||||
<div id="application-edit-outer-content">
|
||||
{/* Application edit content */}
|
||||
<div id="application-edit-content">
|
||||
{this.getTabContent(this.state.activeTab)}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row >
|
||||
<Col xs="3 offset-9">
|
||||
<Button>Save</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/*<Row>*/}
|
||||
{/*/!* Contains the application Name and Save button*!/*/}
|
||||
{/*<div id="application-edit-header">*/}
|
||||
{/*<Col>*/}
|
||||
{/*<span className="application-header-text">*/}
|
||||
{/*Header*/}
|
||||
{/*</span>*/}
|
||||
{/*</Col>*/}
|
||||
{/*<Col>*/}
|
||||
{/*<Button id="app-save-btn" className="save-btn">Save</Button>*/}
|
||||
{/*</Col>*/}
|
||||
{/*</div>*/}
|
||||
{/*</Row>*/}
|
||||
{/*<div id="application-edit-main-container">*/}
|
||||
{/*<Row>*/}
|
||||
{/*<Col xs="6" sm="4">*/}
|
||||
|
||||
{/*/!* Contains side bar items, General, App Release, Package Manager *!/*/}
|
||||
{/*<div className="tab">*/}
|
||||
{/*<button className={this.state.general} value={1} onClick={this.handleClick.bind(this)}>*/}
|
||||
{/*General*/}
|
||||
{/*</button>*/}
|
||||
{/*<button className={this.state.release} value={2} onClick={this.handleClick.bind(this)}>*/}
|
||||
{/*App*/}
|
||||
{/*Releases*/}
|
||||
{/*</button>*/}
|
||||
{/*<button className={this.state.pkgmgt} value={3} onClick={this.handleClick.bind(this)}>*/}
|
||||
{/*Package Manager*/}
|
||||
{/*</button>*/}
|
||||
{/*</div>*/}
|
||||
{/*</Col>*/}
|
||||
{/*<Col xs="6" sm="4">*/}
|
||||
{/*<div id="application-edit-outer-content">*/}
|
||||
{/*/!* Application edit content *!/*/}
|
||||
{/*<div id="application-edit-content">*/}
|
||||
{/*{this.getTabContent(this.state.activeTab)}*/}
|
||||
{/*</div>*/}
|
||||
{/*</div>*/}
|
||||
{/*</Col>*/}
|
||||
{/*</Row>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ApplicationEdit;
|
||||
@ -0,0 +1,94 @@
|
||||
|
||||
#application-edit-base {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
background-color: #f6f6f6;
|
||||
border: solid 1px #828282;
|
||||
}
|
||||
|
||||
#application-edit-header {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: #9a9a9a;
|
||||
border: solid 1px #a2a2a2;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.application-header-text {
|
||||
margin: 10px 0px 0px 10px;
|
||||
}
|
||||
|
||||
#save-btn-content {
|
||||
float: right;
|
||||
|
||||
}
|
||||
|
||||
#app-save-btn {
|
||||
border-radius: 0%;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
margin: 5px 5px 5px 0px;
|
||||
height: 70%;
|
||||
width: 50%;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.save-btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*Tab styling*/
|
||||
div.tab {
|
||||
float: left;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f1f1f1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Style the tab buttons */
|
||||
div.tab button {
|
||||
display: block;
|
||||
background-color: inherit;
|
||||
color: black;
|
||||
padding: 15px 16px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* Change background color of buttons on hover */
|
||||
div.tab button:hover {
|
||||
background-color: #ddd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Create an active/current "tab button" class */
|
||||
div.tab button.active {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
|
||||
#application-edit-main-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#application-edit-outer-content {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#application-edit-content {
|
||||
margin: 5px 10px 5px 10px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#app-edit-content {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
16
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/ReleaseManager.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseContent.jsx
16
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/ReleaseManager.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Release/ReleaseContent.jsx
@ -0,0 +1,96 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React, {Component} from 'react';
|
||||
import './release-mgt.css';
|
||||
import {Button, Col, Row} from "reactstrap";
|
||||
|
||||
class ReleaseManager extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.getNoReleaseContent = this.getNoReleaseContent.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Holds a generic message saying there are no current release in the specified release channel.
|
||||
* */
|
||||
getNoReleaseContent(release) {
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<Col sm="12" md={{size: 8, offset: 4}}>
|
||||
<p>You have no on-going {release} Releases!</p>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12" md={{size: 8, offset: 5}}>
|
||||
<Button className="button-add" id={release.toLowerCase()}>Create a Release</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="release-mgt-content">
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="production">
|
||||
<span>Production Releases</span>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
|
||||
{this.getNoReleaseContent("Production")}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="beta">
|
||||
<span>Beta Releases</span>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
{this.getNoReleaseContent("Beta")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="alpha">
|
||||
<span>Alpha Releases</span>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
{this.getNoReleaseContent("Alpha")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ReleaseManager;
|
||||
@ -0,0 +1,32 @@
|
||||
.release-content {
|
||||
height: 180px;
|
||||
width: 95%;
|
||||
border: dashed 1px #626262;
|
||||
border-radius: 2%;
|
||||
position: relative;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.release-content:after {
|
||||
content: "";
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.release {
|
||||
margin: 30px 10px 20px 30px;
|
||||
}
|
||||
|
||||
.no-release-content {
|
||||
position: absolute;
|
||||
margin-top: 10px;
|
||||
left: 40%;
|
||||
}
|
||||
|
||||
.button-add:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.release-inner {
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx
2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTable.jsx
2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableHeader.jsx
2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableHeader.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableHeader.jsx
2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx
2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTableRow.jsx → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/DataTable/DataTableRow.jsx
@ -0,0 +1,19 @@
|
||||
import React, {Component} from 'react';
|
||||
import './input.css';
|
||||
|
||||
class Input2 extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="custom-input">
|
||||
<input type="text" required/>
|
||||
<span className="highlight"></span>
|
||||
<span className="under-line"></span>
|
||||
<label>Name</label>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default Input2;
|
||||
@ -0,0 +1,118 @@
|
||||
/** {*/
|
||||
/*box-sizing: border-box;*/
|
||||
/*}*/
|
||||
|
||||
/*.custom-input {*/
|
||||
/*position: relative;*/
|
||||
/*margin-bottom: 45px;*/
|
||||
/*}*/
|
||||
|
||||
/*input {*/
|
||||
/*font-size: 18px;*/
|
||||
/*padding: 10px 10px 10px 5px;*/
|
||||
/*display: block;*/
|
||||
/*width: 300px;*/
|
||||
/*border: none;*/
|
||||
/*border-bottom: 1px solid #757575;*/
|
||||
/*}*/
|
||||
|
||||
/*input:focus {*/
|
||||
/*outline: none;*/
|
||||
/*}*/
|
||||
|
||||
/*label {*/
|
||||
/*color: #999;*/
|
||||
/*font-size: 18px;*/
|
||||
/*font-weight: normal;*/
|
||||
/*position: absolute;*/
|
||||
/*pointer-events: none;*/
|
||||
/*left: 5px;*/
|
||||
/*top: 10px;*/
|
||||
/*transition: 0.2s ease all;*/
|
||||
/*-moz-transition: 0.2s ease all;*/
|
||||
/*-webkit-transition: 0.2s ease all;*/
|
||||
/*}*/
|
||||
|
||||
/*!* active state *!*/
|
||||
/*input:focus ~ label, input:valid ~ label {*/
|
||||
/*top: -20px;*/
|
||||
/*font-size: 14px;*/
|
||||
/*color: #5264AE;*/
|
||||
/*}*/
|
||||
|
||||
/*.under-line {*/
|
||||
/*position: relative;*/
|
||||
/*display: block;*/
|
||||
/*width: 300px;*/
|
||||
/*}*/
|
||||
|
||||
/*.under-line:before, .under-line:after {*/
|
||||
/*content: '';*/
|
||||
/*height: 2px;*/
|
||||
/*width: 0;*/
|
||||
/*bottom: 1px;*/
|
||||
/*position: absolute;*/
|
||||
/*background: #5264AE;*/
|
||||
/*transition: 0.2s ease all;*/
|
||||
/*-moz-transition: 0.2s ease all;*/
|
||||
/*-webkit-transition: 0.2s ease all;*/
|
||||
/*}*/
|
||||
|
||||
/*.under-line:before {*/
|
||||
/*left: 50%;*/
|
||||
/*}*/
|
||||
|
||||
/*.under-line:after {*/
|
||||
/*right: 50%;*/
|
||||
/*}*/
|
||||
|
||||
/*!* active state *!*/
|
||||
/*input:focus ~ .under-line:before, input:focus ~ .under-line:after {*/
|
||||
/*width: 50%;*/
|
||||
/*}*/
|
||||
|
||||
/*.highlight {*/
|
||||
/*position: absolute;*/
|
||||
/*height: 60%;*/
|
||||
/*width: 100px;*/
|
||||
/*top: 25%;*/
|
||||
/*left: 0;*/
|
||||
/*pointer-events: none;*/
|
||||
/*opacity: 0.5;*/
|
||||
/*}*/
|
||||
|
||||
/*input:focus ~ .highlight {*/
|
||||
/*-webkit-animation: inputHighlighter 0.3s ease;*/
|
||||
/*-moz-animation: inputHighlighter 0.3s ease;*/
|
||||
/*animation: inputHighlighter 0.3s ease;*/
|
||||
/*}*/
|
||||
|
||||
/*@-webkit-keyframes inputHighlighter {*/
|
||||
/*from {*/
|
||||
/*background: #5264AE;*/
|
||||
/*}*/
|
||||
/*to {*/
|
||||
/*width: 0;*/
|
||||
/*background: transparent;*/
|
||||
/*}*/
|
||||
/*}*/
|
||||
|
||||
/*@-moz-keyframes inputHighlighter {*/
|
||||
/*from {*/
|
||||
/*background: #5264AE;*/
|
||||
/*}*/
|
||||
/*to {*/
|
||||
/*width: 0;*/
|
||||
/*background: transparent;*/
|
||||
/*}*/
|
||||
/*}*/
|
||||
|
||||
/*@keyframes inputHighlighter {*/
|
||||
/*from {*/
|
||||
/*background: #5264AE;*/
|
||||
/*}*/
|
||||
/*to {*/
|
||||
/*width: 0;*/
|
||||
/*background: transparent;*/
|
||||
/*}*/
|
||||
/*}*/
|
||||
Loading…
Reference in new issue