yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "Style the default browser radio button as a custom one to provide a nicer UI experience" #3226

Browse Source
This commit is contained in:
Sebastiaan Janssen
2018-11-26 17:23:40 +01:00
parent 7a53d58b4a
commit 4024095555
3 changed files with 4 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/less/belle.less
View File

@@ -101,7 +101,6 @@
@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-locked-field.less";
@import "components/umb-tabs.less";
@import "components/umb-load-indicator.less";

80
src/Umbraco.Web.UI.Client/src/less/components/umb-radiobuttons-list.less
View File

@@ -1,80 +0,0 @@
.umb-radiobuttons{
&__label{
position: relative;
padding: 0;
&-text{
margin: 0 0 0 32px;
position: relative;
top: 1px;
}
}
&__input{
position: absolute;
top: 0;
left: 0;
opacity: 0;
&:focus ~ .umb-radiobuttons__state{
box-shadow: 0 1px 3px fade(@black, 12%), 0 1px 2px fade(@black, 24%);
}
&:focus:checked ~ .umb-radiobuttons__state{
box-shadow: none;
}
&:checked ~ .umb-radiobuttons__state{
&:before{
width: 100%;
height: 100%;
}
}
&:checked ~ .umb-radiobuttons__state .umb-radiobuttons__icon{
opacity: 1;
}
}
&__state{
display: flex;
flex-wrap: wrap;
border: 1px solid @gray-8;
border-radius: 100%;
width: 22px;
height: 22px;
position: relative;
&:before{
content: "";
background: @green;
width: 0;
height: 0;
transition: .1s ease-out;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border-radius: 100%;
}
}
&__icon{
color: @white;
text-align: center;
font-size: 15px;
opacity: 0;
transition: .3s ease-out;
&:before{
position: absolute;
top: 2px;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
}
}

13
src/Umbraco.Web.UI.Client/src/views/propertyeditors/radiobuttons/radiobuttons.html
View File

@@ -1,17 +1,12 @@
<div class="umb-editor umb-radiobuttons" ng-controller="Umbraco.PropertyEditors.RadioButtonsController">
<ul class="unstyled">
<li ng-repeat="item in model.config.items">
<label class="radio umb-radiobuttons__label">
<label class="radio">
<input type="radio" name="radiobuttons-{{model.alias}}"
value="{{item.id}}"
ng-model="model.value"
class="umb-radiobuttons__input" />
<div class="umb-radiobuttons__state">
<i class="umb-radiobuttons__icon icon-check" aria-hidden="true"></i>
<span class="umb-radiobuttons__label-text">{{item.value}}</span>
</div>
ng-model="model.value" />
{{item.value}}
</label>
</li>
</ul>
</div>
</div>