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

clean up umb-era-button + add button style to template editor buttons

Browse Source
This commit is contained in:
Mads Rasmussen
2016-11-30 10:38:04 +01:00
parent daaa2bf911
commit bd0c1cd932
7 changed files with 163 additions and 229 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

@@ -121,6 +121,7 @@
@import "components/buttons/umb-button.less";
@import "components/buttons/umb-button-group.less";
@import "components/buttons/umb-era-button.less";
@import "components/notifications/umb-notifications.less";
@import "components/umb-file-dropzone.less";

22
src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-group.less
View File

@@ -8,3 +8,25 @@
right: 0;
left: auto;
}
// hack for umb-era-button
.umb-button-group {
display: flex;
.umb-era-button:first-child {
padding-right: 15px;
border-radius: 3px 0 0 3px;
}
.umb-era-button.umb-button-group__toggle {
padding-right: 10px;
padding-left: 10px;
border-radius: 0 3px 3px 0;
}
.umb-era-button.umb-button-group__toggle .caret {
margin: 0;
}
}

104
src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-era-button.less Normal file
View File

@@ -0,0 +1,104 @@
.umb-era-button {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
//font-weight: bold;
height: 38px;
line-height: 1;
max-width: 100%;
padding: 0 18px;
color: #202129;
background-color: #edeeee;
text-decoration: none !important;
user-select: none;
white-space: nowrap;
overflow: hidden;
border-radius: 3px;
border: 0 none;
box-sizing: border-box;
cursor: pointer;
transition: background-color 80ms ease, color 80ms ease;
}
.umb-era-button:hover,
.umb-era-button:active {
color: #484848;
background-color: #e1e2e2;
outline: none;
text-decoration: none;
}
.umb-era-button:focus {
outline: none;
}
.umb-era-button.-blue {
background: @blue;
color: white;
}
.umb-era-button.-blue:hover {
background-color: @blueDark;
}
.umb-era-button.-red {
background: @btnDangerBackground;
color: white;
}
.umb-era-button.-red:hover {
background-color: darken(@btnDangerBackground, 5%);
}
.umb-era-button.-link {
padding: 0;
background: transparent;
}
.umb-era-button.-link:hover {
background-color: transparent;
opacity: .6;
}
.umb-era-button.-inactive {
cursor: not-allowed;
color: #BBB;
background: #EAE7E7;
}
.umb-era-button.-inactive:hover {
color: #BBB;
background: #EAE7E7;
}
.umb-era-button.-full-width {
display: block;
width: 100%;
}
.umb-era-button.umb-button--s {
height: 30px;
font-size: 13px;
}
.umb-era-button.-white {
background-color: @white;
&:hover {
opacity: .9;
}
}
.umb-era-button.-text-black {
color: @black;
}
/* icons */
.umb-era-button i {
margin-right: 5px;
}

89
src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
View File

