Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

css: refactor controls--emailSwitch to generic --button

Browse source
This commit is contained in:
Felix Niklas 2016-02-16 09:28:56 +01:00
parent e3fd680c46
commit 9c01acee9b
4 changed files with 202 additions and 188 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
View file

@ -2,6 +2,21 @@
<h1>Inputs</h1>
<div style="max-width: 500px">
<h2>Color</h2>
<div class="color form-group">
<div class="formGroup-label">
<label for="background-color"><%- @T('Background color') %></label>
</div>
<div class="controls controls--button">
<input type="text" id="background-color" value="">
<div class="controls-button">
<div class="controls-button-inner u-clickable">
<%- @Icon('eyedropper') %>
</div>
</div>
</div>
</div>
<h2>Time</h2>
<p>A time of the day</p>
<input type="text" value="14:40" class="time js-timepicker1">

4
app/assets/javascripts/app/views/layout_ref/merge_customer.jst.eco
View file

@ -103,13 +103,13 @@
<div class="merge-target">
<label>Email</label>
<div class="merge-value">
<div class="primary-email-switch-holder">
<div class="controls-button">
<span class="primary-email-switch-label">nicole.braun@zammad.org</span>
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="input-1" checked><label for="input-1">main</label>
</div>
</div>
<div class="merge-value">
<div class="primary-email-switch-holder">
<div class="controls-button">
<span class="primary-email-switch-label">nicole.mueller@zammad.org</span>
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="input-2"><label for="input-2">main</label>
</div>

20
app/assets/javascripts/app/views/layout_ref/primary_email.jst.eco
View file

@ -38,11 +38,13 @@
<span class="formGroup-metaControl js-addEmail" title="Add Email Address">+</span>
</div>
<div class="controls controls--emailSwitch">
<div class="controls controls--button">
<input class="form-control" id="User_510389_email1" name="email" required="" type="email" value="">
<div class="primary-email-switch-holder">
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="User_510389_email1_switch" checked>
<label for="User_510389_email1_switch">primary</label>
<div class="controls-button">
<div class="controls-button-inner">
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="User_510389_email1_switch" checked>
<label for="User_510389_email1_switch">primary</label>
</div>
</div>
</div>
</div>
@ -53,11 +55,13 @@
<span class="formGroup-metaControl js-removeEmail" title="Remove Email Address">&times;</span>
</div>
<div class="controls controls--emailSwitch">
<div class="controls controls--button">
<input class="form-control" id="User_510389_email2" name="email" required="" type="email" value="">
<div class="primary-email-switch-holder">
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="User_510389_email2_switch" checked>
<label for="User_510389_email2_switch">primary</label>
<div class="controls-button">
<div class="controls-button-inner">
<input class="primary-email-switch" type="radio" name="merge-primary-email" id="User_510389_email2_switch" checked>
<label for="User_510389_email2_switch">primary</label>
</div>
</div>
</div>
</div>

345
app/assets/stylesheets/zammad.scss
View file

