move toggle to the left of the permission text

This commit is contained in:
Mads Rasmussen
2017-06-22 13:30:36 +02:00
parent c9200d54b5
commit 99da2e923d
3 changed files with 22 additions and 12 deletions

View File

@@ -1,10 +1,18 @@
.umb-permission {
display: flex;
justify-content: space-between;
border-bottom: 1px solid @gray-9;
padding: 7px 0;
}
.umb-permission:last-of-type {
border-bottom: none;
}
.umb-permission__toggle {
margin-right: 20px;
}
.umb-permission__description {
font-size: 13px;
color: @gray-5;
}

View File

@@ -61,15 +61,16 @@
<h5>{{ group.groupName }}</h5>
<div class="umb-permission flex justify-between" ng-repeat="permission in group.permissions">
<div>
<div>{{ permission.name }} </div>
<div style="font-size: 13px; color: #817f85;">{{ permission.description }}</div>
</div>
<div class="umb-permission" ng-repeat="permission in group.permissions">
<umb-toggle
class="umb-permission__toggle"
checked="permission.checked"
on-click="vm.togglePermission(permission)">
</umb-toggle>
<div>
<div>{{ permission.name }} </div>
<div class="umb-permission__description">{{ permission.description }}</div>
</div>
</div>
</div>

View File

@@ -25,7 +25,7 @@
<div class="test-group-title">Something</div>
<div class="test-group-content block-form">
<umb-control-group label="Sections" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<umb-control-group style="margin-bottom: 20px;" label="Sections" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<umb-node-preview
style="max-width: 100%;"
ng-repeat="section in vm.userGroup.sections"
@@ -44,7 +44,7 @@
</a>
</umb-control-group>
<umb-control-group label="Content start node" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<umb-control-group style="margin-bottom: 20px;" label="Content start node" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<umb-node-preview
ng-if="vm.userGroup.startContentId.id"
style="max-width: 100%;"
@@ -97,14 +97,15 @@
<div class="test-group-content">
<div class="umb-permission" ng-repeat="permission in group.permissions">
<div>
<div>{{ permission.name }} </div>
<div style="font-size: 13px; color: #817f85;">{{ permission.description }}</div>
</div>
<umb-toggle
class="umb-permission__toggle"
checked="permission.checked"
on-click="vm.togglePermission(permission)">
</umb-toggle>
<div>
<div>{{ permission.name }}</div>
<div class="umb-permission__description">{{ permission.description }}</div>
</div>
</div>
</div>
</div>