Refactor styling of checkbox and radiobuttons so they're now both "umb-form-control" with modifiers, which makes it easier to reuse especially the checkbox throughout the UI. The umb-editor has been extented to have a item element and a list modfier too. Overall less code too
This commit is contained in:
Jan Skovgaard
@@ -101,7 +101,7 @@
|
||||
@import "components/umb-confirm-action.less";
|
||||
@import "components/umb-keyboard-shortcuts-overview.less";
|
||||
@import "components/umb-checkbox-list.less";
|
||||
@import "components/umb-radiobuttons-list.less";
|
||||
@import "components/umb-form-control.less";
|
||||
@import "components/umb-locked-field.less";
|
||||
@import "components/umb-tabs.less";
|
||||
@import "components/umb-load-indicator.less";
|
||||
|
||||
@@ -68,102 +68,3 @@
|
||||
font-size: 16px;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
|
||||
|
||||
/* Styling for the .umb-checkboxlist class - Styling added 28-10-2018 using BEM syntax */
|
||||
.umb-checkboxlist{
|
||||
|
||||
ul{
|
||||
float: left;
|
||||
}
|
||||
|
||||
&__item{
|
||||
line-height: 1;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
|
||||
&__label{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&-text{
|
||||
margin: 0 0 0 26px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&__input{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
|
||||
&:checked:focus ~ .umb-checkboxlist__state .umb-checkboxlist__check,
|
||||
&:focus ~ .umb-checkboxlist__state .umb-checkboxlist__check{
|
||||
border-color: @gray-5;
|
||||
}
|
||||
|
||||
&:checked ~ .umb-checkboxlist__state .umb-checkboxlist__check{
|
||||
border-color: @green;
|
||||
|
||||
&:before{
|
||||
width: @checkboxWidth;
|
||||
height: @checkboxHeight;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked ~ .umb-checkboxlist__state .umb-checkboxlist__icon{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__state{
|
||||
height: 17px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__check{
|
||||
position: relative;
|
||||
border: 1px solid @gray-7;
|
||||
width: @checkboxWidth;
|
||||
height: @checkboxHeight;
|
||||
|
||||
&:before{
|
||||
content: "";
|
||||
background: @green;
|
||||
width: 0;
|
||||
height: 0;
|
||||
transition: .05s ease-out;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon{
|
||||
color: @white;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
opacity: 0;
|
||||
transition: .2s ease-out;
|
||||
|
||||
&:before{
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
@checkboxWidth: 15px;
|
||||
@checkboxHeight: 15px;
|
||||
|
||||
.umb-form-control{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&__text{
|
||||
margin: 0 0 0 26px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
&__input{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
|
||||
&:focus:checked ~ .umb-form-control .umb-form-control__check,
|
||||
&:focus ~ .umb-form-control__state .umb-form-control__check{
|
||||
border-color: @gray-5;
|
||||
}
|
||||
|
||||
&:checked ~ .umb-form-control__state .umb-form-control__check{
|
||||
border-color: @green;
|
||||
}
|
||||
|
||||
// This only happens if the state has a radiobutton modifier
|
||||
&:checked ~ .umb-form-control__state--radiobutton .umb-form-control__check{
|
||||
&:before{
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// This only happens if state has the checkbox modifier
|
||||
&:checked ~ .umb-form-control__state--checkbox{
|
||||
.umb-form-control__check{
|
||||
&:before{
|
||||
width: @checkboxWidth;
|
||||
height: @checkboxHeight;
|
||||
}
|
||||
}
|
||||
|
||||
.umb-form-control__icon{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__state{
|
||||
height: 17px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__check{
|
||||
position: relative;
|
||||
border: 1px solid @gray-7;
|
||||
width: @checkboxWidth;
|
||||
height: @checkboxHeight;
|
||||
|
||||
&:before{
|
||||
content: "";
|
||||
background: @green;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
// This only happens if state has the radiobutton modifier
|
||||
.umb-form-control__state--radiobutton &{
|
||||
border-radius: 100%;
|
||||
|
||||
&:before{
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 100%;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: .15s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
// This only happens if state has the checkbox modifier
|
||||
.umb-form-control__state--checkbox &{
|
||||
&:before{
|
||||
width: 0;
|
||||
height: 0;
|
||||
transition: .05s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__icon{
|
||||
color: @white;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
opacity: 0;
|
||||
transition: .2s ease-out;
|
||||
|
||||
&:before{
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
@checkboxWidth: 15px;
|
||||
@checkboxHeight: 15px;
|
||||
|
||||
.umb-radiobuttons{
|
||||
ul{
|
||||
float: left;
|
||||
}
|
||||
|
||||
&__item{
|
||||
line-height: 1;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
|
||||
&__label{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&-text{
|
||||
margin: 0 0 0 26px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&__input{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
|
||||
&:focus:checked ~ .umb-radiobuttons__state .umb-radiobuttons__check,
|
||||
&:focus ~ .umb-radiobuttons__state .umb-radiobuttons__check{
|
||||
border-color: @gray-5;
|
||||
}
|
||||
|
||||
&:checked ~ .umb-radiobuttons__state .umb-radiobuttons__check{
|
||||
border-color: @green;
|
||||
|
||||
&:before{
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__state{
|
||||
height: 17px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&__check{
|
||||
position: relative;
|
||||
border: 1px solid @gray-7;
|
||||
width: @checkboxWidth;
|
||||
height: @checkboxHeight;
|
||||
border-radius: 100%;
|
||||
|
||||
&:before{
|
||||
content: "";
|
||||
background: @green;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
border-radius: 100%;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: .15s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -13,7 +13,16 @@
|
||||
|
||||
&-push {
|
||||
float:right;
|
||||
}
|
||||
}
|
||||
|
||||
&--list{
|
||||
float: left;
|
||||
}
|
||||
|
||||
&__item{
|
||||
line-height: 1;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.umb-editor-tiny {
|
||||
@@ -246,7 +255,7 @@ div.umb-codeeditor .umb-btn-toolbar {
|
||||
margin: 24px 0 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
&-wrap{
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
<div class="umb-editor umb-checkboxlist" ng-controller="Umbraco.PropertyEditors.CheckboxListController">
|
||||
<div class="umb-editor umb-editor--list" ng-controller="Umbraco.PropertyEditors.CheckboxListController">
|
||||
|
||||
<ul class="unstyled">
|
||||
<li ng-repeat="item in selectedItems" class="umb-checkboxlist__item">
|
||||
<label class="checkbox umb-checkboxlist__label">
|
||||
<li ng-repeat="item in selectedItems" class="umb-editor__item">
|
||||
<label class="checkbox umb-form-control">
|
||||
<input type="checkbox" name="checkboxlist"
|
||||
value="{{item.key}}"
|
||||
ng-model="item.checked"
|
||||
class="umb-checkboxlist__input"
|
||||
class="umb-form-control__input"
|
||||
ng-required="model.validation.mandatory && !model.value.length" />
|
||||
|
||||
<div class="umb-checkboxlist__state" aria-hidden="true">
|
||||
<div class="umb-checkboxlist__check">
|
||||
<i class="umb-checkboxlist__icon icon-check"></i>
|
||||
<div class="umb-form-control__state umb-form-control__state--checkbox" aria-hidden="true">
|
||||
<div class="umb-form-control__check">
|
||||
<i class="umb-form-control__icon icon-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="umb-checkboxlist__label-text">{{item.val}}</span>
|
||||
<span class="umb-form-control__text">{{item.val}}</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -1,19 +1,17 @@
|
||||
<div class="umb-editor umb-radiobuttons" ng-controller="Umbraco.PropertyEditors.RadioButtonsController">
|
||||
<div class="umb-editor umb-edtitor--list" ng-controller="Umbraco.PropertyEditors.RadioButtonsController">
|
||||
<ul class="unstyled">
|
||||
|
||||
<li ng-repeat="item in model.config.items" class="umb-radiobuttons__item">
|
||||
<label class="radio umb-radiobuttons__label">
|
||||
<li ng-repeat="item in model.config.items" class="umb-editor__item">
|
||||
<label class="radio umb-form-control">
|
||||
<input type="radio" name="radiobuttons-{{model.alias}}"
|
||||
value="{{item.id}}"
|
||||
ng-model="model.value"
|
||||
class="umb-radiobuttons__input" />
|
||||
class="umb-form-control__input" />
|
||||
|
||||
<div class="umb-radiobuttons__state" aria-hidden="true">
|
||||
<div class="umb-radiobuttons__check">
|
||||
<!-- <i class="umb-radiobuttons__icon icon-check" aria-hidden="true"></i> -->
|
||||
</div>
|
||||
<div class="umb-form-control__state umb-form-control__state--radiobutton" aria-hidden="true">
|
||||
<div class="umb-form-control__check"></div>
|
||||
</div>
|
||||
<span class="umb-radiobuttons__label-text">{{item.value}}</span>
|
||||
<span class="umb-form-control__text">{{item.value}}</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user