add autoprefixer, remove manual prefixes

This commit is contained in:
Felix Niklas 2015-05-13 16:38:48 +02:00
parent 5d7258b6ab
commit 930a3c8fe7
3 changed files with 167 additions and 223 deletions

View file

@ -12,6 +12,7 @@ gem 'json'
# Gems used only for assets and not required # Gems used only for assets and not required
# in production environments by default. # in production environments by default.
group :assets do group :assets do
gem 'autoprefixer-rails'
gem 'sass-rails' #, github: 'rails/sass-rails' gem 'sass-rails' #, github: 'rails/sass-rails'
gem 'coffee-rails' gem 'coffee-rails'
gem 'coffee-script-source' gem 'coffee-script-source'

View file

@ -50,8 +50,7 @@ blockquote {
.u-clickable { .u-clickable {
pointer-events: auto; pointer-events: auto;
cursor: pointer; cursor: pointer;
-webkit-user-select: none; user-select: none;
user-select: none;
} }
.u-textTruncate { .u-textTruncate {
@ -195,11 +194,9 @@ time[data-tooltip]:after,
span[data-tooltip]:after { span[data-tooltip]:after {
content: ""; content: "";
position: absolute; position: absolute;
-webkit-transform: scale(0); transform: scale(0);
transform: scale(0);
opacity: 0; opacity: 0;
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.34,1.6,0.71,1), opacity 300ms; transition: transform 300ms cubic-bezier(0.34,1.6,0.71,1), opacity 300ms;
transition: transform 300ms cubic-bezier(0.34,1.6,0.71,1), opacity 300ms;
} }
a[data-tooltip]:before, a[data-tooltip]:before,
time[data-tooltip]:before, time[data-tooltip]:before,
@ -214,8 +211,7 @@ span[data-tooltip]:before {
padding: 0 13px; padding: 0 13px;
content: attr(data-tooltip); content: attr(data-tooltip);
white-space: nowrap; white-space: nowrap;
-webkit-transform-origin: 17px 26px; transform-origin: 17px 26px;
transform-origin: 17px 26px;
} }
a[data-tooltip]:after, a[data-tooltip]:after,
time[data-tooltip]:after, time[data-tooltip]:after,
@ -225,8 +221,7 @@ span[data-tooltip]:after {
border-top: 7px solid #c6c6c5; border-top: 7px solid #c6c6c5;
border-left: 7px solid transparent; border-left: 7px solid transparent;
border-right: 7px solid transparent; border-right: 7px solid transparent;
-webkit-transform-origin: 4px 0; transform-origin: 4px 0;
transform-origin: 4px 0;
} }
a[data-tooltip]:hover:after, a[data-tooltip]:hover:after,
a[data-tooltip]:hover:before, a[data-tooltip]:hover:before,
@ -236,8 +231,7 @@ span[data-tooltip]:hover:after,
span[data-tooltip]:hover:before { span[data-tooltip]:hover:before {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
-webkit-transition: -webkit-transform 300ms 1.5s cubic-bezier(0.34,1.6,0.71,1), opacity 300ms 1.5s; transition: transform 300ms 1.5s cubic-bezier(0.34,1.6,0.71,1), opacity 300ms 1.5s;
transition: transform 300ms 1.5s cubic-bezier(0.34,1.6,0.71,1), opacity 300ms 1.5s;
} }
.textarea::-webkit-input-placeholder, .textarea::-webkit-input-placeholder,
@ -493,7 +487,10 @@ table {
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 38px; height: 38px;
@extend .u-clickable, .centered; @extend .u-clickable;
display: flex;
align-items: center;
justify-content: center;
} }
.input-replacement input { .input-replacement input {
@ -680,7 +677,8 @@ fieldset > *:not(.form-group) .form-control {
padding: 0 2px; padding: 0 2px;
margin-bottom: 3px; margin-bottom: 3px;
position: relative; position: relative;
@extend .horizontal, .center; display: flex;
align-items: center;
label { label {
margin: 0; margin: 0;
@ -692,7 +690,10 @@ fieldset > *:not(.form-group) .form-control {
} }
.formGroup-bookmark { .formGroup-bookmark {
@extend .u-clickable, .horizontal, .center, .reverse; @extend .u-clickable;
display: flex;
align-items: center;
flex-direction: row-reverse;
width: 30px; width: 30px;
height: 30px; height: 30px;
position: absolute; position: absolute;
@ -755,8 +756,7 @@ textarea,
box-shadow: none; box-shadow: none;
outline: none; outline: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; appearance: none;
appearance: none;
} }
.form-control:focus, .form-control:focus,
@ -847,7 +847,9 @@ textarea,
.fullscreenMessage { .fullscreenMessage {
padding: 22px; padding: 22px;
@extend .centered; display: flex;
align-items: center;
justify-content: center;
.icon { .icon {
margin: -5px 14px 0 0; margin: -5px 14px 0 0;
@ -868,7 +870,7 @@ textarea,
.pagination { .pagination {
margin: 0 0 0 19px; margin: 0 0 0 19px;
@extend .horizontal; display: flex;
} }
.pagination > li > a, .pagination > li > a,
@ -914,7 +916,8 @@ textarea,
.page-header-meta { .page-header-meta {
margin-top: 6px; margin-top: 6px;
margin-left: auto; margin-left: auto;
@extend .horizontal, .self-start; display: flex;
align-self: flex-start;
.btn { .btn {
margin: 0 0 2px 9px; margin: 0 0 2px 9px;
@ -1048,7 +1051,9 @@ textarea,
} }
.poweredBy { .poweredBy {
@extend .centered; display: flex;
align-items: center;
justify-content: center;
color: hsl(233,7%,26%); color: hsl(233,7%,26%);
margin: auto 0 34px -16px; margin: auto 0 34px -16px;
cursor: default; cursor: default;
@ -1128,7 +1133,8 @@ ol.tabs li {
padding: 10px 20px; padding: 10px 20px;
text-align: center; text-align: center;
border-right: 1px solid rgba(0,8,14,.08); border-right: 1px solid rgba(0,8,14,.08);
@extend .flex-auto, .u-clickable; flex: 1 1 auto;
@extend .u-clickable;
} }
.tab.active { .tab.active {
@ -1201,7 +1207,7 @@ ol.tabs li {
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
@extend .horizontal; display: flex;
&.auth_provider--wide { &.auth_provider--wide {
padding-right: 25px; padding-right: 25px;
@ -1239,7 +1245,7 @@ ol.tabs li {
} }
.provider_name { .provider_name {
@extend .flex; flex: 1;
} }
.provider_icon { .provider_icon {
@ -1836,8 +1842,7 @@ ol.tabs li {
width: 30px; width: 30px;
height: 30px; height: 30px;
background: hsl(145,51%,45%); background: hsl(145,51%,45%);
-webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
} }
.small.loading.icon { .small.loading.icon {
@ -1845,22 +1850,13 @@ ol.tabs li {
height: 20px; height: 20px;
} }
@-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px); }
50% { -webkit-transform: perspective(120px) rotateY(180deg); }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); }
}
@keyframes rotateplane { @keyframes rotateplane {
0% { 0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
} 50% { } 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
} 100% { } 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
} }
} }
@ -1980,11 +1976,7 @@ footer {
background-color: whiteSmoke; background-color: whiteSmoke;
border: 1px solid #eee; border: 1px solid #eee;
border: 1px solid rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.05);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
} }
@ -2001,8 +1993,6 @@ footer {
.translation { .translation {
border: 1px dotted #F92; border: 1px dotted #F92;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
} }
.translation:hover { .translation:hover {
@ -2102,7 +2092,7 @@ footer {
.tasks--standalone .task { .tasks--standalone .task {
padding: 0; padding: 0;
margin-bottom: 9px; margin-bottom: 9px;
@extend .horizontal; display: flex;
} }
.tasks-standalone .name { .tasks-standalone .name {
@ -2117,7 +2107,9 @@ footer {
padding: 10px 15px 7px 0; padding: 10px 15px 7px 0;
position: relative; position: relative;
color: #808080; color: #808080;
@extend .u-clickable, .horizontal, .center; display: flex;
align-items: center;
@extend .u-clickable;
} }
.tasks-navigation .nav-tab { .tasks-navigation .nav-tab {
@ -2212,7 +2204,10 @@ footer {
width: 50px; width: 50px;
height: 100%; height: 100%;
visibility: hidden; visibility: hidden;
@extend .u-clickable, .centered; @extend .u-clickable;
display: flex;
align-items: center;
justify-content: center;
} }
.nav-tab:hover .nav-tab-close { .nav-tab:hover .nav-tab-close {
@ -2224,7 +2219,9 @@ footer {
height: 21px; height: 21px;
background-color: #2c2d36; background-color: #2c2d36;
border-radius: 100%; border-radius: 100%;
@extend .centered; display: flex;
align-items: center;
justify-content: center;
} }
.nav-tab-close:hover .nav-tab-close-inner { .nav-tab-close:hover .nav-tab-close-inner {
@ -2236,8 +2233,7 @@ footer {
height: 13px; height: 13px;
fill: white; fill: white;
opacity: 0.3; opacity: 0.3;
-webkit-transform: scale(0.7); transform: scale(0.7);
transform: scale(0.7);
} }
.nav-tab-close:hover .icon { .nav-tab-close:hover .icon {
@ -2263,7 +2259,9 @@ footer {
width: 40px; width: 40px;
z-index: 1; z-index: 1;
visibility: hidden; visibility: hidden;
@extend .centered; display: flex;
align-items: center;
justify-content: center;
} }
.empty-search .close.icon { .empty-search .close.icon {
@ -2376,7 +2374,10 @@ footer {
height: 60px; height: 60px;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
@extend .centered, .u-clickable; @extend .u-clickable;
display: flex;
align-items: center;
justify-content: center;
} }
.user-menu .list-button *:not(.dropdown-nose) { .user-menu .list-button *:not(.dropdown-nose) {
@ -2474,7 +2475,7 @@ footer {
height: 40px; height: 40px;
padding: 0 15px; padding: 0 15px;
color: #2594d4; color: #2594d4;
@extend %displayflex; display: flex;
} }
.user-menu .dropdown-menu > li > a:hover { .user-menu .dropdown-menu > li > a:hover {
@ -2613,8 +2614,8 @@ footer {
border-radius: 0; border-radius: 0;
border-top: 1px solid #f2f2f3; border-top: 1px solid #f2f2f3;
background: transparent; /* a:focus, a:active with bg: transparent fixes gray focus bg in IE 10 */ background: transparent; /* a:focus, a:active with bg: transparent fixes gray focus bg in IE 10 */
display: flex;
@extend .u-textTruncate; @extend .u-textTruncate;
@extend %displayflex;
} }
.nav-pills > li:hover > a { .nav-pills > li:hover > a {
@ -2794,7 +2795,7 @@ footer {
} }
.popover-content { .popover-content {
@extend .flex; flex: 1;
overflow-y: scroll; overflow-y: scroll;
} }
@ -2806,8 +2807,8 @@ footer {
} }
.popover-notificationsHeader { .popover-notificationsHeader {
@extend .horizontal; display: flex;
@extend .end; align-items: flex-end;
padding-bottom: 22px; padding-bottom: 22px;
margin: 21px 17px 0; margin: 21px 17px 0;
@ -2826,7 +2827,7 @@ footer {
.popover-notificationsMarkRead { .popover-notificationsMarkRead {
@extend .btn; @extend .btn;
@extend .btn--subtle; @extend .btn--subtle;
@extend .align-right; margin-left: auto;
padding: 5px 0 0 10px; padding: 5px 0 0 10px;
&:hover { &:hover {
@ -2941,7 +2942,10 @@ footer {
} }
.stat-graphic { .stat-graphic {
@extend .flex, .centered; flex: 1;
display: flex;
justify-content: center;
align-items: center;
} }
.time.stat-widget .stat-amount { .time.stat-widget .stat-amount {
@ -2963,7 +2967,9 @@ footer {
padding: 8px 0 7px; padding: 8px 0 7px;
margin-bottom: -7px; margin-bottom: -7px;
border-radius: 3px; border-radius: 3px;
@extend .vertical, .center; display: flex;
flex-direction: column;
align-items: center;
} }
.stats-row:hover { .stats-row:hover {
@ -2978,7 +2984,8 @@ footer {
background: linear-gradient(to top, #f2f2f3, #f2f2f3 1px, transparent 1px); background: linear-gradient(to top, #f2f2f3, #f2f2f3 1px, transparent 1px);
background-position: center bottom; background-position: center bottom;
background-size: 100% 12px; background-size: 100% 12px;
@extend .horizontal, .end; display: flex;
align-items: flex-end;
} }
.stat-bars .stat-bar { .stat-bars .stat-bar {
@ -2996,7 +3003,8 @@ footer {
.stat-legend { .stat-legend {
margin-top: 30px; margin-top: 30px;
@extend .align-right, .horizontal; margin-left: auto;
display: flex;
} }
.stat-legendEntry { .stat-legendEntry {
@ -3100,7 +3108,7 @@ footer {
} }
.form-inline { .form-inline {
@extend .horizontal; display: flex;
} }
.form-inline .input-group-addon, .form-inline .input-group-addon,
@ -3114,11 +3122,11 @@ footer {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
height: 60px; height: 60px;
@extend .flex-auto; flex: 1 1 auto;
} }
.attributeBar.form-inline .form-group:last-child { .attributeBar.form-inline .form-group:last-child {
@extend .flex-shrink; flex: 0 1 auto;
} }
.form-group.is-changed { .form-group.is-changed {
@ -3226,7 +3234,9 @@ footer {
} }
.ticketZoom-controls { .ticketZoom-controls {
@extend .horizontal, .justify-end, .center; display: flex;
justify-content: flex-end;
align-items: center;
} }
.ticketZoom .page-header { .ticketZoom .page-header {
@ -3447,8 +3457,7 @@ footer {
background: white; background: white;
border: 1px solid hsl(240,4%,95%); border: 1px solid hsl(240,4%,95%);
box-shadow: 0 0 1px rgba(0,0,0,.06) inset; box-shadow: 0 0 1px rgba(0,0,0,.06) inset;
-webkit-transform: rotate(-45deg); transform: rotate(-45deg);
transform: rotate(-45deg);
} }
.article-add.is-internal .bubble-arrow:after { .article-add.is-internal .bubble-arrow:after {
@ -3884,7 +3893,9 @@ footer {
.tabsSidebar-holder { .tabsSidebar-holder {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@extend .flex, .vertical; flex: 1;
display: flex;
flex-direction: column;
} }
.tabsSidebar .sidebar { .tabsSidebar .sidebar {
@ -3898,7 +3909,8 @@ footer {
} }
.tabsSidebar .sidebar-header { .tabsSidebar .sidebar-header {
@extend .horizontal, .center; display: flex;
align-items: center;
margin: 20px 20px 0; margin: 20px 20px 0;
padding: 0 0 5px; padding: 0 0 5px;
position: relative; position: relative;
@ -3922,7 +3934,10 @@ footer {
.tabsSidebar-close { .tabsSidebar-close {
padding: 20px; padding: 20px;
margin: -15px; margin: -15px;
@extend .centered, .u-clickable; @extend .u-clickable;
display: flex;
align-items: center;
justify-content: center;
.icon { .icon {
width: 13px; width: 13px;
@ -3956,8 +3971,7 @@ footer {
} }
.tabsSidebar.is-closed { .tabsSidebar.is-closed {
-webkit-transform: translateX(280px); transform: translateX(280px);
transform: translateX(280px);
} }
.tabsSidebar-tabs { .tabsSidebar-tabs {
@ -3979,7 +3993,10 @@ footer {
background: hsl(197,20%,93%); background: hsl(197,20%,93%);
position: relative; position: relative;
border-top: 1px solid hsl(202,12%,87%); border-top: 1px solid hsl(202,12%,87%);
@extend .u-clickable, .centered; @extend .u-clickable;
display: flex;
align-items: center;
justify-content: center;
} }
.tabs .tabs
@ -4147,8 +4164,7 @@ footer {
vertical-align: top; vertical-align: top;
margin-right: 9px; margin-right: 9px;
margin-top: 11px; margin-top: 11px;
-webkit-transform: scale(1.2); transform: scale(1.2);
transform: scale(1.2);
} }
.type-tabs .tab.active .tab-icon { .type-tabs .tab.active .tab-icon {
@ -4270,7 +4286,9 @@ footer {
} }
.switchBackToUser { .switchBackToUser {
@extend .fit, .horizontal, .center, .zIndex-7; @extend .fit, .zIndex-7;
display: flex;
align-items: center;
background: hsl(200,87%,45%); background: hsl(200,87%,45%);
color: #fff; color: #fff;
height: 45px; height: 45px;
@ -4289,7 +4307,9 @@ footer {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-right: -10px; margin-right: -10px;
@extend .centered; display: flex;
align-items: center;
justify-content: center;
.icon { .icon {
fill: white; fill: white;
@ -4359,7 +4379,9 @@ footer {
.modal-leftFooter, .modal-leftFooter,
.modal-centerFooter, .modal-centerFooter,
.modal-rightFooter { .modal-rightFooter {
@extend .flex, .horizontal, .start; display: flex;
align-items: start;
flex: 1;
} }
.modal.modal--local { .modal.modal--local {
@ -4447,12 +4469,14 @@ footer {
.dropdown.dropdown--actions { .dropdown.dropdown--actions {
li { li {
padding: 0; padding: 0;
@extend .horizontal, .center; display: flex;
align-items: center;
} }
.dropdown-iconSpacer, .dropdown-iconSpacer,
.dropdown-activeSpacer { .dropdown-activeSpacer {
@extend .horizontal, .center; display: flex;
align-items: center;
} }
.dropdown-iconSpacer { .dropdown-iconSpacer {
@ -4462,11 +4486,12 @@ footer {
.dropdown-activeSpacer { .dropdown-activeSpacer {
width: 34px; width: 34px;
margin-left: auto; margin-left: auto;
@extend .justify-end; justify-content: flex-end;
} }
a { a {
@extend .u-clickable, .horizontal; @extend .u-clickable;
display: flex;
min-width: 100%; min-width: 100%;
padding: 3px 18px; padding: 3px 18px;
} }
@ -4688,7 +4713,9 @@ footer {
} }
.scrollPageHeader { .scrollPageHeader {
@extend .tabsSidebar-sidebarSpacer, .zIndex-6, .horizontal, .center; @extend .tabsSidebar-sidebarSpacer, .zIndex-6;
display: flex;
align-items: center;
background: white; background: white;
border-bottom: 1px solid hsl(0,0%,78%); border-bottom: 1px solid hsl(0,0%,78%);
height: 64px; height: 64px;
@ -4697,8 +4724,7 @@ footer {
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
-webkit-transform: translateY(-64px); transform: translateY(-64px);
transform: translateY(-64px);
} }
.scrollPageHeader small { .scrollPageHeader small {
@ -4709,7 +4735,7 @@ footer {
max-width: initial; max-width: initial;
padding: 0; padding: 0;
min-width: 0; min-width: 0;
@extend .flex; flex: 1;
} }
.scrollPageHeader h1 { .scrollPageHeader h1 {
@ -4719,7 +4745,9 @@ footer {
} }
.wizard-slide { .wizard-slide {
@extend .vertical, .hero-unit; @extend .hero-unit;
display: flex;
flex-direction: column;
width: 400px; width: 400px;
padding-bottom: 18px; padding-bottom: 18px;
margin-bottom: 20px; margin-bottom: 20px;
@ -4737,12 +4765,12 @@ footer {
} }
.wizard-body { .wizard-body {
@extend .flex; flex: 1;
padding-bottom: 15px; padding-bottom: 15px;
} }
.wizard-controls { .wizard-controls {
@extend .horizontal; display: flex;
margin-top: 15px; margin-top: 15px;
height: 39px; height: 39px;
} }
@ -4792,7 +4820,9 @@ label + .wizard-buttonList {
color: hsl(0,0%,60%); color: hsl(0,0%,60%);
background: hsl(0,0%,95%); background: hsl(0,0%,95%);
margin-bottom: 10px; margin-bottom: 10px;
@extend .centered; display: flex;
align-items: center;
justify-content: center;
} }
} }
@ -4877,7 +4907,9 @@ label + .wizard-buttonList {
} }
.channelList { .channelList {
@extend .flex, .vertical; flex: 1;
display: flex;
flex-direction: column;
background: white; background: white;
border-radius: 2px; border-radius: 2px;
margin: 5px 0 20px; margin: 5px 0 20px;
@ -4890,7 +4922,7 @@ label + .wizard-buttonList {
} }
.channelList-entry { .channelList-entry {
@extend .horizontal; display: flex;
cursor: default; cursor: default;
padding: 5px 8px; padding: 5px 8px;
@ -4901,7 +4933,7 @@ label + .wizard-buttonList {
.channelList-label { .channelList-label {
margin: 0 10px; margin: 0 10px;
@extend .flex; flex: 1;
& > * { & > * {
@extend .u-textTruncate; @extend .u-textTruncate;
} }
@ -4913,13 +4945,16 @@ label + .wizard-buttonList {
} }
.channelList-placeholder { .channelList-placeholder {
@extend .flex, .centered; display: flex;
align-items: center;
justify-content: center;
flex: 1;
color: #999; color: #999;
} }
.channelList-controls { .channelList-controls {
margin-top: auto; margin-top: auto;
@extend .horizontal; display: flex;
background: hsl(251,6%,92%); background: hsl(251,6%,92%);
border-left: none; border-left: none;
border-right: none; border-right: none;
@ -4927,7 +4962,8 @@ label + .wizard-buttonList {
} }
.channelList-controlEntry { .channelList-controlEntry {
@extend .horizontal, .justified; display: flex;
justify-content: center;
width: 26px; width: 26px;
height: 26px; height: 26px;
border-left: none; border-left: none;
@ -5009,12 +5045,10 @@ label + .wizard-buttonList {
@extend .u-unclickable; @extend .u-unclickable;
} }
.camera-flash.is-active { .camera-flash.is-active {
-webkit-animation: flash 500ms ease; animation: flash 500ms ease;
animation: flash 500ms ease;
} }
@-webkit-keyframes flash { 0% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } } @keyframes flash { 0% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } }
@keyframes flash { 0% { opacity: 0 } 50% { opacity: 1 } 100% { opacity: 0 } }
.fileUpload { .fileUpload {
position: relative; position: relative;
@ -5126,7 +5160,7 @@ label + .wizard-buttonList {
} }
.profile-ticketsPlaceholder { .profile-ticketsPlaceholder {
@extend .flex; flex: 1;
margin: 8px 0 22px; margin: 8px 0 22px;
color: hsl(209,28%,74%); color: hsl(209,28%,74%);
@ -5148,7 +5182,9 @@ label + .wizard-buttonList {
} }
.profile-organizationMember { .profile-organizationMember {
@extend .profile-detailsEntry, .horizontal, .center; @extend .profile-detailsEntry;
display: flex;
align-items: center;
.avatar { .avatar {
margin-right: 10px; margin-right: 10px;
@ -5156,14 +5192,18 @@ label + .wizard-buttonList {
} }
.profile-ticketList { .profile-ticketList {
@extend .flex, .vertical; display: flex;
flex-direction: column;
flex: 1;
&:not(:last-child) { &:not(:last-child) {
margin-right: 50px; margin-right: 50px;
} }
.tasks { .tasks {
@extend .flex, .vertical; display: flex;
flex-direction: column;
flex: 1;
} }
} }
@ -5186,7 +5226,9 @@ label + .wizard-buttonList {
} }
.profile-organizationIcon { .profile-organizationIcon {
@extend .centered; display: flex;
align-items: center;
justify-content: center;
width: 80px; width: 80px;
height: 80px; height: 80px;
background: hsl(0,0%,87%); background: hsl(0,0%,87%);
@ -5194,8 +5236,7 @@ label + .wizard-buttonList {
opacity: 0.4; opacity: 0.4;
.icon { .icon {
-webkit-transform: scale(1.6); transform: scale(1.6);
transform: scale(1.6);
} }
} }
@ -5271,12 +5312,7 @@ label + .wizard-buttonList {
.horizontal, .horizontal,
.vertical, .vertical,
.centered, .centered {
%displayflex {
display: -webkit-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex; display: flex;
} }
.horizontal.hide, .horizontal.hide,
@ -5286,43 +5322,23 @@ label + .wizard-buttonList {
} }
.horizontal { .horizontal {
-webkit-box-orient: horizontal;
-ms-flex-direction: row;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row; flex-direction: row;
} }
.horizontal.reverse { .horizontal.reverse {
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.vertical { .vertical {
-webkit-box-orient: vertical;
-ms-flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
} }
.vertical.reverse { .vertical.reverse {
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.vertical.stretch > *, .vertical.stretch > *,
.horizontal.stretch > * { .horizontal.stretch > * {
-webkit-box-flex: 1;
-ms-flex: 1;
-moz-flex: 1;
-webkit-flex: 1;
flex: 1; flex: 1;
} }
@ -5347,161 +5363,83 @@ body.fit {
} }
.flex { .flex {
-webkit-box-flex: 1; flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
} }
.flex-full { .flex-full {
-webkit-box-flex: 1; flex: 1 1 100%;
-webkit-flex: 1 1 100%;
-moz-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
} }
.flex-auto { .flex-auto {
-webkit-box-flex: 1; flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
} }
.flex-shrink { .flex-shrink {
-webkit-box-flex: 1; flex: 0 1 auto;
-webkit-flex: 0 1 auto;
-moz-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
} }
.flex-none { .flex-none {
-webkit-box-flex: none; flex: none;
-webkit-flex: none;
-moz-flex: none;
-ms-flex: none;
flex: none;
} }
.flex-1 { .flex-1 {
-webkit-box-flex: 1; flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
} }
.flex-2 { .flex-2 {
-webkit-box-flex: 2; flex: 2;
-webkit-flex: 2;
-moz-flex: 2;
-ms-flex: 2;
flex: 2;
} }
.flex-3 { .flex-3 {
-webkit-box-flex: 3; flex: 3;
-webkit-flex: 3;
-moz-flex: 3;
-ms-flex: 3;
flex: 3;
} }
.justify-start { .justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
-moz-justify-content: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start; justify-content: flex-start;
} }
.justified { .justified {
-webkit-box-pack: center;
-ms-flex-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center; justify-content: center;
} }
.justify-end { .justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end; justify-content: flex-end;
} }
.justify-between { .justify-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between; justify-content: space-between;
} }
.start { .start {
-webkit-box-align: start;
-ms-flex-align: start;
-moz-align-items: flex-start;
-webkit-align-items: flex-start;
align-items: flex-start; align-items: flex-start;
} }
.center { .center {
-webkit-box-align: center;
-ms-flex-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center; align-items: center;
} }
.centered { .centered {
-webkit-box-align: center;
-ms-flex-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center; align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center; justify-content: center;
} }
.end { .end {
-webkit-box-align: end;
-ms-flex-align: end;
-moz-align-items: flex-end;
-webkit-align-items: flex-end;
align-items: flex-end; align-items: flex-end;
} }
.self-start { .self-start {
-webkit-align-self: start; align-self: start;
-moz-align-self: start;
-ms-align-self: start;
align-self: start;
} }
.self-end { .self-end {
-webkit-align-self: end; align-self: end;
-moz-align-self: end;
-ms-align-self: end;
align-self: end;
} }
.two-columns, .two-columns,
.three-columns, .three-columns,
.wrap { .wrap {
-ms-box-lines: multiple; flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
} }
.two-columns > .column { .two-columns > .column {

5
browserlist Normal file
View file

@ -0,0 +1,5 @@
# Browsers that we support
> 1%
Last 2 versions
Explorer 10