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

added better utility for flexbox and changed classes in views

Browse Source
This commit is contained in:
Simon Busborg
2016-06-22 13:52:49 +02:00
parent c280a0a5ab
commit 9602a52801
5 changed files with 70 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_flex.less
View File

@@ -1,20 +1,39 @@
// Flex
.flex {
display: flex;
.flex { display: flex }
.flex-inline { display: flex-inline }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-baseline { align-self: baseline; }
.self-stretch { align-self: stretch; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-center { align-content: center; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-stretch { align-content: stretch; }
/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
flex: 1 1 auto;
min-width: 0; /* 1 */
min-height: 0; /* 1 */
}
.flex-inline {
display: inline-flex;
}
.flex-direction-column {
flex-direction: column;
}
.flex-justify-center {
justify-content: center;
}
.flex-align-center {
align-items: center;
}
.flex-none { flex: none; }

23
src/Umbraco.Web.UI.Client/src/less/utilities/umb-utility_widths.less
View File

@@ -1,4 +1,27 @@
// Widths
.width-1 { width: calc(1/12 * 100%); }
.width-2 { width: calc(2/12 * 100%); }
.width-3 { width: calc(3/12 * 100%); }
.width-4 { width: calc(4/12 * 100%); }
.width-5 { width: calc(5/12 * 100%); }
.width-6 { width: calc(6/12 * 100%); }
.width-7 { width: calc(7/12 * 100%); }
.width-8 { width: calc(8/12 * 100%); }
.width-9 { width: calc(9/12 * 100%); }
.width-10 { width: calc(10/12 * 100%); }
.width-11 { width: calc(11/12 * 100%); }
.width-12 { width: 100%; }
.width-100 {
width: 100%;
}
.width {
float: left;
box-sizing: border-box;
}
.width-right {
float: right;
box-sizing: border-box;
}

4
src/Umbraco.Web.UI.Client/src/views/packager/views/install-local.html
View File

@@ -82,7 +82,7 @@
<small ng-bind-html-unsafe="vm.localPackage.readMe"></small>
</div>
<div class="umb-info-local-item mt-3 flex flex-align-center flex-direction-column" ng-if="vm.installState.status == '' && vm.localPackage.isCompatible">
<div class="umb-info-local-item mt-3 flex items-center flex-column" ng-if="vm.installState.status == '' && vm.localPackage.isCompatible">
<label for="license-accepts" class="umb-package-installer-label">
<input type="checkbox" id="license-accepts" ng-model="vm.localPackage.packageLicenseAccept" required no-dirty-check>
<strong class="label-text">I accept <a href="{{ vm.localPackage.licenseUrl }}">terms of use</a></strong>
@@ -90,7 +90,7 @@
<button type="button"
ng-class="{'-inactive' : localPackageForm.$invalid}"
ng-disabled="localPackageForm.$invalid"
class="umb-era-button -blue inline-flex mt-2"
class="umb-era-button -blue flex-inline mt-2"
ng-click="vm.installPackage()">
Install package
</button>

4
src/Umbraco.Web.UI.Client/src/views/packager/views/installed.html
View File

@@ -74,7 +74,7 @@
<small> {{ vm.package.readme }} </small>
</div>
<div class="umb-info-local-item mt-3 flex flex-align-center flex-direction-column" ng-if="vm.installState.status == ''">
<div class="umb-info-local-item mt-3 flex items-center flex-column" ng-if="vm.installState.status == ''">
<label for="confirm-uninstall" class="umb-package-installer-label">
<input type="checkbox" id="confirm-uninstall" ng-model="vm.package.confirmUninstall" required no-dirty-check>
<strong class="label-text">Confirm package uninstall</strong>
@@ -82,7 +82,7 @@
<button type="button"
ng-class="{'-inactive' : uninstallForm.$invalid}"
ng-disabled="uninstallForm.$invalid"
class="umb-era-button -blue inline-flex mt-2"
class="umb-era-button -blue flex-inline mt-2"
ng-click="vm.uninstallPackage(vm.package)">
Uninstall package
</button>

10
src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html
View File

@@ -98,11 +98,13 @@
</div>
<div class="umb-package-section__no-results tc" ng-if="vm.packages.length === 0">
<!-- Empty state -->
<div class="umb-package-section__no-results tc" ng-if="vm.packages.length === 0 && vm.loading === false && vm.searchQuery !== ''">
<h4><strong>We couldn't find anything for '{{ vm.searchQuery }}'</strong></h4>
<p class="faded">Please try searching for another package or browse through the categories.</p>
</div>
</div>
</div>
@@ -285,7 +287,7 @@
<small ng-bind-html-unsafe="vm.localPackage.readMe"></small>
</div>
<div class="umb-info-local-item mt-3 flex flex-align-center flex-direction-column" ng-if="vm.installState.status == '' && vm.localPackage.isCompatible">
<div class="umb-info-local-item mt-3 flex items-center flex-column" ng-if="vm.installState.status == '' && vm.localPackage.isCompatible">
<label for="license-accept" class="umb-package-installer-label">
<input type="checkbox" id="license-accept" ng-model="vm.localPackage.packageLicenseAccept" required no-dirty-check>
<strong class="label-text">I accept <a href="{{ vm.localPackage.licenseUrl }}">terms of use</a></strong>
@@ -293,7 +295,7 @@
<button type="button"
ng-class="{'-inactive' : localPackageForm.$invalid}"
ng-disabled="localPackageForm.$invalid"
class="umb-era-button -blue inline-flex mt-2"
class="umb-era-button -blue flex-inline mt-2"
ng-click="vm.installPackage(vm.localPackage)">
Install package
</button>