Commit 1cfab087 authored by Ubbo Veentjer's avatar Ubbo Veentjer
Browse files

included sass from theme, build css from sass

parent b444da2a
Pipeline #138560 passed with stages
in 11 minutes and 21 seconds
plugins { plugins {
id 'org.springframework.boot' version '2.3.0.RELEASE' id 'org.springframework.boot' version '2.3.0.RELEASE'
id 'com.github.node-gradle.node' version '2.2.0' id 'com.github.node-gradle.node' version '2.2.4'
id 'io.miret.etienne.sass' version '1.1.1'
} }
apply plugin: 'java' apply plugin: 'java'
...@@ -58,6 +59,7 @@ node { ...@@ -58,6 +59,7 @@ node {
// npm install should be run before processResources // npm install should be run before processResources
processResources.dependsOn npmInstall processResources.dependsOn npmInstall
processResources.dependsOn compileSass
// copy static files to web application // copy static files to web application
processResources { processResources {
...@@ -76,6 +78,9 @@ processResources { ...@@ -76,6 +78,9 @@ processResources {
from ('node_modules/openseadragon/build/openseadragon/images') { from ('node_modules/openseadragon/build/openseadragon/images') {
into 'static/images/openseadragon' into 'static/images/openseadragon'
} }
from ("${buildDir}/sass/") {
into 'static/css'
}
} }
test { test {
......
This diff is collapsed.
# Theme for textgridrep.org
Originating from the [Liferay 6 Theme for textgrid.de](https://projects.gwdg.de/projects/liferay-textgrid)
Note: the Sass was formerly built with gulp and made use of globbing. This
is not supported by sass-dart, so we now have an _index.sass in every subdir.
## Extending the theme (aka adding styles)
Styles are written in Sass (indented syntax), using a variant of the
[BEM](https://en.bem.info/method/) naming scheme for class names. In BEM -
meaning block, element, modifier - all styles belong to one of these types:
- `.block` represents the higher level of an abstraction or component
- `.block_element`, divided by `_`, represents a descendent of .block. Use only
one level of descendency, it does not have to correspond with the actual DOM.
- `.-modifier`, prepended by `-` (think command-line switch), represents a
different state of a .block or .block_element and can only be used
alongside those.
In Sass, this looks like `.namespace.block-name_element-name &.-modifier-name.`
Namespace is added to improve specifity and thus override default styles. This
corresponds to
`<element class="namespace block-name_element-name -modifier-name"`> in
HTML/Velocity. Up to two class-less child elements are fine if otherwise extra
overrides would be necessary. Use !important only for base theme overrides
as a last resort.
// Link styles for Liferay web content and RSS portlet
.journal-content-article,
.portlet-rss,
.tgrep
a
@extend %link
border-bottom: $border-width solid transparent
+hover
border-color: $link-hover-color
> img
vertical-align: bottom
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main
display: block
// Common styles for Liferay web content portlet
.journal-content-article,
.tgrep
h1
+heading(1)
padding-top: $grid
&:first-child
padding-top: 0
h2
+heading(2)
padding-top: $grid
&:first-child
padding-top: 0
h1 + h2
padding-top: 0
h3,
h4,
h5,
h6
+heading(3)
margin: 0 // .aui override
h1,
h2,
p,
table,
ul,
ol,
form,
blockquote,
dl,
address,
audio,
fieldset,
figure,
pre,
video
margin: 0 0 $line-height
ol ol,
ol ul,
ul ol,
ul ul
margin: 0
small
font-size: .8125em // i.e. 13px with 16px base font size
code,
pre
font-family: $font-family-code
code
color: $text-color // .aui override
line-height: 1
vertical-align: middle
hr
border: 0
height: $border-width
background: linear-gradient(to right, rgba(#000, 0), rgba(#000, .18), rgba(#000, 0))
margin: ($line-height - $border-width) 0 $line-height
em,
i
font-style: italic
strong,
b
font-weight: bold
small
font-size: .8125em
line-height: 1
sub,
sup
font-size: .75em
line-height: 0
position: relative
vertical-align: baseline
sup
top: -.5em
sub
bottom: -.25em
table
border-bottom: $border-width solid $border-color
margin: 0 0 ($line-height - $border-width)
width: 100%
tr
border-bottom: $border-width solid $border-color
th,
td,
.table th,
.table td
line-height: inherit // .aui override
padding: ($line-height / 2) .5em ($line-height / 2 - $border-width)
text-align: left
th
font-weight: bold
// Additional content list styles
.journal-content-article
ol,
ul
padding-left: $grid
ol
list-style: decimal outside
ul
list-style: disc outside
.tgrep
ol,
ul
list-style: none
// Form styles for Liferay web content and web form portlet
.journal-content-article,
.portlet-body > form,
.tgrep
legend
+heading(2)
border: 0
margin-bottom: $grid
label
display: inline
font-size: inherit
line-height: inherit
margin-bottom: 0
// Need to specify element name and type for .aui override
input[type=color]
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=file],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
textarea
@extend %text-input
margin: 0
vertical-align: baseline
label &
margin-left: .5em
input[type=number]
width: 5em
input[type=checkbox],
input[type=radio]
position: absolute
visibility: hidden
+ label:before
color: $link-color
width: 1em
+hover
color: $link-hover-color
input[type=checkbox]
+ label
+icon('square-o')
&:checked + label
+icon('check-square-o')
input[type=radio]
+ label
+icon('circle-o')
&:checked + label
+icon('dot-circle-o')
// Bootstrap
.control-group
margin-bottom: $grid
input[type=color]
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=file],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
textarea
max-width: none
width: 100%
button,
[type=button],
[type=reset],
[type=submit],
.btn // Bootstrap
@extend %button
$fa-icons: (
adjust: \f042,
adn: \f170,
align-center: \f037,
align-justify: \f039,
align-left: \f036,
align-right: \f038,
ambulance: \f0f9,
anchor: \f13d,
android: \f17b,
angellist: \f209,
angle-double-down: \f103,
angle-double-left: \f100,
angle-double-right: \f101,
angle-double-up: \f102,
angle-down: \f107,
angle-left: \f104,
angle-right: \f105,
angle-up: \f106,
apple: \f179,
archive: \f187,
area-chart: \f1fe,
arrow-circle-down: \f0ab,
arrow-circle-left: \f0a8,
arrow-circle-o-down: \f01a,
arrow-circle-o-left: \f190,
arrow-circle-o-right: \f18e,
arrow-circle-o-up: \f01b,
arrow-circle-right: \f0a9,
arrow-circle-up: \f0aa,
arrow-down: \f063,
arrow-left: \f060,
arrow-right: \f061,
arrow-up: \f062,
arrows: \f047,
arrows-alt: \f0b2,
arrows-h: \f07e,
arrows-v: \f07d,
asterisk: \f069,
at: \f1fa,
automobile: \f1b9,
backward: \f04a,
ban: \f05e,
bank: \f19c,
bar-chart: \f080,
bar-chart-o: \f080,
barcode: \f02a,
bars: \f0c9,
bed: \f236,
beer: \f0fc,
behance: \f1b4,
behance-square: \f1b5,
bell: \f0f3,
bell-o: \f0a2,
bell-slash: \f1f6,
bell-slash-o: \f1f7,
bicycle: \f206,
binoculars: \f1e5,
birthday-cake: \f1fd,
bitbucket: \f171,
bitbucket-square: \f172,
bitcoin: \f15a,
bold: \f032,
bolt: \f0e7,
bomb: \f1e2,
book: \f02d,
bookmark: \f02e,
bookmark-o: \f097,
briefcase: \f0b1,
btc: \f15a,
bug: \f188,
building: \f1ad,
building-o: \f0f7,
bullhorn: \f0a1,
bullseye: \f140,
bus: \f207,
buysellads: \f20d,
cab: \f1ba,
calculator: \f1ec,
calendar: \f073,
calendar-o: \f133,
camera: \f030,
camera-retro: \f083,
car: \f1b9,
caret-down: \f0d7,
caret-left: \f0d9,
caret-right: \f0da,
caret-square-o-down: \f150,
caret-square-o-left: \f191,
caret-square-o-right: \f152,
caret-square-o-up: \f151,
caret-up: \f0d8,
cart-arrow-down: \f218,
cart-plus: \f217,
cc: \f20a,
cc-amex: \f1f3,
cc-discover: \f1f2,
cc-mastercard: \f1f1,
cc-paypal: \f1f4,
cc-stripe: \f1f5,
cc-visa: \f1f0,
certificate: \f0a3,
chain: \f0c1,
chain-broken: \f127,
check: \f00c,
check-circle: \f058,
check-circle-o: \f05d,
check-square: \f14a,
check-square-o: \f046,
chevron-circle-down: \f13a,
chevron-circle-left: \f137,
chevron-circle-right: \f138,
chevron-circle-up: \f139,
chevron-down: \f078,
chevron-left: \f053,
chevron-right: \f054,
chevron-up: \f077,
child: \f1ae,
circle: \f111,
circle-o: \f10c,
circle-o-notch: \f1ce,
circle-thin: \f1db,
clipboard: \f0ea,
clock-o: \f017,
close: \f00d,
cloud: \f0c2,
cloud-download: \f0ed,
cloud-upload: \f0ee,
cny: \f157,
code: \f121,
code-fork: \f126,
codepen: \f1cb,
coffee: \f0f4,
cog: \f013,
cogs: \f085,
columns: \f0db,
comment: \f075,
comment-o: \f0e5,
comments: \f086,
comments-o: \f0e6,
compass: \f14e,
compress: \f066,
connectdevelop: \f20e,
copy: \f0c5,
copyright: \f1f9,
credit-card: \f09d,
crop: \f125,
crosshairs: \f05b,
css3: \f13c,
cube: \f1b2,
cubes: \f1b3,
cut: \f0c4,
cutlery: \f0f5,
dashboard: \f0e4,
dashcube: \f210,
database: \f1c0,
dedent: \f03b,
delicious: \f1a5,
desktop: \f108,
deviantart: \f1bd,
diamond: \f219,
digg: \f1a6,
dollar: \f155,
dot-circle-o: \f192,
download: \f019,
dribbble: \f17d,
dropbox: \f16b,
drupal: \f1a9,
edit: \f044,
eject: \f052,
ellipsis-h: \f141,
ellipsis-v: \f142,
empire: \f1d1,
envelope: \f0e0,
envelope-o: \f003,
envelope-square: \f199,
eraser: \f12d,
eur: \f153,
euro: \f153,
exchange: \f0ec,
exclamation: \f12a,
exclamation-circle: \f06a,
exclamation-triangle: \f071,
expand: \f065,
external-link: \f08e,
external-link-square: \f14c,
eye: \f06e,
eye-slash: \f070,
eyedropper: \f1fb,
facebook: \f09a,
facebook-f: \f09a,
facebook-official: \f230,
facebook-square: \f082,
fast-backward: \f049,
fast-forward: \f050,
fax: \f1ac,
female: \f182,
fighter-jet: \f0fb,
file: \f15b,
file-archive-o: \f1c6,
file-audio-o: \f1c7,
file-code-o: \f1c9,
file-excel-o: \f1c3,
file-image-o: \f1c5,
file-movie-o: \f1c8,
file-o: \f016,
file-pdf-o: \f1c1,
file-photo-o: \f1c5,
file-picture-o: \f1c5,
file-powerpoint-o: \f1c4,
file-sound-o: \f1c7,
file-text: \f15c,
file-text-o: \f0f6,
file-video-o: \f1c8,
file-word-o: \f1c2,
file-zip-o: \f1c6,
files-o: \f0c5,
film: \f008,
filter: \f0b0,
fire: \f06d,
fire-extinguisher: \f134,
flag: \f024,
flag-checkered: \f11e,
flag-o: \f11d,
flash: \f0e7,
flask: \f0c3,
flickr: \f16e,
floppy-o: \f0c7,
folder: \f07b,
folder-o: \f114,
folder-open: \f07c,
folder-open-o: \f115,
font: \f031,
forumbee: \f211,
forward: \f04e,
foursquare: \f180,
frown-o: \f119,
futbol-o: \f1e3,
gamepad: \f11b,
gavel: \f0e3,
gbp: \f154,
ge: \f1d1,
gear: \f013,
gears: \f085,
genderless: \f1db,
gift: \f06b,
git: \f1d3,
git-square: \f1d2,
github: \f09b,
github-alt: \f113,
github-square: \f092,
gittip: \f184,
glass: \f000,
globe: \f0ac,
google: \f1a0,
google-plus: \f0d5,
google-plus-square: \f0d4,
google-wallet: \f1ee,
graduation-cap: \f19d,
gratipay: \f184,
group: \f0c0,
h-square: \f0fd,
hacker-news: \f1d4,
hand-o-down: \f0a7,
hand-o-left: \f0a5,
hand-o-right: \f0a4,
hand-o-up: \f0a6,
hdd-o: \f0a0,
header: \f1dc,
headphones: \f025,
heart: \f004,
heart-o: \f08a,
heartbeat: \f21e,
history: \f1da,
home: \f015,
hospital-o: \f0f8,
hotel: \f236,
html5: \f13b,
ils: \f20b,
image: \f03e,
inbox: \f01c,
indent: \f03c,
info: \f129,
info-circle: \f05a,
inr: \f156,
instagram: \f16d,
institution: \f19c,
ioxhost: \f208,
italic: \f033,
joomla: \f1aa,
jpy: \f157,
jsfiddle: \f1cc,
key: \f084,
keyboard-o: \f11c,
krw: \f159,
language: \f1ab,