Skip to content

Commit

Permalink
fix(core): adjust css for retro compatibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@Johann-S
Johann-S committed Feb 25, 2019
1 parent 30d895c commit 0402870
Show file tree
Hide file tree
Showing 8 changed files with 122 additions and 110 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,14 +75,14 @@ Add the following HTML:
<div class="bs-stepper-header" role="tablist">
<!-- your steps here -->
<div class="step" data-target="#logins-part">
<button type="button" class="btn bs-stepper-trigger" role="tab" aria-controls="logins-part" id="logins-part-trigger">
<button type="button" class="btn step-trigger" role="tab" aria-controls="logins-part" id="logins-part-trigger">
<span class="bs-stepper-circle">1</span>
<span class="bs-stepper-label">Logins</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#information-part">
<button type="button" class="btn bs-stepper-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
<button type="button" class="btn step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label">Various information</span>
</button>
Expand Down
63 changes: 31 additions & 32 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,44 +37,44 @@ <h3>Linear stepper</h3>
<div id="stepper1" class="bs-stepper">
<div class="bs-stepper-header" role="tablist">
<div class="step" data-target="#test-l-1">
<button type="button" class="bs-stepper-trigger" role="tab" id="stepper1trigger1" aria-controls="test-l-1">
<button type="button" class="btn step-trigger" role="tab" id="stepper1trigger1" aria-controls="test-l-1">
<span class="bs-stepper-circle">1</span>
<span class="bs-stepper-label">Email</span>
</button>
</div>
<div class="bs-stepper-line"></div>
<div class="step" data-target="#test-l-2">
<button type="button" class="bs-stepper-trigger" role="tab" id="stepper1trigger2" aria-controls="test-l-2">
<button type="button" class="btn step-trigger" role="tab" id="stepper1trigger2" aria-controls="test-l-2">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label">Password</span>
</button>
</div>
<div class="bs-stepper-line"></div>
<div class="step" data-target="#test-l-3">
<button type="button" class="bs-stepper-trigger" role="tab" id="stepper1trigger3" aria-controls="test-l-3">
<button type="button" class="btn step-trigger" role="tab" id="stepper1trigger3" aria-controls="test-l-3">
<span class="bs-stepper-circle">3</span>
<span class="bs-stepper-label">Validate</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false" class="tab-content">
<div id="test-l-1" role="tabpanel" class="tab-pane" aria-labelledby="stepper1trigger1">
<form onSubmit="return false">
<div id="test-l-1" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper1trigger1">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<button class="btn btn-primary" onclick="stepper1.next()">Next</button>
</div>
<div id="test-l-2" role="tabpanel" class="tab-pane" aria-labelledby="stepper1trigger2">
<div id="test-l-2" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper1trigger2">
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button class="btn btn-primary" onclick="stepper1.previous()">Previous</button>
<button class="btn btn-primary" onclick="stepper1.next()">Next</button>
</div>
<div id="test-l-3" role="tabpanel" class="tab-pane text-center" aria-labelledby="stepper1trigger3">
<div id="test-l-3" role="tabpanel" class="bs-stepper-pane text-center" aria-labelledby="stepper1trigger3">
<button class="btn btn-primary mt-5" onclick="stepper1.previous()">Previous</button>
<button type="submit" class="btn btn-primary mt-5">Submit</button>
</div>
Expand All @@ -87,7 +87,7 @@ <h3>Non linear stepper</h3>
<div id="stepper2" class="bs-stepper">
<div class="bs-stepper-header" role="tablist">
<div class="step" data-target="#test-nl-1">
<button type="button" class="bs-stepper-trigger" role="tab" id="stepper2trigger1" aria-controls="test-nl-1">
<button type="button" class="btn step-trigger" role="tab" id="stepper2trigger1" aria-controls="test-nl-1">
<span class="bs-stepper-circle">
<span class="fas fa-user" aria-hidden="true"></span>
</span>
Expand All @@ -96,7 +96,7 @@ <h3>Non linear stepper</h3>
</div>
<div class="bs-stepper-line"></div>
<div class="step" data-target="#test-nl-2">
<button type="button" class="bs-stepper-trigger" role="tab" id="stepper2trigger2" aria-controls="test-nl-2">
<button type="button" class="btn step-trigger" role="tab" id="stepper2trigger2" aria-controls="test-nl-2">
<span class="bs-stepper-circle">
<span class="fas fa-map-marked" aria-hidden="true"></span>
</span>
Expand All @@ -105,7 +105,7 @@ <h3>Non linear stepper</h3>
</div>
<div class="bs-stepper-line"></div>
<div class="step" data-target="#test-nl-3">
<button type="button" class="bs-stepper-trigger" role="tab" id="stepper2trigger3" aria-controls="test-nl-3">
<button type="button" class="btn step-trigger" role="tab" id="stepper2trigger3" aria-controls="test-nl-3">
<span class="bs-stepper-circle">
<span class="fas fa-save" aria-hidden="true"></span>
</span>
Expand All @@ -114,22 +114,22 @@ <h3>Non linear stepper</h3>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false" class="tab-content">
<div id="test-nl-1" role="tabpanel" class="tab-pane" aria-labelledby="stepper2trigger1">
<form onSubmit="return false">
<div id="test-nl-1" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger1">
<div class="form-group">
<label for="exampleInputName1">Name</label>
<input type="email" class="form-control" id="exampleInputName1" placeholder="Enter your name">
</div>
<button class="btn btn-primary" onclick="stepper2.next()">Next</button>
</div>
<div id="test-nl-2" role="tabpanel" class="tab-pane" aria-labelledby="stepper2trigger2">
<div id="test-nl-2" role="tabpanel" class="bs-stepper-pane" aria-labelledby="stepper2trigger2">
<div class="form-group">
<label for="exampleInpuAddress1">Address</label>
<input type="email" class="form-control" id="exampleInpuAddress1" placeholder="Enter your address">
</div>
<button class="btn btn-primary" onclick="stepper2.next()">Next</button>
</div>
<div id="test-nl-3" role="tabpanel" class="tab-pane text-center" aria-labelledby="stepper2trigger3">
<div id="test-nl-3" role="tabpanel" class="bs-stepper-pane text-center" aria-labelledby="stepper2trigger3">
<button type="submit" class="btn btn-primary mt-5">Submit</button>
</div>
</form>
Expand All @@ -141,7 +141,7 @@ <h3>Non linear stepper (with fade)</h3>
<div id="stepper3" class="bs-stepper">
<div class="bs-stepper-header" role="tablist">
<div class="step" data-target="#test-nlf-1">
<button type="button" class="bs-stepper-trigger" role="tab" id="stepper3trigger1" aria-controls="test-nlf-1">
<button type="button" class="btn step-trigger" role="tab" id="stepper3trigger1" aria-controls="test-nlf-1">
<span class="bs-stepper-circle">
<span class="fas fa-user" aria-hidden="true"></span>
</span>
Expand All @@ -150,7 +150,7 @@ <h3>Non linear stepper (with fade)</h3>
</div>
<div class="bs-stepper-line"></div>
<div class="step" data-target="#test-nlf-2">
<button type="button" class="bs-stepper-trigger" role="tab" id="stepper3trigger2" aria-controls="test-nlf-2">
<button type="button" class="btn step-trigger" role="tab" id="stepper3trigger2" aria-controls="test-nlf-2">
<span class="bs-stepper-circle">
<span class="fas fa-map-marked" aria-hidden="true"></span>
</span>
Expand All @@ -159,7 +159,7 @@ <h3>Non linear stepper (with fade)</h3>
</div>
<div class="bs-stepper-line"></div>
<div class="step" data-target="#test-nlf-3">
<button type="button" class="bs-stepper-trigger" role="tab" id="stepper3trigger3" aria-controls="test-nlf-3">
<button type="button" class="btn step-trigger" role="tab" id="stepper3trigger3" aria-controls="test-nlf-3">
<span class="bs-stepper-circle">
<span class="fas fa-save" aria-hidden="true"></span>
</span>
Expand All @@ -168,22 +168,22 @@ <h3>Non linear stepper (with fade)</h3>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false" class="tab-content">
<div id="test-nlf-1" role="tabpanel" class="tab-pane bs-stepper-pane bs-stepper-shown" aria-labelledby="stepper3trigger1">
<form onSubmit="return false">
<div id="test-nlf-1" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepper3trigger1">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="email" class="form-control" id="exampleInputName2" placeholder="Enter your name">
</div>
<button class="btn btn-primary" onclick="stepper3.next()">Next</button>
</div>
<div id="test-nlf-2" role="tabpanel" class="tab-pane bs-stepper-pane" aria-labelledby="stepper3trigger2">
<div id="test-nlf-2" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepper3trigger2">
<div class="form-group">
<label for="exampleInpuAddress2">Address</label>
<input type="email" class="form-control" id="exampleInpuAddress2" placeholder="Enter your address">
</div>
<button class="btn btn-primary" onclick="stepper3.next()">Next</button>
</div>
<div id="test-nlf-3" role="tabpanel" class="tab-pane bs-stepper-pane text-center" aria-labelledby="stepper3trigger3">
<div id="test-nlf-3" role="tabpanel" class="bs-stepper-pane fade text-center" aria-labelledby="stepper3trigger3">
<button type="submit" class="btn btn-primary mt-5">Submit</button>
</div>
</form>
Expand All @@ -192,47 +192,47 @@ <h3>Non linear stepper (with fade)</h3>
</div>
<div class="mb-5 p-4 bg-white shadow-sm">
<h3>Vertical linear stepper</h3>
<div id="stepper4" class="bs-stepper bs-stepper-vertical">
<div id="stepper4" class="bs-stepper vertical">
<div class="bs-stepper-header" role="tablist">
<div class="step" data-target="#test-vl-1">
<button type="button" class="bs-stepper-trigger" role="tab" id="stepper4trigger1" aria-controls="test-vl-1">
<button type="button" class="btn step-trigger" role="tab" id="stepper4trigger1" aria-controls="test-vl-1">
<span class="bs-stepper-circle">1</span>
<span class="bs-stepper-label">Email</span>
</button>
</div>
<div class="bs-stepper-line"></div>
<div class="step" data-target="#test-vl-2">
<button type="button" class="bs-stepper-trigger" role="tab" id="stepper4trigger2" aria-controls="test-vl-2">
<button type="button" class="btn step-trigger" role="tab" id="stepper4trigger2" aria-controls="test-vl-2">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label">Password</span>
</button>
</div>
<div class="bs-stepper-line"></div>
<div class="step" data-target="#test-vl-3">
<button type="button" class="bs-stepper-trigger" role="tab" id="stepper4trigger3" aria-controls="test-vl-3">
<button type="button" class="btn step-trigger" role="tab" id="stepper4trigger3" aria-controls="test-vl-3">
<span class="bs-stepper-circle">3</span>
<span class="bs-stepper-label">Validate</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false" class="tab-content">
<div id="test-vl-1" role="tabpanel" class="tab-pane bs-stepper-pane bs-stepper-shown fade" aria-labelledby="stepper4trigger1">
<form onSubmit="return false">
<div id="test-vl-1" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepper4trigger1">
<div class="form-group">
<label for="exampleInputEmailV1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmailV1" placeholder="Enter email">
</div>
<button class="btn btn-primary" onclick="stepper4.next()">Next</button>
</div>
<div id="test-vl-2" role="tabpanel" class="tab-pane bs-stepper-pane fade" aria-labelledby="stepper4trigger2">
<div id="test-vl-2" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepper4trigger2">
<div class="form-group">
<label for="exampleInputPasswordV1">Password</label>
<input type="password" class="form-control" id="exampleInputPasswordV1" placeholder="Password">
</div>
<button class="btn btn-primary" onclick="stepper4.previous()">Previous</button>
<button class="btn btn-primary" onclick="stepper4.next()">Next</button>
</div>
<div id="test-vl-3" role="tabpanel" class="tab-pane bs-stepper-pane fade" aria-labelledby="stepper4trigger3">
<div id="test-vl-3" role="tabpanel" class="bs-stepper-pane fade" aria-labelledby="stepper4trigger3">
<button class="btn btn-primary mt-5" onclick="stepper4.previous()">Previous</button>
<button type="submit" class="btn btn-primary mt-5">Submit</button>
</div>
Expand All @@ -248,10 +248,9 @@ <h3>Vertical linear stepper</h3>
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bs-breakpoints/dist/bs-breakpoints.min.js"></script>
<script src="dist/js/bs-stepper.min.js"></script>
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="dist/js/bs-stepper.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
19 changes: 0 additions & 19 deletions docs/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,4 @@ document.addEventListener('DOMContentLoaded', function () {
animation: true
})
stepper4 = new Stepper(document.querySelector('#stepper4'))

