diff options
Diffstat (limited to 'workflow-designer-ui/src/main/frontend/resources/scss/common')
3 files changed, 0 insertions, 394 deletions
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss deleted file mode 100644 index 5e5bef84..00000000 --- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss +++ /dev/null @@ -1,51 +0,0 @@ -$cursor-disabled: not-allowed !default; -$cursor-pointer: pointer; - -$camunda-panel-error-border-color: #cc3333; -$camunda-panel-error-background-color: #f0c2c2; - -@mixin body-1-emphasis() { - @include base-font-semibold; - font-size: $body-font-1; -} - -@mixin heading-1-emphasis() { - @include base-font-semibold; - font-size: $heading-font-1; -} - -.flex { - display: flex; - flex: 1; -} - -.flex-column { - @extend .flex; - flex-direction: column; -} - -.text-uppercase { - text-transform: uppercase; -} - -.content-area { - padding: 30px 60px 70px 60px; - overflow-y: auto; - overflow-x: hidden; - height: 100%; - &.no-padding-content-area { - padding: 0; - } -} - -.page-title { - @include heading-1; - @extend .text-uppercase !optional; - margin-bottom: 20px; - color: $blue; -} - -.disabled { - opacity: 0.7 !important; - cursor: $cursor-disabled; -} diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss deleted file mode 100644 index f367c23b..00000000 --- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss +++ /dev/null @@ -1,26 +0,0 @@ -@font-face { - font-family: 'OpenSans-Regular'; - font-style: normal; - font-weight: 400; - src: local('Open Sans Regular'), local('OpenSans-Regular'), - url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), - url('../fonts/open-sans-v15-latin-regular.woff') format('woff'); -} - -@font-face { - font-family: 'OpenSans-Italic'; - font-style: italic; - font-weight: 400; - src: local('Open Sans Italic'), local('OpenSans-Italic'), - url('../fonts/open-sans-v15-latin-italic.woff2') format('woff2'), - url('../fonts/open-sans-v15-latin-italic.woff') format('woff'); -} - -@font-face { - font-family: 'OpenSans-SemiBold'; - font-style: normal; - font-weight: 600; - src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), - url('../fonts/open-sans-v15-latin-600.woff2') format('woff2'), - url('../fonts/open-sans-v15-latin-600.woff') format('woff'); -} diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss deleted file mode 100644 index 7a35b38c..00000000 --- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss +++ /dev/null @@ -1,317 +0,0 @@ - -/* Prefix */ - -$box-sizing-prefix: webkit moz spec; -$border-radius-prefix: webkit spec; -$box-shadow-radius-prefix: webkit moz spec; -$text-shadow-radius-prefix: spec; -$text-shadow-prefix: spec; -$box-shadow-prefix: all; -$linear-gradient-prefix: all; -$transition-prefix: webkit moz o spec; -$flex-prefix: webkit spec; -$browserPrefixes: webkit moz o ms; - -@mixin prefix($property, $value, $prefixeslist: 'all') { - @if $prefixeslist == all { - -webkit-#{$property}: $value; - -moz-#{$property}: $value; - -ms-#{$property}: $value; - -o-#{$property}: $value; - #{$property}: $value; - } @else { - @each $prefix in $prefixeslist { - @if $prefix == webkit { - -webkit-#{$property}: $value; - } @else if $prefix == moz { - -moz-#{$property}: $value; - } @else if $prefix == ms { - -ms-#{$property}: $value; - } @else if $prefix == o { - -o-#{$property}: $value; - } @else if $prefix == spec { - #{$property}: $value; - } @else { - @warn "No such prefix: #{$prefix}"; - } - } - } -} - -/* Value Prefix*/ -@mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) { - - @if $prefixeslist == all { - #{property} : -webkit-#{$valuesuffix}($from, $to); - #{property} : -moz-#{$valuesuffix}($from, $to); - #{property} : -o-#{$valuesuffix}($from, $to); - #{property} : -ms-#{$valuesuffix}($from, $to); - - } @else { - @each $prefix in $prefixeslist { - @if $prefix == webkit { - #{property} : -webkit-#{$valuesuffix}($from, $to); - } @else if $prefix == moz { - #{property} : -moz-#{$valuesuffix}($from, $to); - } @else if $prefix == ms { - #{property} : -ms-#{$valuesuffix}($from, $to); - } @else if $prefix == o { - #{property} : -o-#{$valuesuffix}($from, $to); - } @else { - @warn "No such prefix: #{$prefix}"; - } - } - } -} - -/* Box sizing */ -@mixin box-sizing($value: border-box) { - @include prefix(box-sizing, $value, $box-sizing-prefix); -} - -/* Borders & Shadows */ -@mixin box-shadow($value) { - @include prefix(box-shadow, $value, $box-shadow-radius-prefix); -} - -@mixin sticky($value) { - position: sticky; - top: $value; -} - -@mixin text-shadow($value) { - @include prefix(text-shadow, $value, $text-shadow-radius-prefix); -} - -@mixin border-radius($value, $positions: all) { - @if ($positions == all) { - @include prefix(border-radius, $value, $border-radius-prefix); - } @else { - @each $position in $positions { - @include prefix(border-#{$position}-radius, $value, $border-radius-prefix); - } - } - -} - -@mixin transition($value) { - @include prefix(transition, $value, $transition-prefix); -} - -/* Opacity */ -@mixin opacity($alpha) { - $ie-opacity: round($alpha * 100); - opacity: $alpha; - filter: unquote("alpha(opacity = #{$ie-opacity})"); -} - -/* Ellipsis */ -@mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) { - overflow: hidden; - text-overflow: ellipsis; - width: $width; - white-space: nowrap; - display: $display; - max-width: $max-width; -} - -@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){ - overflow: hidden; - position: relative; - line-height: $lineHeight; - max-height: $lineHeight * $lineCount; - text-align: justify; - word-break: break-all; - // margin-right: -1em; - padding-right: 1em; - &:before { - content: '...'; - position: absolute; - right: 3px; - bottom: 0; - } - &:after { - content: ''; - position: absolute; - right: 0; - width: 1em; - height: 1em; - margin-top: 0.2em; - background: $bgColor; - } -} - -@mixin gradient($from, $to) { - /* fallback/image non-cover color */ - background-color: $from; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); - @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix); -} - -/* Vertical placement of multuple lines of text */ -@mixin vertical-text($height) { - position: absolute; - top: 50%; - margin-top: -$height/2; -} - -@mixin text-vertical-align($align: middle) { - display: table; - width: 100%; - - & > * { - vertical-align: $align; - display: table-cell; - } -} - -@mixin center-element($width) { - width: $width; - margin-left: auto; - margin-right: auto; -} - -@mixin center-content($width) { - & > * { - @include center-element($width); - } -} - -/* transform-rotate */ -// @mixin -// Defines a 2D rotation, the angle is specified in the parameter -// @param -// $deg - angle in degrees -@mixin transform-rotate($deg) { - transform: rotate($deg + deg); /* IE10 and Mozilla */ - -ms-transform: rotate($deg + deg); /* IE 9 */ - -webkit-transform: rotate($deg + deg); /* Safari and Chrome */ -} - -/* transform-translate */ -// @mixin -// Defines a 2D rotation, the angle is specified in the parameter -// @param -// $deg - angle in degrees -@mixin transform-translate($x, $y) { - transform: translate($x, $y); /* IE10 and Mozilla */ - -ms-transform: translate($x, $y); /* IE 9 */ - -webkit-transform: translate($x, $y); /* Safari and Chrome */ -} - -/* transform-scale */ -// @mixin -// Defines a 2D scale transformation, changing the elements width and height -// @param -// $width - width -// @param -// $height - height -@mixin transform-scale($width, $height) { - transform: scale($width, $height); /* IE10 and Mozilla */ - -ms-transform: scale($width, $height); /* IE 9 */ - -webkit-transform: scale($width, $height); /* Safari and Chrome */ -} - -@mixin scrollable() { - ::-webkit-scrollbar { - width: 8px; - } -} - -@mixin create-circle($size, $bgcolor) { - border-radius: 50%; - width: $size; - height: $size; - background: $bgcolor; - border: 3px solid $bgcolor; - display: flex; - align-items: center; - justify-content: center; -} - -/**/ -@mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) { - - @keyframes #{$animationType} { - from { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($fromValue, $startIndex); - $startIndex: $startIndex + 1; - } - } - to { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($toValue, $startIndex); - $startIndex: $startIndex + 1; - } - } - } - @-moz-keyframes #{$animationType}{ - /* Firefox */ - from { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($fromValue, $startIndex); - $startIndex: $startIndex + 1; - } - } - to { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($toValue, $startIndex); - $startIndex: $startIndex + 1; - } - } - } - @-webkit-keyframes #{$animationType} { - /* Safari and Chrome */ - from { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($fromValue, $startIndex); - $startIndex: $startIndex + 1; - } - } - to { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($toValue, $startIndex); - $startIndex: $startIndex + 1; - } - } - } - @-o-keyframes #{$animationType} { - /* Opera */ - from { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($fromValue, $startIndex); - $startIndex: $startIndex + 1; - } - } - to { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($toValue, $startIndex); - $startIndex: $startIndex + 1; - } - } - } -} - - -/**/ -@mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) { - @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity)); -} - -/* percent-plus-value */ -// @mixin -// Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels) -// to a percentage of container height/width -@mixin percent-plus-value($property, $value, $percent: 100%) { - $string: 'calc(' + $percent + ' + ' + $value + ')'; - #{$property}: unquote($string); -} |