@ -1506,190 +1506,198 @@ input.time.time--12 {
width: 7.5ch;
}
.tokenfield.focus {
border-color: hsl(200,71%,59%);
box-shadow: 0 0 0 3px hsl(201,62%,90%);
}
.tokenfield.focus {
border-color: hsl(200,71%,59%);
box-shadow: 0 0 0 3px hsl(201,62%,90%);
}
.richtext.form-control {
padding-bottom: 28px;
}
.richtext.form-control {
padding-bottom: 28px;
}
.richtext.form-control [contenteditable] {
height: auto;
min-height: 82px;
background: none;
}
.richtext.form-control [contenteditable] {
height: auto;
min-height: 82px;
background: none;
}
.richtext.form-control .attachments.attachments--list:not(:empty) {
border-top: 1px solid rgba(0,0,0,.04);
white-space: normal;
margin: 0 -12px -28px;
padding: 25px 20px 21px 72px;
position: relative;
line-height: 1;
}
.richtext.form-control .attachments.attachments--list:not(:empty) {
border-top: 1px solid rgba(0,0,0,.04);
white-space: normal;
margin: 0 -12px -28px;
padding: 25px 20px 21px 72px;
position: relative;
line-height: 1;
}
textarea.form-control {
height: 118px;
}
textarea.form-control {
height: 118px;
}
select.form-control:not([multiple]) {
padding-left: 10px;
padding-right: 34px;
word-wrap: normal;
}
select.form-control:not([multiple]) {
padding-left: 10px;
padding-right: 34px;
word-wrap: normal;
}
.form-control.is-hidden {
display: none;
}
.form-control.is-hidden {
display: none;
}
.form-control[disabled], .form-control.is-disabled {
cursor: not-allowed;
background-color: #fff;
color: #d5d5d5;
opacity: 1;
}
.form-control[disabled], .form-control.is-disabled {
cursor: not-allowed;
background-color: #fff;
color: #d5d5d5;
opacity: 1;
}
.form-control.form-control--borderless {
border: none;
padding: 0;
line-height: inherit;
height: auto;
.form-control.form-control--borderless {
border: none;
padding: 0;
line-height: inherit;
height: auto;
&:focus {
box-shadow: none;
}
}
.form-control + .icon-arrow-down,
.dropdown-arrow {
position: absolute;
right: 12px;
top: 50%;
margin-top: -3px;
fill: black;
opacity: 0.39;
width: 13px;
height: 7px;
@extend .u-unclickable;
}
/*
Firefox only hack
-----------------
Firefox below version 35 doesn't allow us to
hide the dropdown arrow but we want to replace
it with our own icon. So we have to hide our own
icon in Firefox versions under 35.
The class is set via Javascript
*/
html.ff-lt-35 .form-control + .icon-arrow-down,
html.ff-lt-35 .dropdown-arrow {
display: none;
}
select::-ms-expand {
display: none;
}
.has-error .form-control,
.has-error .form-control:focus,
.has-error .form-control.focus {
&:focus {
box-shadow: none;
border-color: red !important;
}
}
.form-control + .icon-arrow-down,
.dropdown-arrow {
position: absolute;
right: 12px;
top: 50%;
margin-top: -3px;
fill: black;
opacity: 0.39;
width: 13px;
height: 7px;
@extend .u-unclickable;
}
/*
Firefox only hack
-----------------
Firefox below version 35 doesn't allow us to
hide the dropdown arrow but we want to replace
it with our own icon. So we have to hide our own
icon in Firefox versions under 35.
The class is set via Javascript
*/
html.ff-lt-35 .form-control + .icon-arrow-down,
html.ff-lt-35 .dropdown-arrow {
display: none;
}
select::-ms-expand {
display: none;
}
.has-error .form-control,
.has-error .form-control:focus,
.has-error .form-control.focus {
box-shadow: none;
border-color: red !important;
}
input.has-error {
box-shadow: none;
border-color: red !important;
}
.help-inline:not(:empty) {
color: red;
padding: 2px;
font-size: 13px;
}
/* use on input[type=radio] */
.primary-email-switch {
display: none;
& + label {
font-size: 11px;
color: #DBDBDB;
cursor: pointer;
margin: 0;
}
input.has-error {
box-shadow: none;
border-color: red !important;
&:checked + label {
color: $highlight-color;
}
}
.help-inline:not(:empty) {
color: red;
padding: 2px;
font-size: 13px;
}
.primary-email-switch-label {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* use on input[type=radio] */
.primary-email-switch {
display: none;
.primary-email-switch + label {
align-self: stretch;
padding: 0 5px;
display: flex;
align-items: center;
}
& + label {
font-size: 11px;
color: #DBDBDB;
cursor: pointer;
margin: 0;
}
.controls--button {
display: flex;
&:checked + label {
color: $highlight-color;
}
}
input,
.form-control {
flex: 1;
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
.primary-email-switch-holder {
position: relative;
display: flex;
&:focus + .controls-button {
.controls-button-inner {
border-color: hsl(200,71%,59%);
}
.primary-email-switch-label {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/*
.primary-email-switch + label {
align-self: stretch;
padding: 0 5px;
display: flex;
align-items: center;
}
}
fake the form-control outline
.controls--emailSwitch {
display: flex;
.form-control {
flex: 1;
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
&:focus + .primary-email-switch-holder {
label {
border-color: hsl(200,71%,59%);
}
/*
fake the form-control outline
*/
&:before {
content: "";
position: absolute;
left: 0;
top: -3px;
right: -3px;
bottom: -3px;
background: hsl(201,62%,90%);
border-radius: 0 7px 7px 0;
}
*/
&:before {
content: "";
position: absolute;
left: 0;
top: -3px;
right: -3px;
bottom: -3px;
background: hsl(201,62%,90%);
border-radius: 0 7px 7px 0;
}
}
.primary-email-switch-holder label {
padding: 0 9px;
background: white;
position: relative;
border: 1px solid hsl(0, 0%, 90%);
border-radius: 0 3px 3px 0;
}
}
}
.controls-button {
position: relative;
display: flex;
&.is-active .icon {
fill: $highlight-color;
}
}
.controls-button-inner {
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
background: white;
position: relative;
border: 1px solid hsl(0, 0%, 90%);
border-radius: 0 3px 3px 0;
}
.searchfield {
position: relative;
@ -7643,24 +7651,11 @@ output {
transform-origin: left top;
overflow: hidden;
&[data-mode=screenshot] iframe,
&[data-mode=iframe] img {
display: none;
&.is-picking {
cursor: image_url("/assets/images/eyedropper.gif") 0 15, auto;
}
}
iframe {
position: absolute;
border: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: white;
border-radius: 0 0 5px 5px;
pointer-events: none;
}
img {
vertical-align: bottom;
}