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

added dots to website/language selector

Browse Source
This commit is contained in:
Mads Rasmussen
2016-03-16 11:09:06 +01:00
parent f0b374c30b
commit 1dacbbdbf6
4 changed files with 58 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Umbraco.Web.UI.Client/src/less/belle.less
+1 -1
View File
@@ -109,7 +109,7 @@
@import "components/umb-property-editor.less";
@import "components/umb-iconpicker.less";
@import "components/umb-website-selector.less";
@import "components/umb-dots.less";
@import "components/buttons/umb-button.less";
@import "components/buttons/umb-button-group.less";
src/Umbraco.Web.UI.Client/src/less/components/umb-dots.less
+26
View File
@@ -0,0 +1,26 @@
.umb-dots {
position: relative;
width: 5px;
height: 5px;
background-color: @gray;
border-radius: 50%;
}
.umb-dots:before,
.umb-dots:after {
display: block;
position: absolute;
content: '';
width: 5px;
height: 5px;
background-color: @gray;
border-radius: 50%;
}
.umb-dots:before {
transform: translateX(-8px);
}
.umb-dots:after {
transform: translateX(8px);
}
src/Umbraco.Web.UI.Client/src/less/components/umb-website-selector.less
+21 -9
View File
@@ -32,6 +32,15 @@
text-decoration: none;
}
.umb-website-selector__dropdown-toggle-content {
display: flex;
align-items: center;
}
.umb-website-selector__dropdown-toggle-name {
margin-right: 5px;
}
.umb-website-selector__dropdown {
position: absolute;
top: 50px;
@@ -50,11 +59,13 @@
}
.umb-website-selector__website-link {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
display: block;
padding-bottom: 10px;
padding-left: 38px;
}
.umb-website-selector__website-link:hover,
@@ -76,18 +87,19 @@
.umb-website-selector__dropdown-arrow {
width: 0;
height: 0;
margin-right: 10px;
}
.umb-website-selector__dropdown-arrow.-down {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid @gray;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid @gray;
}
.umb-website-selector__dropdown-arrow.-up {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid @gray;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid @gray;
}
.umb-website-selector__dropdown-action:hover {
src/Umbraco.Web.UI.Client/src/views/components/umb-website-selector.html
+10 -6
View File
@@ -5,20 +5,24 @@
</span>
<a class="umb-website-selector__dropdown-toggle" ng-if="websites.length > 0" href="" ng-click="toggleWebsiteDropDown()">
<div>
<span>{{ selectedWebsite.name }}</span>
<div class="umb-website-selector__dropdown-toggle-content">
<span ng-if="showWebsiteDropdown" class="umb-website-selector__dropdown-arrow -up"></span>
<span ng-if="!showWebsiteDropdown" class="umb-website-selector__dropdown-arrow -down"></span>
<span class="umb-website-selector__dropdown-toggle-name">{{ selectedWebsite.name }}</span>
<small>({{ selectedWebsite.language }})</small>
</div>
<span ng-if="showWebsiteDropdown" class="umb-website-selector__dropdown-arrow -up"></span>
<span ng-if="!showWebsiteDropdown" class="umb-website-selector__dropdown-arrow -down"></span>
<div class="umb-dots"></div>
</a>
<div class="umb-website-selector__dropdown shadow-depth-3" ng-show="showWebsiteDropdown">
<ul class="umb-website-selector__websites">
<li class="umb-website-selector__website" ng-repeat="website in websites | filter:{ selected: '!'+true }">
<a class="umb-website-selector__website-link" ng-click="clickWebsite(website)" href="" ng-class="{'-selecetd': website.selected}">
<span class="umb-website-selector__website-name">{{ website.name}}</span>
<small>({{ website.language }})</small>
<div>
<span class="umb-website-selector__website-name">{{ website.name}}</span>
<small>({{ website.language }})</small>
</div>
<div class="umb-dots"></div>
</a>
</li>
</ul>