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

umb-locked-field: make lock + color darker when field is unlocked

Browse Source
This commit is contained in:
Mads Rasmussen
2015-08-25 12:57:16 +02:00
parent fea038ccd4
commit 8579cdcf45
2 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/Umbraco.Web.UI.Client/src/less/components/umb-locked-field.less
View File

@@ -17,9 +17,14 @@
.umb-locked-field__lock-icon {
color: #ccc;
transition: color 0.25s;
//vertical-align: top;
}
.umb-locked-field__lock-icon.-unlocked {
color: #515151;
}
input.umb-locked-field__input {
background: rgba(255, 255, 255, 0); // if using transparent it will hide the text in safari
border: none;
@@ -27,12 +32,17 @@ input.umb-locked-field__input {
padding: 0;
margin-bottom: 0;
color: #ccc;
transition: color 0.25s;
}
input.umb-locked-field__input:focus {
box-shadow: none !important;
}
input.umb-locked-field__input.-unlocked {
color: #515151;
}
.umb-locked-field__validation-label {
position: absolute;
top: 50%;

3
src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html
View File

@@ -1,7 +1,7 @@
<div class="umb-locked-field">
<a href="" ng-click="toggleLock()" class="umb-locked-field__toggle">
<i class="umb-locked-field__lock-icon" ng-class="{'icon-lock': locked, 'icon-unlocked': !locked}"></i>
<i class="umb-locked-field__lock-icon" ng-class="{'icon-lock': locked, 'icon-unlocked': !locked, '-unlocked': !locked}"></i>
</a>
<input
@@ -10,6 +10,7 @@
name="lockedField"
ng-model="model"
ng-disabled="locked"
ng-class="{'-unlocked': !locked}"
placeholder="{{placeholderText}}"
umb-auto-resize
/>