function handleBreakPointChange (breakpoint) {
if (breakpoint === 'large') {
stepper1._element.classList.add('vertical')
stepper2._element.classList.add('vertical')
stepper3._element.classList.add('vertical')
} else if (breakpoint === 'xLarge' && stepper1._element.classList.contains('vertical')) {
stepper1._element.classList.remove('vertical')
stepper2._element.classList.remove('vertical')
stepper3._element.classList.remove('vertical')
}
}

window.addEventListener('new.bs.breakpoint', function (event) {
handleBreakPointChange(event.detail)
})

bsBreakpoints.init()
handleBreakPointChange(bsBreakpoints.detectBreakpoint())
})
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@
"css-minify": "cleancss --level 1 --format breaksWith=lf --source-map --source-map-inline-sources --output dist/css/bs-stepper.min.css dist/css/bs-stepper.css",
"dev": "rollup --environment DEV -c -w",
"test:unit": "karma start tests/karma.conf.js",
"test": "npm run standard && npm run build-js:unit && npm run test:unit && npm run build",
"test": "npm run standard && npm run css-lint && npm run build-js:unit && npm run test:unit && npm run build",
"standard": "standard src/js/* tests/units/*.spec.js",
"css-lint": "stylelint src/css/bs-stepper.css",
"deploy": "gh-pages -d docs",
"docs-build": "shx mkdir -p docs/dist/ && shx cp -r dist/css/ docs/dist/ && shx cp -r dist/js/ docs/dist/",
"docs-serve": "http-server docs/ -c-1 -o",
Expand Down

0 comments on commit 0402870

Please sign in to comment.