@@ -248,95 +248,6 @@
color: black;
}
/* umb-buttons-era */
.umb-era-button {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: bold;
height: 38px;
line-height: 1;
max-width: 100%;
padding: 0 18px;
color: #484848;
background-color: #e0e0e0;
text-decoration: none !important;
user-select: none;
white-space: nowrap;
overflow: hidden;
border-radius: 3px;
border: 0 none;
box-sizing: border-box;
cursor: pointer;
transition: background-color 80ms ease, color 80ms ease;
}
.umb-era-button:hover,
.umb-era-button:active {
color: #484848;
background-color: #d3d3d3;
outline: none;
text-decoration: none;
}
.umb-era-button:focus {
outline: none;
}
.umb-era-button.-blue {
background: @blue;
color: white;
}
.umb-era-button.-blue:hover {
background-color: @blueDark;
}
.umb-era-button.-link {
padding: 0;
background: transparent;
}
.umb-era-button.-link:hover {
background-color: transparent;
opacity: .6;
}
.umb-era-button.-inactive {
cursor: not-allowed;
color: #BBB;
background: #EAE7E7;
}
.umb-era-button.-inactive:hover {
color: #BBB;
background: #EAE7E7;
}
.umb-era-button.-full-width {
display: block;
width: 100%;
}
.umb-era-button.umb-button--s {
height: 30px;
font-size: 13px;
}
/* CATEGORIES */
.umb-packages-categories {

6
src/Umbraco.Web.UI.Client/src/less/components/umb-querybuilder.less
View File

@@ -12,6 +12,12 @@
border-radius: 3px;
text-align: center;
display: inline-block;
}
.umb-querybuilder .row a.btn:hover {
background: #e8f1fb;
text-decoration: none;
}
.umb-querybuilder .row > div {

105
src/Umbraco.Web.UI.Client/src/less/healthcheck.less
View File

@@ -95,111 +95,6 @@
}
/* umb-buttons-era */
.umb-era-button {
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: bold;
height: 40px;
line-height: 1;
max-width: 100%;
padding: 0 15px;
color: #484848;
background-color: #e0e0e0;
text-decoration: none !important;
user-select: none;
white-space: nowrap;
overflow: hidden;
border-radius: 3px;
border: 0 none;
box-sizing: border-box;
cursor: pointer;
transition: background-color 80ms ease, color 80ms ease, opacity 80ms ease;
}
.umb-era-button:hover,
.umb-era-button:active {
color: #484848;
background-color: #d3d3d3;
outline: none;
text-decoration: none;
}
.umb-era-button:focus {
outline: none;
}
.umb-era-button.-blue {
background: @blue;
color: white;
}
.umb-era-button.-blue:hover {
background-color: @blueDark;
}
.umb-era-button.-red {
background: @btnDangerBackground;
color: white;
}
.umb-era-button.-red:hover {
background-color: darken(@btnDangerBackground, 5%);
}
.umb-era-button.-link {
padding: 0;
background: transparent;
}
.umb-era-button.-link:hover {
background-color: transparent;
opacity: .6;
}
.umb-era-button.-inactive {
cursor: not-allowed;
color: #BBB;
background: #EAE7E7;
}
.umb-era-button.-inactive:hover {
color: #BBB;
background: #EAE7E7;
}
.umb-era-button.-full-width {
display: block;
width: 100%;
}
.umb-era-button.-white {
background-color: @white;
&:hover {
opacity: .9;
}
}
.umb-era-button.-text-black {
color: @black;
}
/* Spacing for boxes */
.umb-air {
flex: 0 0 auto;

65
src/Umbraco.Web.UI.Client/src/views/templates/edit.html
View File

@@ -22,20 +22,26 @@
<umb-editor-container>
<umb-editor-sub-header>
<div class="flex" style="margin-bottom: 30px;">
<umb-editor-sub-header-content-left>
<div class="flex">
<a class="btn btn-link" ng-click="vm.openMasterTemplateOverlay()">
<i class="icon icon-layout" style="margin-right:5px;"></i>
<span class="bold">Master template:</span> {{ vm.getMasterTemplateName(vm.template.masterTemplateAlias, vm.templates) }}
</a>
</div>
<div class="btn-group umb-button-group dropdown">
<umb-button
<div class="flex" style="margin-left: auto;">
<div class="btn-group umb-button-group dropdown" style="margin-right: 10px;">
<button
type="button"
button-style="link"
label="Insert"
icon="icon-add"
action="vm.openInsertOverlay()">
</umb-button>
class="umb-era-button umb-button--s"
ng-click="vm.openInsertOverlay()">
<i class="icon icon-add"></i> Insert
</button>
<a class="btn btn-link dropdown-toggle umb-button-group__toggle" style="margin-left: -13px;" data-toggle="dropdown">
<a class="umb-era-button umb-button--s dropdown-toggle umb-button-group__toggle" data-toggle="dropdown">
<span class="caret"></span>
</a>
@@ -45,38 +51,27 @@
<li><a href="" ng-click="vm.openDictionaryItemOverlay()">Dictionary</a></li>
<li><a href="" ng-click="vm.openMacroOverlay()">Macro</a></li>
</ul>
</div>
<umb-button
<button
type="button"
button-style="link"
label="Query Builder"
icon="icon-wand"
action="vm.openQueryBuilderOverlay()">
</umb-button>
style="margin-right: 10px;"
class="umb-era-button umb-button--s"
ng-click="vm.openQueryBuilderOverlay()">
<i class="icon icon-wand"></i> Query builder
</button>
<umb-button
<button
type="button"
button-style="link"
label="Sections"
icon="icon-indent"
action="vm.openSectionsOverlay()">
</umb-button>
class="umb-era-button umb-button--s"
ng-click="vm.openSectionsOverlay()">
<i class="icon icon-indent"></i> Sections
</button>
</umb-editor-sub-header-content-left>
</div>
<umb-editor-sub-header-content-right>
<a class="btn btn-link" ng-click="vm.openMasterTemplateOverlay()">
<i class="icon icon-layout" style="margin-right:5px;"></i>
<span class="bold">Master template:</span>
{{ vm.getMasterTemplateName(vm.template.masterTemplateAlias, vm.templates) }}
</a>
</umb-editor-sub-header-content-right>
</umb-editor-sub-header>
</div>
<div
auto-scale="85"