diff --git a/app/assets/stylesheets/dunlop-semantic-ui.sass b/app/assets/stylesheets/dunlop-semantic-ui.sass index 1a7a3a1..24d8df2 100644 --- a/app/assets/stylesheets/dunlop-semantic-ui.sass +++ b/app/assets/stylesheets/dunlop-semantic-ui.sass @@ -2,6 +2,7 @@ @import ./dunlop-semantic/calendar @import ./dunlop-semantic/ui-calendar-additions +@import ./dunlop-semantic/convenience-helpers @import ./dunlop/components/environment-ribbon //@import ./dunlop/components/user_management diff --git a/app/assets/stylesheets/dunlop-semantic/convenience-helpers.sass b/app/assets/stylesheets/dunlop-semantic/convenience-helpers.sass new file mode 100644 index 0000000..ff2e915 --- /dev/null +++ b/app/assets/stylesheets/dunlop-semantic/convenience-helpers.sass @@ -0,0 +1,79 @@ +.pointable + cursor: pointer + +.comma-separated-items + > * + &:after + content: ", " + &:last-child + &:after + content: "" + +.pull-right + float: right + +.unpadded + padding: 0 !important + +.ui.table + td + &.compact + padding: 0.5em 0.7em + +.ui-scrollable-table-container + // semantic-ui has overflow-x hidden normally. Tables that do not collapse should be made horizontally scrollable to not "loose" data + overflow-x: scroll + +// This helper is used on semantic-ui tables having pre elements. Due to whitespace settings the table width is pushing the table from the screen +// https://github.com/Semantic-Org/Semantic-UI/issues/1341 +.ui.table pre, .force-wrap + white-space: pre-wrap + word-wrap: break-word + +input:disabled + background-color: #ccc !important + +// .ui.grid might end up with columns having a negative bottom margin that captures the click event of the svg below it +.without-bottom-margin + margin-bottom: 0 !important + +.between-brackets + &:before + content: '(' + &:after + content: ')' + &.curly + &:before + content: '{' + &:after + content: '}' + &.angle + &:before + content: '<' + &:after + content: '>' + &.square + &:before + content: '[' + &:after + content: ']' + &.spaced + &:before + content: '( ' + &:after + content: ' )' + &.curly + &:before + content: '{ ' + &:after + content: ' }' + &.angle + &:before + content: '< ' + &:after + content: ' >' + &.square + &:before + content: '[ ' + &:after + content: ' ]'