community/device-mgt-core
1
0
Fork 0
mirror of https://repository.entgra.net/community/device-mgt-core.git synced 2025-10-06 02:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modified stepper based on material design specs.

Browse Source
This commit is contained in:
Menaka Jayawardena 2017-10-08 10:47:20 +05:30
parent bde1f80697
commit 7ec90258d5
3 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Step.jsx
View File

@ -37,7 +37,7 @@ class Step extends Component {
let stepIndexContent = index === passed || index < passed ? <i className="fw fw-check"></i> : index; let stepIndexContent = index === passed || index < passed ? <i className="fw fw-check"></i> : index;
return ( return (
<div className="step"> <div className="step col-3">
<div className="step-content"> <div className="step-content">
<div className={indexClassNames}> <div className={indexClassNames}>
<span> <span>
@ -46,14 +46,14 @@ class Step extends Component {
</div> </div>
<div className={indexTextClassNames}> <div className={indexTextClassNames}>
<div> <div>
{text} {!finalStep? <i className="stepper-next-arrow fw fw-right-arrow"></i> : <i/>} {text}
</div> </div>
{optional ? {optional ?
<div className="stepper-optional-text"> <div className="stepper-optional-text">
(<FormattedMessage id="Optional" defaultMessage="Optional"/>) (<FormattedMessage id="Optional" defaultMessage="Optional"/>)
</div>: <div/>} </div> : <div/>}
</div> </div>
{!finalStep ? <i className="stepper-next-arrow fw fw-right-arrow"></i> : <i/>}
</div> </div>
</div> </div>
) )

2
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/Stepper.jsx
View File

@ -26,7 +26,7 @@ class Stepper extends Component {
render() { render() {
const {stepContent, activeStep, previousStep} = this.props; const {stepContent, activeStep, previousStep} = this.props;
return ( return (
<div className="stepper-header"> <div className="stepper-header row">
{stepContent.map(content => { {stepContent.map(content => {
return ( return (
<Step <Step

6
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/StepprHeader/stepper.css
View File

@ -22,9 +22,6 @@
height: 72px; height: 72px;
color: rgba(0, 0, 0, 0.38); color: rgba(0, 0, 0, 0.38);
box-shadow: 1px 0px 1px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 1px 0px 1px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);
display: table;
align-items: baseline;
justify-content: space-between;
margin: 0 !important; margin: 0 !important;
} }
@ -65,7 +62,7 @@
} }
.step-text { .step-text {
padding-top: 3px; /*padding-top: 3px;*/
font-family: Roboto-Regular; font-family: Roboto-Regular;
font-size: 14px; font-size: 14px;
} }
@ -87,6 +84,7 @@
} }
.stepper-next-arrow { .stepper-next-arrow {
padding-top: 3px;
margin-left: 15px; margin-left: 15px;
} }