Skip to content

Commit

Permalink
Merge branch 'local-v4-dev' into v4-dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@ygatesoupe
ygatesoupe committed Jul 20, 2016
2 parents c2f4bbf + f6a0d5a commit 382b27f
Show file tree
Hide file tree
Showing 5 changed files with 206 additions and 2 deletions.
49 changes: 49 additions & 0 deletions docs-orange/_includes/boostwatch/switches.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<h2 id="switches">Toggle and switches</h2>

<h3>Switch</h3>

<div class="switch form-group row">
<label for="switch" class="form-control-label col-md-4 col-xs-8">WiFi</label>
<input id="switch" class="sr-only toggle" type="checkbox">
<label for="switch" aria-hidden="true" class="form-control-label col-md-3"></label>
</div>

<div class="switch form-group row">
<label for="switch2" class="form-control-label col-md-4 col-xs-8">Bluetooth</label>
<input id="switch2" class="sr-only toggle" type="checkbox">
<label for="switch2" aria-hidden="true" class="form-control-label col-md-3"></label>
</div>

<div class="switch form-group row">
<label for="switch3" class="form-control-label col-md-4 col-xs-8">Notifications</label>
<input id="switch3" class="sr-only toggle" type="checkbox">
<label for="switch3" aria-hidden="true" class="form-control-label col-md-3"></label>
</div>

<h3>3 way toggle</h3>

<div class="btn-group" data-toggle="buttons" role="group">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> 1
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> 2
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> 3
</label>
</div>

<h3>3 way toggle without outline</h3>

<div class="btn-group no-outline" data-toggle="buttons" role="group">
<label class="btn btn-secondary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> 1
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option2" autocomplete="off"> 2
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option3" autocomplete="off"> 3
</label>
</div>
3 changes: 3 additions & 0 deletions docs-orange/_includes/nav-boostwatch.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@
<div class="bd-toc-item ">
<a class="bd-toc-link" href="#buttons">Buttons</a>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="#switches">Toggle switches</a>
</div>
<div class="bd-toc-item ">
<a class="bd-toc-link" href="#type">Typography</a>
</div>
Expand Down
3 changes: 1 addition & 2 deletions docs-orange/boostwatch/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ <h2 id="orange-icons">Orange Icons</h2>
{% include boostwatch/navbar.html %}
{% include boostwatch/megamenu.html %}
{% include boostwatch/buttons.html %}
{% include boostwatch/switches.html %}
{% include boostwatch/typography.html %}
{% include boostwatch/forms.html %}
{% include boostwatch/navs.html %}
Expand All @@ -36,5 +37,3 @@ <h2 id="orange-icons">Orange Icons</h2>
{% include boostwatch/progressbar.html %}
{% include boostwatch/containers.html %}
{% include boostwatch/dialogs.html %}


6 changes: 6 additions & 0 deletions scss/_custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,12 @@ $btn-border-radius-lg: $border-radius-lg;
$btn-border-radius-sm: $border-radius-sm;


// toggle switches

// $toggle-switch-icon: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2030%22%3E%3Cpath%20d%3D%22M7.732%2015.275l4.3%204.1L22.27%209.64M39.396%209.447l11.208%2011.106m-11.208%200L50.604%209.447%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.999%22%2F%3E%3Cview%20viewBox%3D%220%200%2030%2030%22%2F%3E%3Cview%20viewBox%3D%2230%200%2030%2030%22%2F%3E%3C%2Fsvg%3E");

$toggle-switch-icon: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2030%22%20width%3D%2260%22%20height%3D%2230%22%3E%3Cview%20viewBox%3D%220%200%2030%2030%22%2F%3E%3Cview%20viewBox%3D%2230%200%2030%2030%22%2F%3E%3Cpath%20d%3D%22M0%200h60v30H0z%22%2F%3E%3Cpath%20style%3D%22line-height%3Anormal%3Btext-indent%3A0%3Btext-align%3Astart%3Btext-decoration-line%3Anone%3Btext-decoration-style%3Asolid%3Btext-decoration-color%3A%23000000%3Btext-transform%3Anone%3Bblock-progression%3Atb%3Bisolation%3Aauto%3Bmix-blend-mode%3Anormal%22%20d%3D%22M40.452%208.383l-2.11%202.13L42.87%2015l-4.53%204.488%202.112%202.13%204.55-4.51%204.548%204.51%202.11-2.13L47.13%2015l4.53-4.488-2.11-2.13-4.55%204.51-4.548-4.51zM21.236%208.554l-9.203%208.752-3.267-3.116-2.07%202.17%205.333%205.086%2011.273-10.718-2.067-2.174z%22%20color%3D%22%23000%22%20font-family%3D%22sans-serif%22%20white-space%3D%22normal%22%20overflow%3D%22visible%22%20solid-color%3D%22%23000000%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");

// Accordions

$accordion-arrow-icon: url("data:image/svg+xml;charset=utf8, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%207%22%3E%3Cpath%20d%3D%22M7%200l7%207H0l7-7z%22%2F%3E%3C%2Fsvg%3E");
Expand Down
147 changes: 147 additions & 0 deletions scss/_o-buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -401,3 +401,150 @@ fieldset[disabled] a.btn {
}
}
}

// single toggle

.switch {

&.form-group {
margin-bottom: 0;
}

input[type="checkbox"].toggle {
width: 1px;
height: 1px;
}

.toggle + label {
position: relative;
display: block;
cursor: pointer;
user-select: none;
outline: none;
}

input.toggle + label {
display: inline-block;
width: 3.75rem;
height: 1.875rem;
padding: 0;
margin: .3125rem 0;
}

input.toggle + label::before,
input.toggle + label::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
content: "";
}

input.toggle + label::before {
right: 0;
background-color: #000;
background-image: $toggle-switch-icon;
}

input.toggle + label::after {
top: 2px;
left: 2px;
width: 1.75rem;
height: 1.625rem;
margin-left: 1.75rem;
background-color: #fff;
transition: margin .4s;
}

input.toggle:checked + label::after {
margin-left: 0;
}
}

.switch input:focus.toggle + label::after {
outline: 1px #fff dotted;
}

// 3 way toggles

.btn-group[data-toggle=buttons] {
border: 2px solid #000;

.btn {
width: 2.5rem;
padding-right: 0;
padding-left: 0;
margin: 0;
border-top: 0;
border-right: 2px solid #fff;
border-bottom: 0;
border-left: 2px solid #fff;

&:first-child {
margin-left: -2px;
border-left-color: #000;
}

&:last-child {
margin-right: -2px;
border-right-color: #000;
}

&.active {
color: #fff;
background-color: #000;
border-right-color: #000;
border-left-color: #000;
}

@include hover {
color: $brand-primary;
background-color: #fff;

&.active {
color: #fff;
background-color: #000;
border-right-color: #000;
border-left-color: #000;
}
}
}

&.no-outline {
border-color: transparent;

.btn {
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;

&:first-child {
border-left-color: transparent;
}

&:last-child {
border-right-color: transparent;
}

&.active {
color: $brand-primary;
background-color: #fff;
border-color: transparent;
outline-color: #000;
}

@include hover {
color: #000;
background-color: #fff;
border-color: #000;

&.active {
color: $brand-primary;
background-color: #fff;
border-color: transparent;
outline-color: #000;
}
}
}
}
}

0 comments on commit 382b27f

Please sign in to comment.