diff --git a/css/backoffice/base/_all.scss b/css/backoffice/base/_all.scss new file mode 100644 index 0000000000..f8b8454349 --- /dev/null +++ b/css/backoffice/base/_all.scss @@ -0,0 +1,20 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +@import "base"; +@import "typography"; \ No newline at end of file diff --git a/css/backoffice/base/_base.scss b/css/backoffice/base/_base.scss new file mode 100644 index 0000000000..c02001d4ce --- /dev/null +++ b/css/backoffice/base/_base.scss @@ -0,0 +1,27 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +*, +*::before, +*::after{ + box-sizing: border-box; +} + +html{ + font-size: 12px; +} \ No newline at end of file diff --git a/css/backoffice/base/_typography.scss b/css/backoffice/base/_typography.scss new file mode 100644 index 0000000000..cbf98ec91c --- /dev/null +++ b/css/backoffice/base/_typography.scss @@ -0,0 +1,163 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +/* This is an overload of the default lib. stylesheet to use local fonts instead of the CDN */ +@font-face { + font-family: Monorale; + font-weight: 100; + font-style: normal; + src: local('Raleway-v4020 Thin'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Thin.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Thin.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 100; + font-style: italic; + src: local('Raleway-v4020 Thin'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-ThinItalic.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-ThinItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 200; + font-style: normal; + src: local('Raleway-v4020 ExtraLight'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraLight.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraLight.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 200; + font-style: italic; + src: local('Raleway-v4020 ExtraLight'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraLightItalic.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraLightItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 300; + font-style: normal; + src: local('Raleway-v4020 Light'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Light.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Light.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 300; + font-style: italic; + src: local('Raleway-v4020 Light'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-LightItalic.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-LightItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 400; + font-style: normal; + src: local('Raleway-v4020'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Regular.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Regular.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 400; + font-style: italic; + src: local('Raleway-v4020'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Italic.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Italic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 500; + font-style: normal; + src: local('Raleway-v4020 Medium'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Medium.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Medium.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 500; + font-style: italic; + src: local('Raleway-v4020 Medium'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-MediumItalic.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-MediumItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 600; + font-style: normal; + src: local('Raleway-v4020 SemiBold'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-SemiBold.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-SemiBold.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 600; + font-style: italic; + src: local('Raleway-v4020 SemiBold'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-SemiBoldItalic.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-SemiBoldItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 700; + font-style: normal; + src: local('Raleway-v4020'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Bold.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Bold.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 700; + font-style: italic; + src: local('Raleway-v4020'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-BoldItalic.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-BoldItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 800; + font-style: normal; + src: local('Raleway-v4020 ExtraBold'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraBold.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraBold.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 800; + font-style: italic; + src: local('Raleway-v4020 ExtraBold'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraBoldItalic.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraBoldItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 900; + font-style: normal; + src: local('Raleway-v4020 Black'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Black.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Black.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 900; + font-style: italic; + src: local('Raleway-v4020 Black'), + url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-BlackItalic.otf') format('otf'), + url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-BlackItalic.woff') format('woff'); +} diff --git a/css/backoffice/components/_all.scss b/css/backoffice/components/_all.scss new file mode 100644 index 0000000000..5c69368737 --- /dev/null +++ b/css/backoffice/components/_all.scss @@ -0,0 +1,18 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + diff --git a/css/backoffice/layout/_all.scss b/css/backoffice/layout/_all.scss new file mode 100644 index 0000000000..fc310ffcc9 --- /dev/null +++ b/css/backoffice/layout/_all.scss @@ -0,0 +1,20 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +@import "nav-menu"; +@import "top-bar"; \ No newline at end of file diff --git a/css/backoffice/layout/_nav-menu.scss b/css/backoffice/layout/_nav-menu.scss new file mode 100644 index 0000000000..116aa16672 --- /dev/null +++ b/css/backoffice/layout/_nav-menu.scss @@ -0,0 +1,59 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +/* SCSS variables (can be overloaded) */ +$ibo-nav-menu-height: 100% !default; + +$ibo-nav-menu-padding-x: 16px !default; +$ibo-nav-menu-padding-y: 16px !default; +$ibo-nav-menu-width-collapsed: 60px !default; +$ibo-nav-menu-width-expanded: 310px !default; + +$ibo-nav-menu--head-background-color: $ibo-color-blue-grey-900 !default; +$ibo-nav-menu--head-text-color: $ibo-color-grey-300 !default; + +$ibo-nav-menu--top-group-spacing: 20px !default; +$ibo-nav-menu--middle-group-spacing: 28px !default; + +/* CSS variables (can be changed directly from the browser) */ +:root { + --ibo-nav-menu-height: $ibo-nav-menu-height; + --ibo-nav-menu-padding-x: $ibo-nav-menu-padding-x; + --ibo-nav-menu-padding-y: $ibo-nav-menu-padding-y; + --ibo-nav-menu-width-collapsed: $ibo-nav-menu-width-collapsed; + --ibo-nav-menu-width-expanded: $ibo-nav-menu-width-expanded; + + --ibo-nav-menu--head-background-color: $ibo-nav-menu--head-background-color; + --ibo-nav-menu--head-text-color: $ibo-nav-menu--head-text-color; + + --ibo-nav-menu-top-group-spacing: $ibo-nav-menu--top-group-spacing; + --ibo-nav-menu-middle-group-spacing: $ibo-nav-menu--middle-group-spacing; +} + +.ibo-nav-menu{ + position: relative; + overflow-y: auto; + + .ibo-nav-menu--head, + .ibo-nav-menu--body{ + height: var(--ibo-nav-menu-height); + } + .ibo-nav-menu--head{ + background-color: var(--ibo-nav-menu--head-background-color); + } +} \ No newline at end of file diff --git a/css/backoffice/layout/_top-bar.scss b/css/backoffice/layout/_top-bar.scss new file mode 100644 index 0000000000..8a2ad67333 --- /dev/null +++ b/css/backoffice/layout/_top-bar.scss @@ -0,0 +1,37 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +/* SCSS variables (can be overloaded) */ +$ibo-top-bar-padding-left: 16px !default; /* Should be align with the page content padding-left */ +$ibo-top-bar-padding-right: 16px !default; +$ibo-top-bar-padding-y: 16px !default; +$ibo-top-bar-background-color: $ibo-color-white-100 !default; + +/* CSS variables (can be changed directly from the browser) */ +:root{ + --ibo-top-bar-padding-left: $ibo-top-bar-padding-left; + --ibo-top-bar-padding-right: $ibo-top-bar-padding-right; + --ibo-top-bar-padding-y: $ibo-top-bar-padding-y; + --ibo-top-bar-background-color: $ibo-top-bar-background-color; +} +.ibo-top-bar{ + display: flex; + align-items: center; + padding: var(--ibo-top-bar-padding-y) var(--ibo-top-bar-padding-right) var(--ibo-top-bar-padding-y) var(--ibo-top-bar-padding-left); + background-color: var(--ibo-top-bar-background-color); +} \ No newline at end of file diff --git a/css/backoffice/main.css b/css/backoffice/main.css new file mode 100644 index 0000000000..c93de6dc90 --- /dev/null +++ b/css/backoffice/main.css @@ -0,0 +1,471 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/* Color styles */ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/* Base size: html font-size 12px */ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/* Fonts + Value Common weight name (https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) + 100 Thin (Hairline) + 200 Extra Light (Ultra Light) + 300 Light + 400 Normal (Regular) + 500 Medium + 600 Semi Bold (Demi Bold) + 700 Bold + 800 Extra Bold (Ultra Bold) + 900 Black (Heavy) + 950 Extra Black (Ultra Black) + */ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +*, *::before, *::after { + box-sizing: border-box; +} +html { + font-size: 12px; +} +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/* This is an overload of the default lib. stylesheet to use local fonts instead of the CDN */ +@font-face { + font-family: Monorale; + font-weight: 100; + font-style: normal; + src: local('Raleway-v4020 Thin'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Thin.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Thin.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 100; + font-style: italic; + src: local('Raleway-v4020 Thin'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-ThinItalic.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-ThinItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 200; + font-style: normal; + src: local('Raleway-v4020 ExtraLight'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraLight.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraLight.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 200; + font-style: italic; + src: local('Raleway-v4020 ExtraLight'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraLightItalic.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraLightItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 300; + font-style: normal; + src: local('Raleway-v4020 Light'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Light.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Light.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 300; + font-style: italic; + src: local('Raleway-v4020 Light'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-LightItalic.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-LightItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 400; + font-style: normal; + src: local('Raleway-v4020'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Regular.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Regular.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 400; + font-style: italic; + src: local('Raleway-v4020'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Italic.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Italic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 500; + font-style: normal; + src: local('Raleway-v4020 Medium'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Medium.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Medium.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 500; + font-style: italic; + src: local('Raleway-v4020 Medium'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-MediumItalic.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-MediumItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 600; + font-style: normal; + src: local('Raleway-v4020 SemiBold'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-SemiBold.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-SemiBold.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 600; + font-style: italic; + src: local('Raleway-v4020 SemiBold'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-SemiBoldItalic.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-SemiBoldItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 700; + font-style: normal; + src: local('Raleway-v4020'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Bold.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Bold.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 700; + font-style: italic; + src: local('Raleway-v4020'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-BoldItalic.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-BoldItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 800; + font-style: normal; + src: local('Raleway-v4020 ExtraBold'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraBold.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraBold.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 800; + font-style: italic; + src: local('Raleway-v4020 ExtraBold'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraBoldItalic.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraBoldItalic.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 900; + font-style: normal; + src: local('Raleway-v4020 Black'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-Black.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-Black.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 900; + font-style: italic; + src: local('Raleway-v4020 Black'), url('../../lib/samvk/monorale-raleway-sober/otf/Monorale-BlackItalic.otf') format('otf'), url('../../lib/samvk/monorale-raleway-sober/woff/Monorale-BlackItalic.woff') format('woff'); +} +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/* SCSS variables (can be overloaded) */ +/* CSS variables (can be changed directly from the browser) */ +:root { + --ibo-nav-menu-height: 100%; + --ibo-nav-menu-padding-x: 16px; + --ibo-nav-menu-padding-y: 16px; + --ibo-nav-menu-width-collapsed: 60px; + --ibo-nav-menu-width-expanded: 310px; + --ibo-nav-menu--head-background-color: #263238; + --ibo-nav-menu--head-text-color: #d5dde5; + --ibo-nav-menu-top-group-spacing: 20px; + --ibo-nav-menu-middle-group-spacing: 28px; +} +.ibo-nav-menu { + position: relative; + overflow-y: auto; +} +.ibo-nav-menu .ibo-nav-menu--head, .ibo-nav-menu .ibo-nav-menu--body { + height: var(--ibo-nav-menu-height); +} +.ibo-nav-menu .ibo-nav-menu--head { + background-color: var(--ibo-nav-menu--head-background-color); +} +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/* SCSS variables (can be overloaded) */ +/* Should be align with the page content padding-left */ +/* CSS variables (can be changed directly from the browser) */ +:root { + --ibo-top-bar-padding-left: 16px; + --ibo-top-bar-padding-right: 16px; + --ibo-top-bar-padding-y: 16px; + --ibo-top-bar-background-color: white; +} +.ibo-top-bar { + display: flex; + align-items: center; + padding: var(--ibo-top-bar-padding-y) var(--ibo-top-bar-padding-right) var(--ibo-top-bar-padding-y) var(--ibo-top-bar-padding-left); + background-color: var(--ibo-top-bar-background-color); +} +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ +/* SCSS variables (can be overloaded) */ +/* CSS variables (can be changed directly from the browser) */ +:root { + --ibo-body-text-color: #212934; + --ibo-body-background-color: #f2f2f2; +} +/* Layout */ +html { + height: 100%; +} +body { + display: flex; + height: 100%; + color: var(--ibo-body-text-color); + background-color: var(--ibo-body-background-color); + font-size: 1rem; + font-family: "Monorale"; + font-weight: 400; +} +#ibo-page-container { + position: relative; + height: 100%; + overflow: auto; + flex-grow: 1; +} +#ibo-top-bar { + position: sticky; + top: 0; + left: 0; + right: 0; +} +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ diff --git a/css/backoffice/main.scss b/css/backoffice/main.scss new file mode 100644 index 0000000000..6cd0c4b072 --- /dev/null +++ b/css/backoffice/main.scss @@ -0,0 +1,25 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +@import "utils/all"; +@import "vendors/all"; +@import "base/all"; +@import "components/all"; +@import "layout/all"; +@import "pages/all"; +@import "themes/all"; \ No newline at end of file diff --git a/css/backoffice/pages/_all.scss b/css/backoffice/pages/_all.scss new file mode 100644 index 0000000000..c1b3efdf74 --- /dev/null +++ b/css/backoffice/pages/_all.scss @@ -0,0 +1,19 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +@import "base"; \ No newline at end of file diff --git a/css/backoffice/pages/_base.scss b/css/backoffice/pages/_base.scss new file mode 100644 index 0000000000..d60ed300c7 --- /dev/null +++ b/css/backoffice/pages/_base.scss @@ -0,0 +1,53 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +/* SCSS variables (can be overloaded) */ +$ibo-body-text-color: $ibo-color-grey-900 !default; +$ibo-body-background-color: $ibo-color-white-200 !default; + +/* CSS variables (can be changed directly from the browser) */ +:root{ + --ibo-body-text-color: $ibo-body-text-color; + --ibo-body-background-color: $ibo-body-background-color; +} + +/* Layout */ +html{ + height: 100%; +} +body{ + display: flex; + height: 100%; + color: var(--ibo-body-text-color); + background-color: var(--ibo-body-background-color); + @include ibo-font-ral-nor-100; +} +#ibo-page-container{ + position: relative; + height: 100%; + overflow: auto; + flex-grow: 1; +} +#ibo-top-bar{ + position: sticky; + top: 0; + left: 0; + right: 0; +} +#ibo-page-content{ +} \ No newline at end of file diff --git a/css/backoffice/themes/_all.scss b/css/backoffice/themes/_all.scss new file mode 100644 index 0000000000..5c69368737 --- /dev/null +++ b/css/backoffice/themes/_all.scss @@ -0,0 +1,18 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + diff --git a/css/backoffice/utils/_all.scss b/css/backoffice/utils/_all.scss new file mode 100644 index 0000000000..f766882e70 --- /dev/null +++ b/css/backoffice/utils/_all.scss @@ -0,0 +1,21 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +@import "variables/color"; +@import "variables/typography"; +@import "mixins/typography"; \ No newline at end of file diff --git a/css/backoffice/utils/mixins/_typography.scss b/css/backoffice/utils/mixins/_typography.scss new file mode 100644 index 0000000000..0e5b93a16f --- /dev/null +++ b/css/backoffice/utils/mixins/_typography.scss @@ -0,0 +1,262 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +/* Fonts + Value Common weight name (https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) + 100 Thin (Hairline) + 200 Extra Light (Ultra Light) + 300 Light + 400 Normal (Regular) + 500 Medium + 600 Semi Bold (Demi Bold) + 700 Bold + 800 Extra Bold (Ultra Bold) + 900 Black (Heavy) + 950 Extra Black (Ultra Black) + */ +@mixin ibo-font-ral-nor-50 { + font-size: $ibo-font-size-50; + font-family: "Monorale"; + font-weight: 400; +} +@mixin ibo-font-ral-nor-100 { + font-size: $ibo-font-size-100; + font-family: "Monorale"; + font-weight: 400; +} +@mixin ibo-font-ral-nor-150 { + font-size: $ibo-font-size-150; + font-family: "Monorale"; + font-weight: 400; +} +@mixin ibo-font-ral-nor-200 { + font-size: $ibo-font-size-200; + font-family: "Monorale"; + font-weight: 400; +} +@mixin ibo-font-ral-nor-250 { + font-size: $ibo-font-size-250; + font-family: "Monorale"; + font-weight: 400; +} +@mixin ibo-font-ral-nor-300 { + font-size: $ibo-font-size-300; + font-family:" Raleway"; + font-weight: 400; +} +@mixin ibo-font-ral-nor-350 { + font-size: $ibo-font-size-350; + font-family: "Monorale"; + font-weight: 400; +} +@mixin ibo-font-ral-nor-400 { + font-size: $ibo-font-size-400; + font-family: "Monorale"; + font-weight: 400; +} +@mixin ibo-font-ral-nor-450 { + font-size: $ibo-font-size-450; + font-family: "Monorale"; + font-weight: 400; +} +@mixin ibo-font-ral-nor-500 { + font-size: $ibo-font-size-500; + font-family: "Monorale"; + font-weight: 400; +} +@mixin ibo-font-ral-nor-550 { + font-size: $ibo-font-size-550; + font-family: "Monorale"; + font-weight: 400; +} +@mixin ibo-font-ral-med-50 { + font-size: $ibo-font-size-50; + font-family: "Monorale"; + font-weight: 500; +} +@mixin ibo-font-ral-med-100 { + font-size: $ibo-font-size-100; + font-family: "Monorale"; + font-weight: 500; +} +@mixin ibo-font-ral-med-150 { + font-size: $ibo-font-size-150; + font-family: "Monorale"; + font-weight: 500; +} +@mixin ibo-font-ral-med-200 { + font-size: $ibo-font-size-200; + font-family: "Monorale"; + font-weight: 500; +} +@mixin ibo-font-ral-med-250 { + font-size: $ibo-font-size-250; + font-family: "Monorale"; + font-weight: 500; +} +@mixin ibo-font-ral-med-300 { + font-size: $ibo-font-size-300; + font-family:" Raleway"; + font-weight: 500; +} +@mixin ibo-font-ral-med-350 { + font-size: $ibo-font-size-350; + font-family: "Monorale"; + font-weight: 500; +} +@mixin ibo-font-ral-med-400 { + font-size: $ibo-font-size-400; + font-family: "Monorale"; + font-weight: 500; +} +@mixin ibo-font-ral-med-450 { + font-size: $ibo-font-size-450; + font-family: "Monorale"; + font-weight: 500; +} +@mixin ibo-font-ral-med-500 { + font-size: $ibo-font-size-500; + font-family: "Monorale"; + font-weight: 500; +} +@mixin ibo-font-ral-med-550 { + font-size: $ibo-font-size-550; + font-family: "Monorale"; + font-weight: 500; +} +@mixin ibo-font-ral-bol-50 { + font-size: $ibo-font-size-50; + font-family: "Monorale"; + font-weight: 700; +} +@mixin ibo-font-ral-bol-100 { + font-size: $ibo-font-size-100; + font-family: "Monorale"; + font-weight: 700; +} +@mixin ibo-font-ral-bol-150 { + font-size: $ibo-font-size-150; + font-family: "Monorale"; + font-weight: 700; +} +@mixin ibo-font-ral-bol-200 { + font-size: $ibo-font-size-200; + font-family: "Monorale"; + font-weight: 700; +} +@mixin ibo-font-ral-bol-250 { + font-size: $ibo-font-size-250; + font-family: "Monorale"; + font-weight: 700; +} +@mixin ibo-font-ral-bol-300 { + font-size: $ibo-font-size-300; + font-family: "Monorale"; + font-weight: 700; +} +@mixin ibo-font-ral-bol-350 { + font-size: $ibo-font-size-350; + font-family: "Monorale"; + font-weight: 700; +} +@mixin ibo-font-ral-bol-400 { + font-size: $ibo-font-size-400; + font-family: "Monorale"; + font-weight: 700; +} +@mixin ibo-font-ral-bol-450 { + font-size: $ibo-font-size-450; + font-family: "Monorale"; + font-weight: 700; +} +@mixin ibo-font-ral-bol-500 { + font-size: $ibo-font-size-500; + font-family: "Monorale"; + font-weight: 700; +} +@mixin ibo-font-ral-bol-550 { + font-size: $ibo-font-size-550; + font-family: "Monorale"; + font-weight: 700; +} +@mixin ibo-font-ral-ita-50 { + font-size: $ibo-font-size-50; + font-family: "Monorale"; + font-weight: 400; + font-style: italic; +} +@mixin ibo-font-ral-ita-100 { + font-size: $ibo-font-size-100; + font-family: "Monorale"; + font-weight: 400; + font-style: italic; +} +@mixin ibo-font-ral-ita-150 { + font-size: $ibo-font-size-150; + font-family: "Monorale"; + font-weight: 400; + font-style: italic; +} +@mixin ibo-font-ral-ita-200 { + font-size: $ibo-font-size-200; + font-family: "Monorale"; + font-weight: 400; + font-style: italic; +} +@mixin ibo-font-ral-ita-250 { + font-size: $ibo-font-size-250; + font-family: "Monorale"; + font-weight: 400; + font-style: italic; +} +@mixin ibo-font-ral-ita-300 { + font-size: $ibo-font-size-300; + font-family: "Monorale"; + font-weight: 400; + font-style: italic; +} +@mixin ibo-font-ral-ita-350 { + font-size: $ibo-font-size-350; + font-family: "Monorale"; + font-weight: 400; + font-style: italic; +} +@mixin ibo-font-ral-ita-400 { + font-size: $ibo-font-size-400; + font-family: "Monorale"; + font-weight: 400; + font-style: italic; +} +@mixin ibo-font-ral-ita-450 { + font-size: $ibo-font-size-450; + font-family: "Monorale"; + font-weight: 400; + font-style: italic; +} +@mixin ibo-font-ral-ita-500 { + font-size: $ibo-font-size-500; + font-family: "Monorale"; + font-weight: 400; + font-style: italic; +} +@mixin ibo-font-ral-ita-550 { + font-size: $ibo-font-size-550; + font-family: "Monorale"; + font-weight: 400; + font-style: italic; +} \ No newline at end of file diff --git a/css/backoffice/utils/variables/_color.scss b/css/backoffice/utils/variables/_color.scss new file mode 100644 index 0000000000..fe0d95fd1a --- /dev/null +++ b/css/backoffice/utils/variables/_color.scss @@ -0,0 +1,103 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +/* Color styles */ +$ibo-color-white-100: hsla(0, 0%, 100%, 1) !default; +$ibo-color-white-200: hsla(0, 0%, 94.9%, 1) !default; +$ibo-color-transparent: hsla(0, 0%, 100%, 0) !default; + +$ibo-color-grey-50: hsla(240, 20%, 99%, 1) !default; +$ibo-color-grey-100: hsla(210, 16.7%, 97.6%, 1) !default; +$ibo-color-grey-200: hsla(207, 22.4%, 90.4%, 1) !default; +$ibo-color-grey-300: hsla(210, 23.5%, 86.7%, 1) !default; +$ibo-color-grey-400: hsla(208, 17.2%, 82.9%, 1) !default; +$ibo-color-grey-500: hsla(209, 23.7%, 74.3%, 1) !default; +$ibo-color-grey-600: hsla(215, 16.6%, 63.3%, 1) !default; +$ibo-color-grey-700: hsla(214, 11.3%, 48.6%, 1) !default; +$ibo-color-grey-800: hsla(215, 16.9%, 30.2%, 1) !default; +$ibo-color-grey-900: hsla(215, 22.4%, 16.7%, 1) !default; + +$ibo-color-red-100: hsla(0, 76.9%, 94.9%, 1) !default; +$ibo-color-red-200: hsla(0, 95.1%, 92%, 1) !default; +$ibo-color-red-300: hsla(0, 97.4%, 84.7%, 1) !default; +$ibo-color-red-400: hsla(0, 95.3%, 74.7%, 1) !default; +$ibo-color-red-500: hsla(0, 87.8%, 67.8%, 1) !default; +$ibo-color-red-600: hsla(0, 76.3%, 57.1%, 1) !default; +$ibo-color-red-700: hsla(0, 60.8%, 48%, 1) !default; +$ibo-color-red-800: hsla(0, 55.8%, 39%, 1) !default; +$ibo-color-red-900: hsla(0, 46.8%, 31%, 1) !default; + +$ibo-color-orange-100: hsla(40, 100%, 97.1%, 1) !default; +$ibo-color-orange-200: hsla(39, 96.4%, 89%, 1) !default; +$ibo-color-orange-300: hsla(38, 93.2%, 76.9%, 1) !default; +$ibo-color-orange-400: hsla(33, 89.9%, 64.9%, 1) !default; +$ibo-color-orange-500: hsla(28, 82.9%, 51.8%, 1) !default; +$ibo-color-orange-600: hsla(24, 74.7%, 49.6%, 1) !default; +$ibo-color-orange-700: hsla(20, 70.7%, 44.1%, 1) !default; +$ibo-color-orange-800: hsla(16, 65.1%, 37.1%, 1) !default; +$ibo-color-orange-900: hsla(14, 60.8%, 30%, 1) !default; + +$ibo-color-green-100: hsla(88, 50.7%, 85.7%, 1) !default; +$ibo-color-green-200: hsla(88, 50%, 76.5%, 1) !default; +$ibo-color-green-300: hsla(88, 50%, 67.1%, 1) !default; +$ibo-color-green-400: hsla(88, 50.2%, 59.8%, 1) !default; +$ibo-color-green-500: hsla(88, 50.2%, 52.7%, 1) !default; +$ibo-color-green-600: hsla(89, 46.1%, 48%, 1) !default; +$ibo-color-green-700: hsla(92, 47.9%, 42.2%, 1) !default; +$ibo-color-green-800: hsla(95, 49.5%, 36.5%, 1) !default; +$ibo-color-green-900: hsla(103, 55.6%, 26.5%, 1) !default; + +$ibo-color-primary-100: hsla(40, 100%, 97.1%, 1) !default; +$ibo-color-primary-200: hsla(39, 96.4%, 89%, 1) !default; +$ibo-color-primary-300: hsla(38, 93.2%, 76.9%, 1) !default; +$ibo-color-primary-400: hsla(33, 89.9%, 64.9%, 1) !default; +$ibo-color-primary-500: hsla(28, 82.9%, 51.8%, 1) !default; +$ibo-color-primary-600: hsla(24, 74.7%, 49.6%, 1) !default; +$ibo-color-primary-700: hsla(20, 70.7%, 44.1%, 1) !default; +$ibo-color-primary-800: hsla(16, 65.1%, 37.1%, 1) !default; +$ibo-color-primary-900: hsla(14, 60.8%, 30%, 1) !default; + +$ibo-color-blue-grey-100: hsla(198, 15.7%, 83.7%, 1) !default; +$ibo-color-blue-grey-200: hsla(200, 15.3%, 73.1%, 1) !default; +$ibo-color-blue-grey-300: hsla(200, 15.6%, 62.4%, 1) !default; +$ibo-color-blue-grey-400: hsla(200, 15.4%, 54.1%, 1) !default; +$ibo-color-blue-grey-500: hsla(200, 18.3%, 46.1%, 1) !default; +$ibo-color-blue-grey-600: hsla(199, 18.4%, 40.4%, 1) !default; +$ibo-color-blue-grey-700: hsla(199, 18.3%, 33.1%, 1) !default; +$ibo-color-blue-grey-800: hsla(200, 17.9%, 26.3%, 1) !default; +$ibo-color-blue-grey-900: hsla(200, 19.1%, 18.4%, 1) !default; + +$ibo-color-blue-100: hsla(201, 100%, 96.1%, 1) !default; +$ibo-color-blue-200: hsla(202, 80.6%, 85.9%, 1) !default; +$ibo-color-blue-300: hsla(203, 82%, 76.1%, 1) !default; +$ibo-color-blue-400: hsla(205, 79.3%, 65.9%, 1) !default; +$ibo-color-blue-500: hsla(207, 72.6%, 57.1%, 1) !default; +$ibo-color-blue-600: hsla(209, 61.6%, 50%, 1) !default; +$ibo-color-blue-700: hsla(211, 60.7%, 42.9%, 1) !default; +$ibo-color-blue-800: hsla(213, 49.4%, 34.1%, 1) !default; +$ibo-color-blue-900: hsla(215, 41.3%, 28%, 1) !default; + +$ibo-color-cyan-100: hsla(186, 61.2%, 86.9%, 1) !default; +$ibo-color-cyan-200: hsla(187, 71.6%, 71%, 1) !default; +$ibo-color-cyan-300: hsla(187, 71.2%, 59.2%, 1) !default; +$ibo-color-cyan-400: hsla(187, 70.9%, 50.2%, 1) !default; +$ibo-color-cyan-500: hsla(187, 100%, 41.6%, 1) !default; +$ibo-color-cyan-600: hsla(187, 100%, 37.8%, 1) !default; +$ibo-color-cyan-700: hsla(186, 100%, 32.7%, 1) !default; +$ibo-color-cyan-800: hsla(185, 100%, 28%, 1) !default; +$ibo-color-cyan-900: hsla(182, 100%, 19.6%, 1) !default; diff --git a/css/backoffice/utils/variables/_typography.scss b/css/backoffice/utils/variables/_typography.scss new file mode 100644 index 0000000000..9fd5d0fe33 --- /dev/null +++ b/css/backoffice/utils/variables/_typography.scss @@ -0,0 +1,30 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + +/* Base size: html font-size 12px */ +$ibo-font-size-50: 0.83rem !default; +$ibo-font-size-100: 1rem !default; +$ibo-font-size-150: 1.17rem !default; +$ibo-font-size-200: 1.33rem !default; +$ibo-font-size-250: 1.5rem !default; +$ibo-font-size-300: 1.67rem !default; +$ibo-font-size-350: 1.83rem !default; +$ibo-font-size-400: 2rem !default; +$ibo-font-size-450: 2.5rem !default; +$ibo-font-size-500: 3rem !default; +$ibo-font-size-550: 4rem !default; diff --git a/css/backoffice/vendors/_all.scss b/css/backoffice/vendors/_all.scss new file mode 100644 index 0000000000..5c69368737 --- /dev/null +++ b/css/backoffice/vendors/_all.scss @@ -0,0 +1,18 @@ +/*! + * Copyright (C) 2013-2020 Combodo SARL + * + * This file is part of iTop. + * + * iTop is free software; you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * iTop is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + */ + diff --git a/lib/.htaccess b/lib/.htaccess_ similarity index 100% rename from lib/.htaccess rename to lib/.htaccess_ diff --git a/lib/bulma-scss/LICENSE b/lib/bulma-scss/LICENSE new file mode 100644 index 0000000000..b60e6eb134 --- /dev/null +++ b/lib/bulma-scss/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2020 Jeremy Thomas +Copyright (c) 2020 Jim Campbell + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/lib/bulma-scss/README.md b/lib/bulma-scss/README.md new file mode 100644 index 0000000000..859e627ff8 --- /dev/null +++ b/lib/bulma-scss/README.md @@ -0,0 +1,35 @@ +# bulma-scss + +This is a port of the [Bulma](https://bulma.io/) project SASS files to the +SCSS syntax. + +Currently, these files are based on Bulma version 0.9.0, and will be updated +with later releases. The files are converted to SCSS with +[this script](https://gist.github.com/j1mc/ff1ff83e277b1e221761fc0c0ee3b164). + +## Installation + +Install with Yarn +``` +yarn add bulma-scss +``` + +Install with npm +``` +npm install bulma-scss +``` + +## Contributions + +You can contribute to the [Bulma source code](https://github.com/jgthms/bulma). + +## Support + +If you are having issues with this repository, please let us know. + +We use this project's [Github issue tracker](https://github.com/j1mc/bulma-scss/issues). + +## License + +The project is licensed under the MIT license. + diff --git a/lib/bulma-scss/base/_all.scss b/lib/bulma-scss/base/_all.scss new file mode 100644 index 0000000000..6b8ca73fb3 --- /dev/null +++ b/lib/bulma-scss/base/_all.scss @@ -0,0 +1,2 @@ +@import "minireset"; +@import "generic"; diff --git a/lib/bulma-scss/base/_generic.scss b/lib/bulma-scss/base/_generic.scss new file mode 100644 index 0000000000..a48619d9fc --- /dev/null +++ b/lib/bulma-scss/base/_generic.scss @@ -0,0 +1,170 @@ +$body-background-color: $scheme-main !default; +$body-size: 16px !default; +$body-min-width: 300px !default; +$body-rendering: optimizeLegibility !default; +$body-family: $family-primary !default; +$body-overflow-x: hidden !default; +$body-overflow-y: scroll !default; + +$body-color: $text !default; +$body-font-size: 1em !default; +$body-weight: $weight-normal !default; +$body-line-height: 1.5 !default; + +$code-family: $family-code !default; +$code-padding: 0.25em 0.5em 0.25em !default; +$code-weight: normal !default; +$code-size: 0.875em !default; + +$small-font-size: 0.875em !default; + +$hr-background-color: $background !default; +$hr-height: 2px !default; +$hr-margin: 1.5rem 0 !default; + +$strong-color: $text-strong !default; +$strong-weight: $weight-bold !default; + +$pre-font-size: 0.875em !default; +$pre-padding: 1.25rem 1.5rem !default; +$pre-code-font-size: 1em !default; + +html { + background-color: $body-background-color; + font-size: $body-size; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + min-width: $body-min-width; + overflow-x: $body-overflow-x; + overflow-y: $body-overflow-y; + text-rendering: $body-rendering; + text-size-adjust: 100%; +} + +article, +aside, +figure, +footer, +header, +hgroup, +section { + display: block; +} + +body, +button, +input, +select, +textarea { + font-family: $body-family; +} + +code, +pre { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: auto; + font-family: $code-family; +} + +body { + color: $body-color; + font-size: $body-font-size; + font-weight: $body-weight; + line-height: $body-line-height; +} + +// Inline + +a { + color: $link; + cursor: pointer; + text-decoration: none; + + strong { + color: currentColor; + } + + &:hover { + color: $link-hover; + } +} + +code { + background-color: $code-background; + color: $code; + font-size: $code-size; + font-weight: $code-weight; + padding: $code-padding; +} + +hr { + background-color: $hr-background-color; + border: none; + display: block; + height: $hr-height; + margin: $hr-margin; +} + +img { + height: auto; + max-width: 100%; +} + +input[type="checkbox"], +input[type="radio"] { + vertical-align: baseline; +} + +small { + font-size: $small-font-size; +} + +span { + font-style: inherit; + font-weight: inherit; +} + +strong { + color: $strong-color; + font-weight: $strong-weight; +} + +// Block + +fieldset { + border: none; +} + +pre { + @include overflow-touch; + + background-color: $pre-background; + color: $pre; + font-size: $pre-font-size; + overflow-x: auto; + padding: $pre-padding; + white-space: pre; + word-wrap: normal; + + code { + background-color: transparent; + color: currentColor; + font-size: $pre-code-font-size; + padding: 0; + } +} + +table { + td, + th { + vertical-align: top; + + &:not([align]) { + text-align: inherit; + } + } + + th { + color: $text-strong; + } +} diff --git a/lib/bulma-scss/base/_helpers.scss b/lib/bulma-scss/base/_helpers.scss new file mode 100644 index 0000000000..d4cdf400cd --- /dev/null +++ b/lib/bulma-scss/base/_helpers.scss @@ -0,0 +1 @@ +@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."; diff --git a/lib/bulma-scss/base/_minireset.scss b/lib/bulma-scss/base/_minireset.scss new file mode 100644 index 0000000000..5b09693826 --- /dev/null +++ b/lib/bulma-scss/base/_minireset.scss @@ -0,0 +1,92 @@ +/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ +// Blocks +html, +body, +p, +ol, +ul, +li, +dl, +dt, +dd, +blockquote, +figure, +fieldset, +legend, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0; + padding: 0; +} + +// Headings +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: 100%; + font-weight: normal; +} + +// List +ul { + list-style: none; +} + +// Form +button, +input, +select, +textarea { + margin: 0; +} + +// Box sizing +html { + box-sizing: border-box; +} + +* { + &, + &::before, + &::after { + box-sizing: inherit; + } +} + +// Media +img, +video { + height: auto; + max-width: 100%; +} + +// Iframe +iframe { + border: 0; +} + +// Table +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; + + &:not([align]) { + text-align: inherit; + } +} diff --git a/lib/bulma-scss/bulma.scss b/lib/bulma-scss/bulma.scss new file mode 100644 index 0000000000..14ae29a447 --- /dev/null +++ b/lib/bulma-scss/bulma.scss @@ -0,0 +1,9 @@ +/*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */ +@import "utilities/_all"; +@import "base/_all"; +@import "elements/_all"; +@import "form/_all"; +@import "components/_all"; +@import "grid/_all"; +@import "helpers/_all"; +@import "layout/_all"; diff --git a/lib/bulma-scss/components/_all.scss b/lib/bulma-scss/components/_all.scss new file mode 100644 index 0000000000..049cd91b87 --- /dev/null +++ b/lib/bulma-scss/components/_all.scss @@ -0,0 +1,12 @@ +@import "breadcrumb"; +@import "card"; +@import "dropdown"; +@import "level"; +@import "media"; +@import "menu"; +@import "message"; +@import "modal"; +@import "navbar"; +@import "pagination"; +@import "panel"; +@import "tabs"; diff --git a/lib/bulma-scss/components/_breadcrumb.scss b/lib/bulma-scss/components/_breadcrumb.scss new file mode 100644 index 0000000000..3435f0ca38 --- /dev/null +++ b/lib/bulma-scss/components/_breadcrumb.scss @@ -0,0 +1,122 @@ +$breadcrumb-item-color: $link !default; +$breadcrumb-item-hover-color: $link-hover !default; +$breadcrumb-item-active-color: $text-strong !default; + +$breadcrumb-item-padding-vertical: 0 !default; +$breadcrumb-item-padding-horizontal: 0.75em !default; + +$breadcrumb-item-separator-color: $border-hover !default; + +.breadcrumb { + @extend %block; + + @extend %unselectable; + + font-size: $size-normal; + white-space: nowrap; + + a { + align-items: center; + color: $breadcrumb-item-color; + display: flex; + justify-content: center; + padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal; + + &:hover { + color: $breadcrumb-item-hover-color; + } + } + + li { + align-items: center; + display: flex; + + &:first-child a { + @include ltr-property("padding", 0, false); + } + + &.is-active { + a { + color: $breadcrumb-item-active-color; + cursor: default; + pointer-events: none; + } + } + + & + li::before { + color: $breadcrumb-item-separator-color; + content: "/"; + } + } + + ul, + ol { + align-items: flex-start; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + } + + .icon { + &:first-child { + @include ltr-property("margin", 0.5em); + } + + &:last-child { + @include ltr-property("margin", 0.5em, false); + } + } + + // Alignment + &.is-centered { + ol, + ul { + justify-content: center; + } + } + + &.is-right { + ol, + ul { + justify-content: flex-end; + } + } + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } + + // Styles + &.has-arrow-separator { + li + li::before { + content: "→"; + } + } + + &.has-bullet-separator { + li + li::before { + content: "•"; + } + } + + &.has-dot-separator { + li + li::before { + content: "·"; + } + } + + &.has-succeeds-separator { + li + li::before { + content: "≻"; + } + } +} diff --git a/lib/bulma-scss/components/_card.scss b/lib/bulma-scss/components/_card.scss new file mode 100644 index 0000000000..bd68232123 --- /dev/null +++ b/lib/bulma-scss/components/_card.scss @@ -0,0 +1,93 @@ +$card-color: $text !default; +$card-background-color: $scheme-main !default; +$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default; + +$card-header-background-color: transparent !default; +$card-header-color: $text-strong !default; +$card-header-padding: 0.75rem 1rem !default; +$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default; +$card-header-weight: $weight-bold !default; + +$card-content-background-color: transparent !default; +$card-content-padding: 1.5rem !default; + +$card-footer-background-color: transparent !default; +$card-footer-border-top: 1px solid $border-light !default; +$card-footer-padding: 0.75rem !default; + +$card-media-margin: $block-spacing !default; + +.card { + background-color: $card-background-color; + box-shadow: $card-shadow; + color: $card-color; + max-width: 100%; + position: relative; +} + +.card-header { + background-color: $card-header-background-color; + align-items: stretch; + box-shadow: $card-header-shadow; + display: flex; +} + +.card-header-title { + align-items: center; + color: $card-header-color; + display: flex; + flex-grow: 1; + font-weight: $card-header-weight; + padding: $card-header-padding; + + &.is-centered { + justify-content: center; + } +} + +.card-header-icon { + align-items: center; + cursor: pointer; + display: flex; + justify-content: center; + padding: $card-header-padding; +} + +.card-image { + display: block; + position: relative; +} + +.card-content { + background-color: $card-content-background-color; + padding: $card-content-padding; +} + +.card-footer { + background-color: $card-footer-background-color; + border-top: $card-footer-border-top; + align-items: stretch; + display: flex; +} + +.card-footer-item { + align-items: center; + display: flex; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + justify-content: center; + padding: $card-footer-padding; + + &:not(:last-child) { + @include ltr-property("border", $card-footer-border-top); + } +} + +// Combinations + +.card { + .media:not(:last-child) { + margin-bottom: $card-media-margin; + } +} diff --git a/lib/bulma-scss/components/_dropdown.scss b/lib/bulma-scss/components/_dropdown.scss new file mode 100644 index 0000000000..c58d78e1b7 --- /dev/null +++ b/lib/bulma-scss/components/_dropdown.scss @@ -0,0 +1,103 @@ +$dropdown-menu-min-width: 12rem !default; + +$dropdown-content-background-color: $scheme-main !default; +$dropdown-content-arrow: $link !default; +$dropdown-content-offset: 4px !default; +$dropdown-content-padding-bottom: 0.5rem !default; +$dropdown-content-padding-top: 0.5rem !default; +$dropdown-content-radius: $radius !default; +$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default; +$dropdown-content-z: 20 !default; + +$dropdown-item-color: $text !default; +$dropdown-item-hover-color: $scheme-invert !default; +$dropdown-item-hover-background-color: $background !default; +$dropdown-item-active-color: $link-invert !default; +$dropdown-item-active-background-color: $link !default; + +$dropdown-divider-background-color: $border-light !default; + +.dropdown { + display: inline-flex; + position: relative; + vertical-align: top; + + &.is-active, + &.is-hoverable:hover { + .dropdown-menu { + display: block; + } + } + + &.is-right { + .dropdown-menu { + left: auto; + right: 0; + } + } + + &.is-up { + .dropdown-menu { + bottom: 100%; + padding-bottom: $dropdown-content-offset; + padding-top: initial; + top: auto; + } + } +} + +.dropdown-menu { + display: none; + + @include ltr-position(0, false); + + min-width: $dropdown-menu-min-width; + padding-top: $dropdown-content-offset; + position: absolute; + top: 100%; + z-index: $dropdown-content-z; +} + +.dropdown-content { + background-color: $dropdown-content-background-color; + border-radius: $dropdown-content-radius; + box-shadow: $dropdown-content-shadow; + padding-bottom: $dropdown-content-padding-bottom; + padding-top: $dropdown-content-padding-top; +} + +.dropdown-item { + color: $dropdown-item-color; + display: block; + font-size: 0.875rem; + line-height: 1.5; + padding: 0.375rem 1rem; + position: relative; +} + +a.dropdown-item, +button.dropdown-item { + @include ltr-property("padding", 3rem); + + text-align: inherit; + white-space: nowrap; + width: 100%; + + &:hover { + background-color: $dropdown-item-hover-background-color; + color: $dropdown-item-hover-color; + } + + &.is-active { + background-color: $dropdown-item-active-background-color; + color: $dropdown-item-active-color; + } +} + +.dropdown-divider { + background-color: $dropdown-divider-background-color; + border: none; + display: block; + height: 1px; + margin: 0.5rem 0; +} diff --git a/lib/bulma-scss/components/_level.scss b/lib/bulma-scss/components/_level.scss new file mode 100644 index 0000000000..6a822f12fd --- /dev/null +++ b/lib/bulma-scss/components/_level.scss @@ -0,0 +1,123 @@ +$level-item-spacing: $block-spacing / 2 !default; + +.level { + @extend %block; + + align-items: center; + justify-content: space-between; + + code { + border-radius: $radius; + } + + img { + display: inline-block; + vertical-align: top; + } + + // Modifiers + &.is-mobile { + display: flex; + + .level-left, + .level-right { + display: flex; + } + + .level-left + .level-right { + margin-top: 0; + } + + .level-item { + &:not(:last-child) { + margin-bottom: 0; + + @include ltr-property("margin", $level-item-spacing); + } + + &:not(.is-narrow) { + flex-grow: 1; + } + } + } + + // Responsiveness + @include tablet { + display: flex; + + & > .level-item { + &:not(.is-narrow) { + flex-grow: 1; + } + } + } +} + +.level-item { + align-items: center; + display: flex; + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; + + .title, + .subtitle { + margin-bottom: 0; + } + + // Responsiveness + @include mobile { + &:not(:last-child) { + margin-bottom: $level-item-spacing; + } + } +} + +.level-left, +.level-right { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + + .level-item { + // Modifiers + &.is-flexible { + flex-grow: 1; + } + + // Responsiveness + @include tablet { + &:not(:last-child) { + @include ltr-property("margin", $level-item-spacing); + } + } + } +} + +.level-left { + align-items: center; + justify-content: flex-start; + + // Responsiveness + @include mobile { + & + .level-right { + margin-top: 1.5rem; + } + } + + + @include tablet { + display: flex; + } +} + +.level-right { + align-items: center; + justify-content: flex-end; + + // Responsiveness + @include tablet { + display: flex; + } +} diff --git a/lib/bulma-scss/components/_list.scss b/lib/bulma-scss/components/_list.scss new file mode 100644 index 0000000000..9db29fc496 --- /dev/null +++ b/lib/bulma-scss/components/_list.scss @@ -0,0 +1,54 @@ +$list-background-color: $scheme-main !default; +$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default; +$list-radius: $radius !default; + +$list-item-border: 1px solid $border !default; +$list-item-color: $text !default; +$list-item-active-background-color: $link !default; +$list-item-active-color: $link-invert !default; +$list-item-hover-background-color: $background !default; + +.list { + @extend %block; + + background-color: $list-background-color; + border-radius: $list-radius; + box-shadow: $list-shadow; + + // &.is-hoverable > .list-item:hover:not(.is-active) + // background-color: $list-item-hover-background-color + // cursor: pointer +} + +.list-item { + display: block; + padding: 0.5em 1em; + + &:not(a) { + color: $list-item-color; + } + + &:first-child { + border-top-left-radius: $list-radius; + border-top-right-radius: $list-radius; + } + + &:last-child { + border-bottom-left-radius: $list-radius; + border-bottom-right-radius: $list-radius; + } + + &:not(:last-child) { + border-bottom: $list-item-border; + } + + &.is-active { + background-color: $list-item-active-background-color; + color: $list-item-active-color; + } +} + +a.list-item { + background-color: $list-item-hover-background-color; + cursor: pointer; +} diff --git a/lib/bulma-scss/components/_media.scss b/lib/bulma-scss/components/_media.scss new file mode 100644 index 0000000000..0b9dfe86fd --- /dev/null +++ b/lib/bulma-scss/components/_media.scss @@ -0,0 +1,74 @@ +$media-border-color: bulmaRgba($border, 0.5) !default; +$media-spacing: 1rem; +$media-spacing-large: 1.5rem; + +.media { + align-items: flex-start; + display: flex; + text-align: inherit; + + .content:not(:last-child) { + margin-bottom: 0.75rem; + } + + .media { + border-top: 1px solid $media-border-color; + display: flex; + padding-top: 0.75rem; + + .content:not(:last-child), + .control:not(:last-child) { + margin-bottom: 0.5rem; + } + + .media { + padding-top: 0.5rem; + + & + .media { + margin-top: 0.5rem; + } + } + } + + & + .media { + border-top: 1px solid $media-border-color; + margin-top: $media-spacing; + padding-top: $media-spacing; + } + + // Sizes + &.is-large { + & + .media { + margin-top: $media-spacing-large; + padding-top: $media-spacing-large; + } + } +} + +.media-left, +.media-right { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; +} + +.media-left { + @include ltr-property("margin", $media-spacing); +} + +.media-right { + @include ltr-property("margin", $media-spacing, false); +} + +.media-content { + flex-basis: auto; + flex-grow: 1; + flex-shrink: 1; + text-align: inherit; +} + +@include mobile { + .media-content { + overflow-x: auto; + } +} diff --git a/lib/bulma-scss/components/_menu.scss b/lib/bulma-scss/components/_menu.scss new file mode 100644 index 0000000000..8e0a186f2e --- /dev/null +++ b/lib/bulma-scss/components/_menu.scss @@ -0,0 +1,81 @@ +$menu-item-color: $text !default; +$menu-item-radius: $radius-small !default; +$menu-item-hover-color: $text-strong !default; +$menu-item-hover-background-color: $background !default; +$menu-item-active-color: $link-invert !default; +$menu-item-active-background-color: $link !default; + +$menu-list-border-left: 1px solid $border !default; +$menu-list-line-height: 1.25 !default; +$menu-list-link-padding: 0.5em 0.75em !default; +$menu-nested-list-margin: 0.75em !default; +$menu-nested-list-padding-left: 0.75em !default; + +$menu-label-color: $text-light !default; +$menu-label-font-size: 0.75em !default; +$menu-label-letter-spacing: 0.1em !default; +$menu-label-spacing: 1em !default; + +.menu { + font-size: $size-normal; + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } +} + +.menu-list { + line-height: $menu-list-line-height; + + a { + border-radius: $menu-item-radius; + color: $menu-item-color; + display: block; + padding: $menu-list-link-padding; + + &:hover { + background-color: $menu-item-hover-background-color; + color: $menu-item-hover-color; + } + + // Modifiers + &.is-active { + background-color: $menu-item-active-background-color; + color: $menu-item-active-color; + } + } + + li { + ul { + @include ltr-property("border", $menu-list-border-left, false); + + margin: $menu-nested-list-margin; + + @include ltr-property("padding", $menu-nested-list-padding-left, false); + } + } +} + +.menu-label { + color: $menu-label-color; + font-size: $menu-label-font-size; + letter-spacing: $menu-label-letter-spacing; + text-transform: uppercase; + + &:not(:first-child) { + margin-top: $menu-label-spacing; + } + + &:not(:last-child) { + margin-bottom: $menu-label-spacing; + } +} diff --git a/lib/bulma-scss/components/_message.scss b/lib/bulma-scss/components/_message.scss new file mode 100644 index 0000000000..36dfc0da4c --- /dev/null +++ b/lib/bulma-scss/components/_message.scss @@ -0,0 +1,134 @@ +$message-background-color: $background !default; +$message-radius: $radius !default; + +$message-header-background-color: $text !default; +$message-header-color: $text-invert !default; +$message-header-weight: $weight-bold !default; +$message-header-padding: 0.75em 1em !default; +$message-header-radius: $radius !default; + +$message-body-border-color: $border !default; +$message-body-border-width: 0 0 0 4px !default; +$message-body-color: $text !default; +$message-body-padding: 1.25em 1.5em !default; +$message-body-radius: $radius !default; + +$message-body-pre-background-color: $scheme-main !default; +$message-body-pre-code-background-color: transparent !default; + +$message-header-body-border-width: 0 !default; +$message-colors: $colors !default; + +.message { + @extend %block; + + background-color: $message-background-color; + border-radius: $message-radius; + font-size: $size-normal; + + strong { + color: currentColor; + } + + a:not(.button):not(.tag):not(.dropdown-item) { + color: currentColor; + text-decoration: underline; + } + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } + + // Colors + @each $name, $components in $message-colors { + $color: nth($components, 1); + $color-invert: nth($components, 2); + $color-light: null; + $color-dark: null; + + @if length($components) >= 3 { + $color-light: nth($components, 3); + + @if length($components) >= 4 { + $color-dark: nth($components, 4); + } + @else { + $color-luminance: colorLuminance($color); + $darken-percentage: $color-luminance * 70%; + $desaturate-percentage: $color-luminance * 30%; + $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage); + } + } + @else { + $color-lightning: max(100% - lightness($color) - 2%, 0%); + $color-light: lighten($color, $color-lightning); + } + + &.is-#{$name} { + background-color: $color-light; + + .message-header { + background-color: $color; + color: $color-invert; + } + + .message-body { + border-color: $color; + color: $color-dark; + } + } + } +} + +.message-header { + align-items: center; + background-color: $message-header-background-color; + border-radius: $message-header-radius $message-header-radius 0 0; + color: $message-header-color; + display: flex; + font-weight: $message-header-weight; + justify-content: space-between; + line-height: 1.25; + padding: $message-header-padding; + position: relative; + + .delete { + flex-grow: 0; + flex-shrink: 0; + + @include ltr-property("margin", 0.75em, false); + } + + & + .message-body { + border-width: $message-header-body-border-width; + border-top-left-radius: 0; + border-top-right-radius: 0; + } +} + +.message-body { + border-color: $message-body-border-color; + border-radius: $message-body-radius; + border-style: solid; + border-width: $message-body-border-width; + color: $message-body-color; + padding: $message-body-padding; + + code, + pre { + background-color: $message-body-pre-background-color; + } + + pre code { + background-color: $message-body-pre-code-background-color; + } +} diff --git a/lib/bulma-scss/components/_modal.scss b/lib/bulma-scss/components/_modal.scss new file mode 100644 index 0000000000..1e6a00694d --- /dev/null +++ b/lib/bulma-scss/components/_modal.scss @@ -0,0 +1,136 @@ +$modal-z: 40 !default; + +$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default; + +$modal-content-width: 640px !default; +$modal-content-margin-mobile: 20px !default; +$modal-content-spacing-mobile: 160px !default; +$modal-content-spacing-tablet: 40px !default; + +$modal-close-dimensions: 40px !default; +$modal-close-right: 20px !default; +$modal-close-top: 20px !default; + +$modal-card-spacing: 40px !default; + +$modal-card-head-background-color: $background !default; +$modal-card-head-border-bottom: 1px solid $border !default; +$modal-card-head-padding: 20px !default; +$modal-card-head-radius: $radius-large !default; + +$modal-card-title-color: $text-strong !default; +$modal-card-title-line-height: 1 !default; +$modal-card-title-size: $size-4 !default; + +$modal-card-foot-radius: $radius-large !default; +$modal-card-foot-border-top: 1px solid $border !default; + +$modal-card-body-background-color: $scheme-main !default; +$modal-card-body-padding: 20px !default; + +.modal { + @extend %overlay; + + align-items: center; + display: none; + flex-direction: column; + justify-content: center; + overflow: hidden; + position: fixed; + z-index: $modal-z; + + // Modifiers + &.is-active { + display: flex; + } +} + +.modal-background { + @extend %overlay; + + background-color: $modal-background-background-color; +} + +.modal-content, +.modal-card { + margin: 0 $modal-content-margin-mobile; + max-height: calc(100vh - #{$modal-content-spacing-mobile}); + overflow: auto; + position: relative; + width: 100%; + + // Responsiveness + @include tablet { + margin: 0 auto; + max-height: calc(100vh - #{$modal-content-spacing-tablet}); + width: $modal-content-width; + } +} + +.modal-close { + @extend %delete; + + background: none; + height: $modal-close-dimensions; + position: fixed; + + @include ltr-position($modal-close-right); + + top: $modal-close-top; + width: $modal-close-dimensions; +} + +.modal-card { + display: flex; + flex-direction: column; + max-height: calc(100vh - #{$modal-card-spacing}); + overflow: hidden; + -ms-overflow-y: visible; +} + +.modal-card-head, +.modal-card-foot { + align-items: center; + background-color: $modal-card-head-background-color; + display: flex; + flex-shrink: 0; + justify-content: flex-start; + padding: $modal-card-head-padding; + position: relative; +} + +.modal-card-head { + border-bottom: $modal-card-head-border-bottom; + border-top-left-radius: $modal-card-head-radius; + border-top-right-radius: $modal-card-head-radius; +} + +.modal-card-title { + color: $modal-card-title-color; + flex-grow: 1; + flex-shrink: 0; + font-size: $modal-card-title-size; + line-height: $modal-card-title-line-height; +} + +.modal-card-foot { + border-bottom-left-radius: $modal-card-foot-radius; + border-bottom-right-radius: $modal-card-foot-radius; + border-top: $modal-card-foot-border-top; + + .button { + &:not(:last-child) { + @include ltr-property("margin", 0.5em); + } + } +} + +.modal-card-body { + @include overflow-touch; + + background-color: $modal-card-body-background-color; + flex-grow: 1; + flex-shrink: 1; + overflow: auto; + padding: $modal-card-body-padding; +} diff --git a/lib/bulma-scss/components/_navbar.scss b/lib/bulma-scss/components/_navbar.scss new file mode 100644 index 0000000000..8805a5cd13 --- /dev/null +++ b/lib/bulma-scss/components/_navbar.scss @@ -0,0 +1,662 @@ +$navbar-background-color: $scheme-main !default; +$navbar-box-shadow-size: 0 2px 0 0 !default; +$navbar-box-shadow-color: $background !default; +$navbar-height: 3.25rem !default; +$navbar-padding-vertical: 1rem !default; +$navbar-padding-horizontal: 2rem !default; +$navbar-z: 30 !default; +$navbar-fixed-z: 30 !default; + +$navbar-item-color: $text !default; +$navbar-item-hover-color: $link !default; +$navbar-item-hover-background-color: $scheme-main-bis !default; +$navbar-item-active-color: $scheme-invert !default; +$navbar-item-active-background-color: transparent !default; +$navbar-item-img-max-height: 1.75rem !default; + +$navbar-burger-color: $navbar-item-color !default; + +$navbar-tab-hover-background-color: transparent !default; +$navbar-tab-hover-border-bottom-color: $link !default; +$navbar-tab-active-color: $link !default; +$navbar-tab-active-background-color: transparent !default; +$navbar-tab-active-border-bottom-color: $link !default; +$navbar-tab-active-border-bottom-style: solid !default; +$navbar-tab-active-border-bottom-width: 3px !default; + +$navbar-dropdown-background-color: $scheme-main !default; +$navbar-dropdown-border-top: 2px solid $border !default; +$navbar-dropdown-offset: -4px !default; +$navbar-dropdown-arrow: $link !default; +$navbar-dropdown-radius: $radius-large !default; +$navbar-dropdown-z: 20 !default; + +$navbar-dropdown-boxed-radius: $radius-large !default; +$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default; + +$navbar-dropdown-item-hover-color: $scheme-invert !default; +$navbar-dropdown-item-hover-background-color: $background !default; +$navbar-dropdown-item-active-color: $link !default; +$navbar-dropdown-item-active-background-color: $background !default; + +$navbar-divider-background-color: $background !default; +$navbar-divider-height: 2px !default; + +$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default; + +$navbar-breakpoint: $desktop !default; + +@mixin navbar-fixed { + left: 0; + position: fixed; + right: 0; + z-index: $navbar-fixed-z; +} + +.navbar { + background-color: $navbar-background-color; + min-height: $navbar-height; + position: relative; + z-index: $navbar-z; + + @each $name, $pair in $colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + background-color: $color; + color: $color-invert; + + .navbar-brand { + & > .navbar-item, + .navbar-link { + color: $color-invert; + } + + & > a.navbar-item, + .navbar-link { + &:focus, + &:hover, + &.is-active { + background-color: bulmaDarken($color, 5%); + color: $color-invert; + } + } + + .navbar-link { + &::after { + border-color: $color-invert; + } + } + } + + .navbar-burger { + color: $color-invert; + } + + @include from($navbar-breakpoint) { + .navbar-start, + .navbar-end { + & > .navbar-item, + .navbar-link { + color: $color-invert; + } + + & > a.navbar-item, + .navbar-link { + &:focus, + &:hover, + &.is-active { + background-color: bulmaDarken($color, 5%); + color: $color-invert; + } + } + + .navbar-link { + &::after { + border-color: $color-invert; + } + } + } + + .navbar-item.has-dropdown:focus .navbar-link, + .navbar-item.has-dropdown:hover .navbar-link, + .navbar-item.has-dropdown.is-active .navbar-link { + background-color: bulmaDarken($color, 5%); + color: $color-invert; + } + + .navbar-dropdown { + a.navbar-item { + &.is-active { + background-color: $color; + color: $color-invert; + } + } + } + } + } + } + + & > .container { + align-items: stretch; + display: flex; + min-height: $navbar-height; + width: 100%; + } + + &.has-shadow { + box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color; + } + + &.is-fixed-bottom, + &.is-fixed-top { + @include navbar-fixed; + } + + &.is-fixed-bottom { + bottom: 0; + + &.has-shadow { + box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color; + } + } + + &.is-fixed-top { + top: 0; + } +} + +html, +body { + &.has-navbar-fixed-top { + padding-top: $navbar-height; + } + + &.has-navbar-fixed-bottom { + padding-bottom: $navbar-height; + } +} + +.navbar-brand, +.navbar-tabs { + align-items: stretch; + display: flex; + flex-shrink: 0; + min-height: $navbar-height; +} + +.navbar-brand { + a.navbar-item { + &:focus, + &:hover { + background-color: transparent; + } + } +} + +.navbar-tabs { + @include overflow-touch; + + max-width: 100vw; + overflow-x: auto; + overflow-y: hidden; +} + +.navbar-burger { + color: $navbar-burger-color; + + @include hamburger($navbar-height); + @include ltr-property("margin", auto, false); +} + +.navbar-menu { + display: none; +} + +.navbar-item, +.navbar-link { + color: $navbar-item-color; + display: block; + line-height: 1.5; + padding: 0.5rem 0.75rem; + position: relative; + + .icon { + &:only-child { + margin-left: -0.25rem; + margin-right: -0.25rem; + } + } +} + +a.navbar-item, +.navbar-link { + cursor: pointer; + + &:focus, + &:focus-within, + &:hover, + &.is-active { + background-color: $navbar-item-hover-background-color; + color: $navbar-item-hover-color; + } +} + +.navbar-item { + flex-grow: 0; + flex-shrink: 0; + + img { + max-height: $navbar-item-img-max-height; + } + + &.has-dropdown { + padding: 0; + } + + &.is-expanded { + flex-grow: 1; + flex-shrink: 1; + } + + &.is-tab { + border-bottom: 1px solid transparent; + min-height: $navbar-height; + padding-bottom: calc(0.5rem - 1px); + + &:focus, + &:hover { + background-color: $navbar-tab-hover-background-color; + border-bottom-color: $navbar-tab-hover-border-bottom-color; + } + + &.is-active { + background-color: $navbar-tab-active-background-color; + border-bottom-color: $navbar-tab-active-border-bottom-color; + border-bottom-style: $navbar-tab-active-border-bottom-style; + border-bottom-width: $navbar-tab-active-border-bottom-width; + color: $navbar-tab-active-color; + padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width}); + } + } +} + +.navbar-content { + flex-grow: 1; + flex-shrink: 1; +} + +.navbar-link:not(.is-arrowless) { + @include ltr-property("padding", 2.5em); + + &::after { + @extend %arrow; + + border-color: $navbar-dropdown-arrow; + margin-top: -0.375em; + + @include ltr-position(1.125em); + } +} + +.navbar-dropdown { + font-size: 0.875rem; + padding-bottom: 0.5rem; + padding-top: 0.5rem; + + .navbar-item { + padding-left: 1.5rem; + padding-right: 1.5rem; + } +} + +.navbar-divider { + background-color: $navbar-divider-background-color; + border: none; + display: none; + height: $navbar-divider-height; + margin: 0.5rem 0; +} + +@include until($navbar-breakpoint) { + .navbar > .container { + display: block; + } + + .navbar-brand, + .navbar-tabs { + .navbar-item { + align-items: center; + display: flex; + } + } + + .navbar-link { + &::after { + display: none; + } + } + + .navbar-menu { + background-color: $navbar-background-color; + box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1); + padding: 0.5rem 0; + + &.is-active { + display: block; + } + } + + // Fixed navbar + .navbar { + &.is-fixed-bottom-touch, + &.is-fixed-top-touch { + @include navbar-fixed; + } + + &.is-fixed-bottom-touch { + bottom: 0; + + &.has-shadow { + box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1); + } + } + + &.is-fixed-top-touch { + top: 0; + } + + &.is-fixed-top, + &.is-fixed-top-touch { + .navbar-menu { + @include overflow-touch; + + max-height: calc(100vh - #{$navbar-height}); + overflow: auto; + } + } + } + + html, + body { + &.has-navbar-fixed-top-touch { + padding-top: $navbar-height; + } + + &.has-navbar-fixed-bottom-touch { + padding-bottom: $navbar-height; + } + } +} + + +@include from($navbar-breakpoint) { + .navbar, + .navbar-menu, + .navbar-start, + .navbar-end { + align-items: stretch; + display: flex; + } + + .navbar { + min-height: $navbar-height; + + &.is-spaced { + padding: $navbar-padding-vertical $navbar-padding-horizontal; + + .navbar-start, + .navbar-end { + align-items: center; + } + + a.navbar-item, + .navbar-link { + border-radius: $radius; + } + } + + &.is-transparent { + a.navbar-item, + .navbar-link { + &:focus, + &:hover, + &.is-active { + background-color: transparent !important; + } + } + + .navbar-item.has-dropdown { + &.is-active, + &.is-hoverable:focus, + &.is-hoverable:focus-within, + &.is-hoverable:hover { + .navbar-link { + background-color: transparent !important; + } + } + } + + .navbar-dropdown { + a.navbar-item { + &:focus, + &:hover { + background-color: $navbar-dropdown-item-hover-background-color; + color: $navbar-dropdown-item-hover-color; + } + + &.is-active { + background-color: $navbar-dropdown-item-active-background-color; + color: $navbar-dropdown-item-active-color; + } + } + } + } + } + + .navbar-burger { + display: none; + } + + .navbar-item, + .navbar-link { + align-items: center; + display: flex; + } + + .navbar-item { + &.has-dropdown { + align-items: stretch; + } + + &.has-dropdown-up { + .navbar-link::after { + transform: rotate(135deg) translate(0.25em, -0.25em); + } + + .navbar-dropdown { + border-bottom: $navbar-dropdown-border-top; + border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0; + border-top: none; + bottom: 100%; + box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1); + top: auto; + } + } + + &.is-active, + &.is-hoverable:focus, + &.is-hoverable:focus-within, + &.is-hoverable:hover { + .navbar-dropdown { + display: block; + + .navbar.is-spaced &, + &.is-boxed { + opacity: 1; + pointer-events: auto; + transform: translateY(0); + } + } + } + } + + .navbar-menu { + flex-grow: 1; + flex-shrink: 0; + } + + .navbar-start { + justify-content: flex-start; + + @include ltr-property("margin", auto); + } + + .navbar-end { + justify-content: flex-end; + + @include ltr-property("margin", auto, false); + } + + .navbar-dropdown { + background-color: $navbar-dropdown-background-color; + border-bottom-left-radius: $navbar-dropdown-radius; + border-bottom-right-radius: $navbar-dropdown-radius; + border-top: $navbar-dropdown-border-top; + box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1); + display: none; + font-size: 0.875rem; + + @include ltr-position(0, false); + + min-width: 100%; + position: absolute; + top: 100%; + z-index: $navbar-dropdown-z; + + .navbar-item { + padding: 0.375rem 1rem; + white-space: nowrap; + } + + a.navbar-item { + @include ltr-property("padding", 3rem); + + &:focus, + &:hover { + background-color: $navbar-dropdown-item-hover-background-color; + color: $navbar-dropdown-item-hover-color; + } + + &.is-active { + background-color: $navbar-dropdown-item-active-background-color; + color: $navbar-dropdown-item-active-color; + } + } + + .navbar.is-spaced &, + &.is-boxed { + border-radius: $navbar-dropdown-boxed-radius; + border-top: none; + box-shadow: $navbar-dropdown-boxed-shadow; + display: block; + opacity: 0; + pointer-events: none; + top: calc(100% + (#{$navbar-dropdown-offset})); + transform: translateY(-5px); + transition-duration: $speed; + transition-property: opacity, transform; + } + + &.is-right { + left: auto; + right: 0; + } + } + + .navbar-divider { + display: block; + } + + .navbar > .container, + .container > .navbar { + .navbar-brand { + @include ltr-property("margin", -0.75rem, false); + } + + .navbar-menu { + @include ltr-property("margin", -0.75rem); + } + } + + // Fixed navbar + .navbar { + &.is-fixed-bottom-desktop, + &.is-fixed-top-desktop { + @include navbar-fixed; + } + + &.is-fixed-bottom-desktop { + bottom: 0; + + &.has-shadow { + box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1); + } + } + + &.is-fixed-top-desktop { + top: 0; + } + } + + html, + body { + &.has-navbar-fixed-top-desktop { + padding-top: $navbar-height; + } + + &.has-navbar-fixed-bottom-desktop { + padding-bottom: $navbar-height; + } + + &.has-spaced-navbar-fixed-top { + padding-top: $navbar-height + $navbar-padding-vertical * 2; + } + + &.has-spaced-navbar-fixed-bottom { + padding-bottom: $navbar-height + $navbar-padding-vertical * 2; + } + } + + // Hover/Active states + a.navbar-item, + .navbar-link { + &.is-active { + color: $navbar-item-active-color; + } + + &.is-active:not(:focus):not(:hover) { + background-color: $navbar-item-active-background-color; + } + } + + .navbar-item.has-dropdown { + &:focus, + &:hover, + &.is-active { + .navbar-link { + background-color: $navbar-item-hover-background-color; + } + } + } +} + + +// Combination + +.hero { + &.is-fullheight-with-navbar { + min-height: calc(100vh - #{$navbar-height}); + } +} diff --git a/lib/bulma-scss/components/_pagination.scss b/lib/bulma-scss/components/_pagination.scss new file mode 100644 index 0000000000..5c048a3474 --- /dev/null +++ b/lib/bulma-scss/components/_pagination.scss @@ -0,0 +1,211 @@ +$pagination-color: $text-strong !default; +$pagination-border-color: $border !default; +$pagination-margin: -0.25rem !default; +$pagination-min-width: $control-height !default; + +$pagination-item-font-size: 1em !default; +$pagination-item-margin: 0.25rem !default; +$pagination-item-padding-left: 0.5em !default; +$pagination-item-padding-right: 0.5em !default; + +$pagination-hover-color: $link-hover !default; +$pagination-hover-border-color: $link-hover-border !default; + +$pagination-focus-color: $link-focus !default; +$pagination-focus-border-color: $link-focus-border !default; + +$pagination-active-color: $link-active !default; +$pagination-active-border-color: $link-active-border !default; + +$pagination-disabled-color: $text-light !default; +$pagination-disabled-background-color: $border !default; +$pagination-disabled-border-color: $border !default; + +$pagination-current-color: $link-invert !default; +$pagination-current-background-color: $link !default; +$pagination-current-border-color: $link !default; + +$pagination-ellipsis-color: $grey-light !default; + +$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2); + +.pagination { + @extend %block; + + font-size: $size-normal; + margin: $pagination-margin; + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } + + &.is-rounded { + .pagination-previous, + .pagination-next { + padding-left: 1em; + padding-right: 1em; + border-radius: $radius-rounded; + } + + .pagination-link { + border-radius: $radius-rounded; + } + } +} + +.pagination, +.pagination-list { + align-items: center; + display: flex; + justify-content: center; + text-align: center; +} + +.pagination-previous, +.pagination-next, +.pagination-link, +.pagination-ellipsis { + @extend %control; + + @extend %unselectable; + + font-size: $pagination-item-font-size; + justify-content: center; + margin: $pagination-item-margin; + padding-left: $pagination-item-padding-left; + padding-right: $pagination-item-padding-right; + text-align: center; +} + +.pagination-previous, +.pagination-next, +.pagination-link { + border-color: $pagination-border-color; + color: $pagination-color; + min-width: $pagination-min-width; + + &:hover { + border-color: $pagination-hover-border-color; + color: $pagination-hover-color; + } + + &:focus { + border-color: $pagination-focus-border-color; + } + + &:active { + box-shadow: $pagination-shadow-inset; + } + + &[disabled] { + background-color: $pagination-disabled-background-color; + border-color: $pagination-disabled-border-color; + box-shadow: none; + color: $pagination-disabled-color; + opacity: 0.5; + } +} + +.pagination-previous, +.pagination-next { + padding-left: 0.75em; + padding-right: 0.75em; + white-space: nowrap; +} + +.pagination-link { + &.is-current { + background-color: $pagination-current-background-color; + border-color: $pagination-current-border-color; + color: $pagination-current-color; + } +} + +.pagination-ellipsis { + color: $pagination-ellipsis-color; + pointer-events: none; +} + +.pagination-list { + flex-wrap: wrap; +} + +@include mobile { + .pagination { + flex-wrap: wrap; + } + + .pagination-previous, + .pagination-next { + flex-grow: 1; + flex-shrink: 1; + } + + .pagination-list { + li { + flex-grow: 1; + flex-shrink: 1; + } + } +} + + +@include tablet { + .pagination-list { + flex-grow: 1; + flex-shrink: 1; + justify-content: flex-start; + order: 1; + } + + .pagination-previous { + order: 2; + } + + .pagination-next { + order: 3; + } + + .pagination { + justify-content: space-between; + + &.is-centered { + .pagination-previous { + order: 1; + } + + .pagination-list { + justify-content: center; + order: 2; + } + + .pagination-next { + order: 3; + } + } + + &.is-right { + .pagination-previous { + order: 1; + } + + .pagination-next { + order: 2; + } + + .pagination-list { + justify-content: flex-end; + order: 3; + } + } + } +} diff --git a/lib/bulma-scss/components/_panel.scss b/lib/bulma-scss/components/_panel.scss new file mode 100644 index 0000000000..1b8ba15979 --- /dev/null +++ b/lib/bulma-scss/components/_panel.scss @@ -0,0 +1,164 @@ +$panel-margin: $block-spacing !default; +$panel-item-border: 1px solid $border-light !default; +$panel-radius: $radius-large !default; +$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default; + +$panel-heading-background-color: $border-light !default; +$panel-heading-color: $text-strong !default; +$panel-heading-line-height: 1.25 !default; +$panel-heading-padding: 0.75em 1em !default; +$panel-heading-radius: $radius !default; +$panel-heading-size: 1.25em !default; +$panel-heading-weight: $weight-bold !default; + +$panel-tabs-font-size: 0.875em !default; +$panel-tab-border-bottom: 1px solid $border !default; +$panel-tab-active-border-bottom-color: $link-active-border !default; +$panel-tab-active-color: $link-active !default; + +$panel-list-item-color: $text !default; +$panel-list-item-hover-color: $link !default; + +$panel-block-color: $text-strong !default; +$panel-block-hover-background-color: $background !default; +$panel-block-active-border-left-color: $link !default; +$panel-block-active-color: $link-active !default; +$panel-block-active-icon-color: $link !default; + +$panel-icon-color: $text-light !default; +$panel-colors: $colors !default; + +.panel { + border-radius: $panel-radius; + box-shadow: $panel-shadow; + font-size: $size-normal; + + &:not(:last-child) { + margin-bottom: $panel-margin; + } + + // Colors + @each $name, $components in $panel-colors { + $color: nth($components, 1); + $color-invert: nth($components, 2); + + &.is-#{$name} { + .panel-heading { + background-color: $color; + color: $color-invert; + } + + .panel-tabs a.is-active { + border-bottom-color: $color; + } + + .panel-block.is-active .panel-icon { + color: $color; + } + } + } +} + +.panel-tabs, +.panel-block { + &:not(:last-child) { + border-bottom: $panel-item-border; + } +} + +.panel-heading { + background-color: $panel-heading-background-color; + border-radius: $panel-radius $panel-radius 0 0; + color: $panel-heading-color; + font-size: $panel-heading-size; + font-weight: $panel-heading-weight; + line-height: $panel-heading-line-height; + padding: $panel-heading-padding; +} + +.panel-tabs { + align-items: flex-end; + display: flex; + font-size: $panel-tabs-font-size; + justify-content: center; + + a { + border-bottom: $panel-tab-border-bottom; + margin-bottom: -1px; + padding: 0.5em; + + // Modifiers + &.is-active { + border-bottom-color: $panel-tab-active-border-bottom-color; + color: $panel-tab-active-color; + } + } +} + +.panel-list { + a { + color: $panel-list-item-color; + + &:hover { + color: $panel-list-item-hover-color; + } + } +} + +.panel-block { + align-items: center; + color: $panel-block-color; + display: flex; + justify-content: flex-start; + padding: 0.5em 0.75em; + + input[type="checkbox"] { + @include ltr-property("margin", 0.75em); + } + + & > .control { + flex-grow: 1; + flex-shrink: 1; + width: 100%; + } + + &.is-wrapped { + flex-wrap: wrap; + } + + &.is-active { + border-left-color: $panel-block-active-border-left-color; + color: $panel-block-active-color; + + .panel-icon { + color: $panel-block-active-icon-color; + } + } + + &:last-child { + border-bottom-left-radius: $panel-radius; + border-bottom-right-radius: $panel-radius; + } +} + +a.panel-block, +label.panel-block { + cursor: pointer; + + &:hover { + background-color: $panel-block-hover-background-color; + } +} + +.panel-icon { + @include fa(14px, 1em); + + color: $panel-icon-color; + + @include ltr-property("margin", 0.75em); + + .fa { + font-size: inherit; + line-height: inherit; + } +} diff --git a/lib/bulma-scss/components/_tabs.scss b/lib/bulma-scss/components/_tabs.scss new file mode 100644 index 0000000000..640bdce1e5 --- /dev/null +++ b/lib/bulma-scss/components/_tabs.scss @@ -0,0 +1,269 @@ +$tabs-border-bottom-color: $border !default; +$tabs-border-bottom-style: solid !default; +$tabs-border-bottom-width: 1px !default; +$tabs-link-color: $text !default; +$tabs-link-hover-border-bottom-color: $text-strong !default; +$tabs-link-hover-color: $text-strong !default; +$tabs-link-active-border-bottom-color: $link !default; +$tabs-link-active-color: $link !default; +$tabs-link-padding: 0.5em 1em !default; + +$tabs-boxed-link-radius: $radius !default; +$tabs-boxed-link-hover-background-color: $background !default; +$tabs-boxed-link-hover-border-bottom-color: $border !default; + +$tabs-boxed-link-active-background-color: $scheme-main !default; +$tabs-boxed-link-active-border-color: $border !default; +$tabs-boxed-link-active-border-bottom-color: transparent !default; + +$tabs-toggle-link-border-color: $border !default; +$tabs-toggle-link-border-style: solid !default; +$tabs-toggle-link-border-width: 1px !default; +$tabs-toggle-link-hover-background-color: $background !default; +$tabs-toggle-link-hover-border-color: $border-hover !default; +$tabs-toggle-link-radius: $radius !default; +$tabs-toggle-link-active-background-color: $link !default; +$tabs-toggle-link-active-border-color: $link !default; +$tabs-toggle-link-active-color: $link-invert !default; + +.tabs { + @extend %block; + + @include overflow-touch; + + @extend %unselectable; + + align-items: stretch; + display: flex; + font-size: $size-normal; + justify-content: space-between; + overflow: hidden; + overflow-x: auto; + white-space: nowrap; + + a { + align-items: center; + border-bottom-color: $tabs-border-bottom-color; + border-bottom-style: $tabs-border-bottom-style; + border-bottom-width: $tabs-border-bottom-width; + color: $tabs-link-color; + display: flex; + justify-content: center; + margin-bottom: -#{$tabs-border-bottom-width}; + padding: $tabs-link-padding; + vertical-align: top; + + &:hover { + border-bottom-color: $tabs-link-hover-border-bottom-color; + color: $tabs-link-hover-color; + } + } + + li { + display: block; + + &.is-active { + a { + border-bottom-color: $tabs-link-active-border-bottom-color; + color: $tabs-link-active-color; + } + } + } + + ul { + align-items: center; + border-bottom-color: $tabs-border-bottom-color; + border-bottom-style: $tabs-border-bottom-style; + border-bottom-width: $tabs-border-bottom-width; + display: flex; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-start; + + &.is-left { + padding-right: 0.75em; + } + + &.is-center { + flex: none; + justify-content: center; + padding-left: 0.75em; + padding-right: 0.75em; + } + + &.is-right { + justify-content: flex-end; + padding-left: 0.75em; + } + } + + .icon { + &:first-child { + @include ltr-property("margin", 0.5em); + } + + &:last-child { + @include ltr-property("margin", 0.5em, false); + } + } + + // Alignment + &.is-centered { + ul { + justify-content: center; + } + } + + &.is-right { + ul { + justify-content: flex-end; + } + } + + // Styles + &.is-boxed { + a { + border: 1px solid transparent; + + @include ltr { + border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0; + } + + + @include rtl { + border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius; + } + + + &:hover { + background-color: $tabs-boxed-link-hover-background-color; + border-bottom-color: $tabs-boxed-link-hover-border-bottom-color; + } + } + + li { + &.is-active { + a { + background-color: $tabs-boxed-link-active-background-color; + border-color: $tabs-boxed-link-active-border-color; + border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important; + } + } + } + } + + &.is-fullwidth { + li { + flex-grow: 1; + flex-shrink: 0; + } + } + + &.is-toggle { + a { + border-color: $tabs-toggle-link-border-color; + border-style: $tabs-toggle-link-border-style; + border-width: $tabs-toggle-link-border-width; + margin-bottom: 0; + position: relative; + + &:hover { + background-color: $tabs-toggle-link-hover-background-color; + border-color: $tabs-toggle-link-hover-border-color; + z-index: 2; + } + } + + li { + & + li { + @include ltr-property("margin", -#{$tabs-toggle-link-border-width}, false); + } + + &:first-child a { + @include ltr { + border-top-left-radius: $tabs-toggle-link-radius; + border-bottom-left-radius: $tabs-toggle-link-radius; + } + + + @include rtl { + border-top-right-radius: $tabs-toggle-link-radius; + border-bottom-right-radius: $tabs-toggle-link-radius; + } + } + + &:last-child a { + @include ltr { + border-top-right-radius: $tabs-toggle-link-radius; + border-bottom-right-radius: $tabs-toggle-link-radius; + } + + + @include rtl { + border-top-left-radius: $tabs-toggle-link-radius; + border-bottom-left-radius: $tabs-toggle-link-radius; + } + } + + &.is-active { + a { + background-color: $tabs-toggle-link-active-background-color; + border-color: $tabs-toggle-link-active-border-color; + color: $tabs-toggle-link-active-color; + z-index: 1; + } + } + } + + ul { + border-bottom: none; + } + + &.is-toggle-rounded { + li { + &:first-child a { + @include ltr { + border-bottom-left-radius: $radius-rounded; + border-top-left-radius: $radius-rounded; + padding-left: 1.25em; + } + + + @include rtl { + border-bottom-right-radius: $radius-rounded; + border-top-right-radius: $radius-rounded; + padding-right: 1.25em; + } + } + + &:last-child a { + @include ltr { + border-bottom-right-radius: $radius-rounded; + border-top-right-radius: $radius-rounded; + padding-right: 1.25em; + } + + + @include rtl { + border-bottom-left-radius: $radius-rounded; + border-top-left-radius: $radius-rounded; + padding-left: 1.25em; + } + } + } + } + } + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } +} diff --git a/lib/bulma-scss/elements/_all.scss b/lib/bulma-scss/elements/_all.scss new file mode 100644 index 0000000000..af1e54fb6c --- /dev/null +++ b/lib/bulma-scss/elements/_all.scss @@ -0,0 +1,12 @@ +@import "box"; +@import "button"; +@import "container"; +@import "content"; +@import "icon"; +@import "image"; +@import "notification"; +@import "progress"; +@import "table"; +@import "tag"; +@import "title"; +@import "other"; diff --git a/lib/bulma-scss/elements/_box.scss b/lib/bulma-scss/elements/_box.scss new file mode 100644 index 0000000000..ef48d1d3de --- /dev/null +++ b/lib/bulma-scss/elements/_box.scss @@ -0,0 +1,30 @@ +$box-color: $text !default; +$box-background-color: $scheme-main !default; +$box-radius: $radius-large !default; +$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default; +$box-padding: 1.25rem !default; + +$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default; +$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default; + +.box { + @extend %block; + + background-color: $box-background-color; + border-radius: $box-radius; + box-shadow: $box-shadow; + color: $box-color; + display: block; + padding: $box-padding; +} + +a.box { + &:hover, + &:focus { + box-shadow: $box-link-hover-shadow; + } + + &:active { + box-shadow: $box-link-active-shadow; + } +} diff --git a/lib/bulma-scss/elements/_button.scss b/lib/bulma-scss/elements/_button.scss new file mode 100644 index 0000000000..aaf16cf17d --- /dev/null +++ b/lib/bulma-scss/elements/_button.scss @@ -0,0 +1,483 @@ +$button-color: $text-strong !default; +$button-background-color: $scheme-main !default; +$button-family: false !default; + +$button-border-color: $border !default; +$button-border-width: $control-border-width !default; + +$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default; +$button-padding-horizontal: 1em !default; + +$button-hover-color: $link-hover !default; +$button-hover-border-color: $link-hover-border !default; + +$button-focus-color: $link-focus !default; +$button-focus-border-color: $link-focus-border !default; +$button-focus-box-shadow-size: 0 0 0 0.125em !default; +$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default; + +$button-active-color: $link-active !default; +$button-active-border-color: $link-active-border !default; + +$button-text-color: $text !default; +$button-text-decoration: underline !default; +$button-text-hover-background-color: $background !default; +$button-text-hover-color: $text-strong !default; + +$button-disabled-background-color: $scheme-main !default; +$button-disabled-border-color: $border !default; +$button-disabled-shadow: none !default; +$button-disabled-opacity: 0.5 !default; + +$button-static-color: $text-light !default; +$button-static-background-color: $scheme-main-ter !default; +$button-static-border-color: $border !default; + +// The button sizes use mixins so they can be used at different breakpoints +@mixin button-small { + border-radius: $radius-small; + font-size: $size-small; +} + +@mixin button-normal { + font-size: $size-normal; +} + +@mixin button-medium { + font-size: $size-medium; +} + +@mixin button-large { + font-size: $size-large; +} + +.button { + @extend %control; + + @extend %unselectable; + + background-color: $button-background-color; + border-color: $button-border-color; + border-width: $button-border-width; + color: $button-color; + cursor: pointer; + + @if $button-family { + font-family: $button-family; + } + + justify-content: center; + padding-bottom: $button-padding-vertical; + padding-left: $button-padding-horizontal; + padding-right: $button-padding-horizontal; + padding-top: $button-padding-vertical; + text-align: center; + white-space: nowrap; + + strong { + color: inherit; + } + + .icon { + &, + &.is-small, + &.is-medium, + &.is-large { + height: 1.5em; + width: 1.5em; + } + + &:first-child:not(:last-child) { + @include ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false); + @include ltr-property("margin", $button-padding-horizontal / 4); + } + + &:last-child:not(:first-child) { + @include ltr-property("margin", $button-padding-horizontal / 4, false); + @include ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})); + } + + &:first-child:last-child { + margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}); + margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}); + } + } + + // States + &:hover, + &.is-hovered { + border-color: $button-hover-border-color; + color: $button-hover-color; + } + + &:focus, + &.is-focused { + border-color: $button-focus-border-color; + color: $button-focus-color; + + &:not(:active) { + box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color; + } + } + + &:active, + &.is-active { + border-color: $button-active-border-color; + color: $button-active-color; + } + + // Colors + &.is-text { + background-color: transparent; + border-color: transparent; + color: $button-text-color; + text-decoration: $button-text-decoration; + + &:hover, + &.is-hovered, + &:focus, + &.is-focused { + background-color: $button-text-hover-background-color; + color: $button-text-hover-color; + } + + &:active, + &.is-active { + background-color: bulmaDarken($button-text-hover-background-color, 5%); + color: $button-text-hover-color; + } + + &[disabled], + fieldset[disabled] & { + background-color: transparent; + border-color: transparent; + box-shadow: none; + } + } + + @each $name, $pair in $colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + background-color: $color; + border-color: transparent; + color: $color-invert; + + &:hover, + &.is-hovered { + background-color: bulmaDarken($color, 2.5%); + border-color: transparent; + color: $color-invert; + } + + &:focus, + &.is-focused { + border-color: transparent; + color: $color-invert; + + &:not(:active) { + box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25); + } + } + + &:active, + &.is-active { + background-color: bulmaDarken($color, 5%); + border-color: transparent; + color: $color-invert; + } + + &[disabled], + fieldset[disabled] & { + background-color: $color; + border-color: transparent; + box-shadow: none; + } + + &.is-inverted { + background-color: $color-invert; + color: $color; + + &:hover, + &.is-hovered { + background-color: bulmaDarken($color-invert, 5%); + } + + &[disabled], + fieldset[disabled] & { + background-color: $color-invert; + border-color: transparent; + box-shadow: none; + color: $color; + } + } + + &.is-loading { + &::after { + border-color: transparent transparent $color-invert $color-invert !important; + } + } + + &.is-outlined { + background-color: transparent; + border-color: $color; + color: $color; + + &:hover, + &.is-hovered, + &:focus, + &.is-focused { + background-color: $color; + border-color: $color; + color: $color-invert; + } + + &.is-loading { + &::after { + border-color: transparent transparent $color $color !important; + } + + &:hover, + &.is-hovered, + &:focus, + &.is-focused { + &::after { + border-color: transparent transparent $color-invert $color-invert !important; + } + } + } + + &[disabled], + fieldset[disabled] & { + background-color: transparent; + border-color: $color; + box-shadow: none; + color: $color; + } + } + + &.is-inverted.is-outlined { + background-color: transparent; + border-color: $color-invert; + color: $color-invert; + + &:hover, + &.is-hovered, + &:focus, + &.is-focused { + background-color: $color-invert; + color: $color; + } + + &.is-loading { + &:hover, + &.is-hovered, + &:focus, + &.is-focused { + &::after { + border-color: transparent transparent $color $color !important; + } + } + } + + &[disabled], + fieldset[disabled] & { + background-color: transparent; + border-color: $color-invert; + box-shadow: none; + color: $color-invert; + } + } + + // If light and dark colors are provided + @if length($pair) >= 4 { + $color-light: nth($pair, 3); + $color-dark: nth($pair, 4); + + &.is-light { + background-color: $color-light; + color: $color-dark; + + &:hover, + &.is-hovered { + background-color: bulmaDarken($color-light, 2.5%); + border-color: transparent; + color: $color-dark; + } + + &:active, + &.is-active { + background-color: bulmaDarken($color-light, 5%); + border-color: transparent; + color: $color-dark; + } + } + } + } + } + + // Sizes + &.is-small { + @include button-small; + } + + &.is-normal { + @include button-normal; + } + + &.is-medium { + @include button-medium; + } + + &.is-large { + @include button-large; + } + + // Modifiers + &[disabled], + fieldset[disabled] & { + background-color: $button-disabled-background-color; + border-color: $button-disabled-border-color; + box-shadow: $button-disabled-shadow; + opacity: $button-disabled-opacity; + } + + &.is-fullwidth { + display: flex; + width: 100%; + } + + &.is-loading { + color: transparent !important; + pointer-events: none; + + &::after { + @extend %loader; + + @include center(1em); + + position: absolute !important; + } + } + + &.is-static { + background-color: $button-static-background-color; + border-color: $button-static-border-color; + color: $button-static-color; + box-shadow: none; + pointer-events: none; + } + + &.is-rounded { + border-radius: $radius-rounded; + padding-left: calc(#{$button-padding-horizontal} + 0.25em); + padding-right: calc(#{$button-padding-horizontal} + 0.25em); + } +} + +.buttons { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + + .button { + margin-bottom: 0.5rem; + + &:not(:last-child):not(.is-fullwidth) { + @include ltr-property("margin", 0.5rem); + } + } + + &:last-child { + margin-bottom: -0.5rem; + } + + &:not(:last-child) { + margin-bottom: 1rem; + } + + // Sizes + &.are-small { + .button:not(.is-normal):not(.is-medium):not(.is-large) { + @include button-small; + } + } + + &.are-medium { + .button:not(.is-small):not(.is-normal):not(.is-large) { + @include button-medium; + } + } + + &.are-large { + .button:not(.is-small):not(.is-normal):not(.is-medium) { + @include button-large; + } + } + + &.has-addons { + .button { + &:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + &:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + + @include ltr-property("margin", -1px); + } + + &:last-child { + @include ltr-property("margin", 0); + } + + &:hover, + &.is-hovered { + z-index: 2; + } + + &:focus, + &.is-focused, + &:active, + &.is-active, + &.is-selected { + z-index: 3; + + &:hover { + z-index: 4; + } + } + + &.is-expanded { + flex-grow: 1; + flex-shrink: 1; + } + } + } + + &.is-centered { + justify-content: center; + + &:not(.has-addons) { + .button:not(.is-fullwidth) { + margin-left: 0.25rem; + margin-right: 0.25rem; + } + } + } + + &.is-right { + justify-content: flex-end; + + &:not(.has-addons) { + .button:not(.is-fullwidth) { + margin-left: 0.25rem; + margin-right: 0.25rem; + } + } + } +} diff --git a/lib/bulma-scss/elements/_container.scss b/lib/bulma-scss/elements/_container.scss new file mode 100644 index 0000000000..140508e0b1 --- /dev/null +++ b/lib/bulma-scss/elements/_container.scss @@ -0,0 +1,43 @@ +$container-offset: 2 * $gap !default; + +.container { + flex-grow: 1; + margin: 0 auto; + position: relative; + width: auto; + + &.is-fluid { + max-width: none; + padding-left: $gap; + padding-right: $gap; + width: 100%; + } + + @include desktop { + max-width: $desktop - $container-offset; + } + + + @include until-widescreen { + &.is-widescreen { + max-width: $widescreen - $container-offset; + } + } + + + @include until-fullhd { + &.is-fullhd { + max-width: $fullhd - $container-offset; + } + } + + + @include widescreen { + max-width: $widescreen - $container-offset; + } + + + @include fullhd { + max-width: $fullhd - $container-offset; + } +} diff --git a/lib/bulma-scss/elements/_content.scss b/lib/bulma-scss/elements/_content.scss new file mode 100644 index 0000000000..851c43f24b --- /dev/null +++ b/lib/bulma-scss/elements/_content.scss @@ -0,0 +1,252 @@ +$content-heading-color: $text-strong !default; +$content-heading-weight: $weight-semibold !default; +$content-heading-line-height: 1.125 !default; + +$content-blockquote-background-color: $background !default; +$content-blockquote-border-left: 5px solid $border !default; +$content-blockquote-padding: 1.25em 1.5em !default; + +$content-pre-padding: 1.25em 1.5em !default; + +$content-table-cell-border: 1px solid $border !default; +$content-table-cell-border-width: 0 0 1px !default; +$content-table-cell-padding: 0.5em 0.75em !default; +$content-table-cell-heading-color: $text-strong !default; +$content-table-head-cell-border-width: 0 0 2px !default; +$content-table-head-cell-color: $text-strong !default; +$content-table-foot-cell-border-width: 2px 0 0 !default; +$content-table-foot-cell-color: $text-strong !default; + +.content { + @extend %block; + + // Inline + li + li { + margin-top: 0.25em; + } + + // Block + p, + dl, + ol, + ul, + blockquote, + pre, + table { + &:not(:last-child) { + margin-bottom: 1em; + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: $content-heading-color; + font-weight: $content-heading-weight; + line-height: $content-heading-line-height; + } + + h1 { + font-size: 2em; + margin-bottom: 0.5em; + + &:not(:first-child) { + margin-top: 1em; + } + } + + h2 { + font-size: 1.75em; + margin-bottom: 0.5714em; + + &:not(:first-child) { + margin-top: 1.1428em; + } + } + + h3 { + font-size: 1.5em; + margin-bottom: 0.6666em; + + &:not(:first-child) { + margin-top: 1.3333em; + } + } + + h4 { + font-size: 1.25em; + margin-bottom: 0.8em; + } + + h5 { + font-size: 1.125em; + margin-bottom: 0.8888em; + } + + h6 { + font-size: 1em; + margin-bottom: 1em; + } + + blockquote { + background-color: $content-blockquote-background-color; + + @include ltr-property("border", $content-blockquote-border-left, false); + + padding: $content-blockquote-padding; + } + + ol { + list-style-position: outside; + + @include ltr-property("margin", 2em, false); + + margin-top: 1em; + + &:not([type]) { + list-style-type: decimal; + + &.is-lower-alpha { + list-style-type: lower-alpha; + } + + &.is-lower-roman { + list-style-type: lower-roman; + } + + &.is-upper-alpha { + list-style-type: upper-alpha; + } + + &.is-upper-roman { + list-style-type: upper-roman; + } + } + } + + ul { + list-style: disc outside; + + @include ltr-property("margin", 2em, false); + + margin-top: 1em; + + ul { + list-style-type: circle; + margin-top: 0.5em; + + ul { + list-style-type: square; + } + } + } + + dd { + @include ltr-property("margin", 2em, false); + } + + figure { + margin-left: 2em; + margin-right: 2em; + text-align: center; + + &:not(:first-child) { + margin-top: 2em; + } + + &:not(:last-child) { + margin-bottom: 2em; + } + + img { + display: inline-block; + } + + figcaption { + font-style: italic; + } + } + + pre { + @include overflow-touch; + + overflow-x: auto; + padding: $content-pre-padding; + white-space: pre; + word-wrap: normal; + } + + sup, + sub { + font-size: 75%; + } + + table { + width: 100%; + + td, + th { + border: $content-table-cell-border; + border-width: $content-table-cell-border-width; + padding: $content-table-cell-padding; + vertical-align: top; + } + + th { + color: $content-table-cell-heading-color; + + &:not([align]) { + text-align: inherit; + } + } + + thead { + td, + th { + border-width: $content-table-head-cell-border-width; + color: $content-table-head-cell-color; + } + } + + tfoot { + td, + th { + border-width: $content-table-foot-cell-border-width; + color: $content-table-foot-cell-color; + } + } + + tbody { + tr { + &:last-child { + td, + th { + border-bottom-width: 0; + } + } + } + } + } + + .tabs { + li + li { + margin-top: 0; + } + } + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } +} diff --git a/lib/bulma-scss/elements/_form.scss b/lib/bulma-scss/elements/_form.scss new file mode 100644 index 0000000000..d80d4413bd --- /dev/null +++ b/lib/bulma-scss/elements/_form.scss @@ -0,0 +1 @@ +@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."; diff --git a/lib/bulma-scss/elements/_icon.scss b/lib/bulma-scss/elements/_icon.scss new file mode 100644 index 0000000000..58e413396f --- /dev/null +++ b/lib/bulma-scss/elements/_icon.scss @@ -0,0 +1,28 @@ +$icon-dimensions: 1.5rem !default; +$icon-dimensions-small: 1rem !default; +$icon-dimensions-medium: 2rem !default; +$icon-dimensions-large: 3rem !default; + +.icon { + align-items: center; + display: inline-flex; + justify-content: center; + height: $icon-dimensions; + width: $icon-dimensions; + + // Sizes + &.is-small { + height: $icon-dimensions-small; + width: $icon-dimensions-small; + } + + &.is-medium { + height: $icon-dimensions-medium; + width: $icon-dimensions-medium; + } + + &.is-large { + height: $icon-dimensions-large; + width: $icon-dimensions-large; + } +} diff --git a/lib/bulma-scss/elements/_image.scss b/lib/bulma-scss/elements/_image.scss new file mode 100644 index 0000000000..5fae7dcf28 --- /dev/null +++ b/lib/bulma-scss/elements/_image.scss @@ -0,0 +1,115 @@ +$dimensions: 16 24 32 48 64 96 128 !default; + +.image { + display: block; + position: relative; + + img { + display: block; + height: auto; + width: 100%; + + &.is-rounded { + border-radius: $radius-rounded; + } + } + + &.is-fullwidth { + width: 100%; + } + + // Ratio + &.is-square, + &.is-1by1, + &.is-5by4, + &.is-4by3, + &.is-3by2, + &.is-5by3, + &.is-16by9, + &.is-2by1, + &.is-3by1, + &.is-4by5, + &.is-3by4, + &.is-2by3, + &.is-3by5, + &.is-9by16, + &.is-1by2, + &.is-1by3 { + img, + .has-ratio { + @extend %overlay; + + height: 100%; + width: 100%; + } + } + + &.is-square, + &.is-1by1 { + padding-top: 100%; + } + + &.is-5by4 { + padding-top: 80%; + } + + &.is-4by3 { + padding-top: 75%; + } + + &.is-3by2 { + padding-top: 66.6666%; + } + + &.is-5by3 { + padding-top: 60%; + } + + &.is-16by9 { + padding-top: 56.25%; + } + + &.is-2by1 { + padding-top: 50%; + } + + &.is-3by1 { + padding-top: 33.3333%; + } + + &.is-4by5 { + padding-top: 125%; + } + + &.is-3by4 { + padding-top: 133.3333%; + } + + &.is-2by3 { + padding-top: 150%; + } + + &.is-3by5 { + padding-top: 166.6666%; + } + + &.is-9by16 { + padding-top: 177.7777%; + } + + &.is-1by2 { + padding-top: 200%; + } + + &.is-1by3 { + padding-top: 300%; + } + + // Sizes + @each $dimension in $dimensions { + &.is-#{$dimension}x#{$dimension} { + height: $dimension * 1px; + width: $dimension * 1px; + } + } +} diff --git a/lib/bulma-scss/elements/_notification.scss b/lib/bulma-scss/elements/_notification.scss new file mode 100644 index 0000000000..c6702c94f6 --- /dev/null +++ b/lib/bulma-scss/elements/_notification.scss @@ -0,0 +1,77 @@ +$notification-background-color: $background !default; +$notification-code-background-color: $scheme-main !default; +$notification-radius: $radius !default; +$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default; +$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default; +$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default; + +.notification { + @extend %block; + + background-color: $notification-background-color; + border-radius: $notification-radius; + position: relative; + + @include ltr { + padding: $notification-padding-ltr; + } + + + @include rtl { + padding: $notification-padding-rtl; + } + + + a:not(.button):not(.dropdown-item) { + color: currentColor; + text-decoration: underline; + } + + strong { + color: currentColor; + } + + code, + pre { + background: $notification-code-background-color; + } + + pre code { + background: transparent; + } + + & > .delete { + @include ltr-position(0.5rem); + + position: absolute; + top: 0.5rem; + } + + .title, + .subtitle, + .content { + color: currentColor; + } + + // Colors + @each $name, $pair in $colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + background-color: $color; + color: $color-invert; + + // If light and dark colors are provided + @if length($pair) >= 4 { + $color-light: nth($pair, 3); + $color-dark: nth($pair, 4); + + &.is-light { + background-color: $color-light; + color: $color-dark; + } + } + } + } +} diff --git a/lib/bulma-scss/elements/_other.scss b/lib/bulma-scss/elements/_other.scss new file mode 100644 index 0000000000..cd906a55a8 --- /dev/null +++ b/lib/bulma-scss/elements/_other.scss @@ -0,0 +1,48 @@ +.block { + @extend %block; +} + +.delete { + @extend %delete; +} + +.heading { + display: block; + font-size: 11px; + letter-spacing: 1px; + margin-bottom: 5px; + text-transform: uppercase; +} + +.highlight { + @extend %block; + + font-weight: $weight-normal; + max-width: 100%; + overflow: hidden; + padding: 0; + + pre { + overflow: auto; + max-width: 100%; + } +} + +.loader { + @extend %loader; +} + +.number { + align-items: center; + background-color: $background; + border-radius: $radius-rounded; + display: inline-flex; + font-size: $size-medium; + height: 2em; + justify-content: center; + margin-right: 1.5rem; + min-width: 2.5em; + padding: 0.25rem 0.5rem; + text-align: center; + vertical-align: top; +} diff --git a/lib/bulma-scss/elements/_progress.scss b/lib/bulma-scss/elements/_progress.scss new file mode 100644 index 0000000000..a3fd439682 --- /dev/null +++ b/lib/bulma-scss/elements/_progress.scss @@ -0,0 +1,102 @@ +$progress-bar-background-color: $border-light !default; +$progress-value-background-color: $text !default; +$progress-border-radius: $radius-rounded !default; + +$progress-indeterminate-duration: 1.5s !default; + +.progress { + @extend %block; + + -moz-appearance: none; + -webkit-appearance: none; + border: none; + border-radius: $progress-border-radius; + display: block; + height: $size-normal; + overflow: hidden; + padding: 0; + width: 100%; + + &::-webkit-progress-bar { + background-color: $progress-bar-background-color; + } + + &::-webkit-progress-value { + background-color: $progress-value-background-color; + } + + &::-moz-progress-bar { + background-color: $progress-value-background-color; + } + + &::-ms-fill { + background-color: $progress-value-background-color; + border: none; + } + + // Colors + @each $name, $pair in $colors { + $color: nth($pair, 1); + + &.is-#{$name} { + &::-webkit-progress-value { + background-color: $color; + } + + &::-moz-progress-bar { + background-color: $color; + } + + &::-ms-fill { + background-color: $color; + } + + &:indeterminate { + background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%); + } + } + } + + &:indeterminate { + animation-duration: $progress-indeterminate-duration; + animation-iteration-count: infinite; + animation-name: moveIndeterminate; + animation-timing-function: linear; + background-color: $progress-bar-background-color; + background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%); + background-position: top left; + background-repeat: no-repeat; + background-size: 150% 150%; + + &::-webkit-progress-bar { + background-color: transparent; + } + + &::-moz-progress-bar { + background-color: transparent; + } + } + + // Sizes + &.is-small { + height: $size-small; + } + + &.is-medium { + height: $size-medium; + } + + &.is-large { + height: $size-large; + } +} + +@keyframes moveIndeterminate { + from { + background-position: 200% 0; + } + + to { + background-position: (-200%) 0; + } +} diff --git a/lib/bulma-scss/elements/_table.scss b/lib/bulma-scss/elements/_table.scss new file mode 100644 index 0000000000..0aa2d2ac09 --- /dev/null +++ b/lib/bulma-scss/elements/_table.scss @@ -0,0 +1,202 @@ +$table-color: $text-strong !default; +$table-background-color: $scheme-main !default; + +$table-cell-border: 1px solid $border !default; +$table-cell-border-width: 0 0 1px !default; +$table-cell-padding: 0.5em 0.75em !default; +$table-cell-heading-color: $text-strong !default; + +$table-head-cell-border-width: 0 0 2px !default; +$table-head-cell-color: $text-strong !default; +$table-foot-cell-border-width: 2px 0 0 !default; +$table-foot-cell-color: $text-strong !default; + +$table-head-background-color: transparent !default; +$table-body-background-color: transparent !default; +$table-foot-background-color: transparent !default; + +$table-row-hover-background-color: $scheme-main-bis !default; + +$table-row-active-background-color: $primary !default; +$table-row-active-color: $primary-invert !default; + +$table-striped-row-even-background-color: $scheme-main-bis !default; +$table-striped-row-even-hover-background-color: $scheme-main-ter !default; + +.table { + @extend %block; + + background-color: $table-background-color; + color: $table-color; + + td, + th { + border: $table-cell-border; + border-width: $table-cell-border-width; + padding: $table-cell-padding; + vertical-align: top; + + // Colors + @each $name, $pair in $colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + background-color: $color; + border-color: $color; + color: $color-invert; + } + } + + // Modifiers + &.is-narrow { + white-space: nowrap; + width: 1%; + } + + &.is-selected { + background-color: $table-row-active-background-color; + color: $table-row-active-color; + + a, + strong { + color: currentColor; + } + } + + &.is-vcentered { + vertical-align: middle; + } + } + + th { + color: $table-cell-heading-color; + + &:not([align]) { + text-align: inherit; + } + } + + tr { + &.is-selected { + background-color: $table-row-active-background-color; + color: $table-row-active-color; + + a, + strong { + color: currentColor; + } + + td, + th { + border-color: $table-row-active-color; + color: currentColor; + } + } + } + + thead { + background-color: $table-head-background-color; + + td, + th { + border-width: $table-head-cell-border-width; + color: $table-head-cell-color; + } + } + + tfoot { + background-color: $table-foot-background-color; + + td, + th { + border-width: $table-foot-cell-border-width; + color: $table-foot-cell-color; + } + } + + tbody { + background-color: $table-body-background-color; + + tr { + &:last-child { + td, + th { + border-bottom-width: 0; + } + } + } + } + + // Modifiers + &.is-bordered { + td, + th { + border-width: 1px; + } + + tr { + &:last-child { + td, + th { + border-bottom-width: 1px; + } + } + } + } + + &.is-fullwidth { + width: 100%; + } + + &.is-hoverable { + tbody { + tr:not(.is-selected) { + &:hover { + background-color: $table-row-hover-background-color; + } + } + } + + &.is-striped { + tbody { + tr:not(.is-selected) { + &:hover { + background-color: $table-row-hover-background-color; + + &:nth-child(even) { + background-color: $table-striped-row-even-hover-background-color; + } + } + } + } + } + } + + &.is-narrow { + td, + th { + padding: 0.25em 0.5em; + } + } + + &.is-striped { + tbody { + tr:not(.is-selected) { + &:nth-child(even) { + background-color: $table-striped-row-even-background-color; + } + } + } + } +} + +.table-container { + @extend %block; + + @include overflow-touch; + + overflow: auto; + overflow-y: hidden; + max-width: 100%; +} diff --git a/lib/bulma-scss/elements/_tag.scss b/lib/bulma-scss/elements/_tag.scss new file mode 100644 index 0000000000..0eb9ea83ac --- /dev/null +++ b/lib/bulma-scss/elements/_tag.scss @@ -0,0 +1,218 @@ +$tag-background-color: $background !default; +$tag-color: $text !default; +$tag-radius: $radius !default; +$tag-delete-margin: 1px !default; + +.tags { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + + .tag { + margin-bottom: 0.5rem; + + &:not(:last-child) { + @include ltr-property("margin", 0.5rem); + } + } + + &:last-child { + margin-bottom: -0.5rem; + } + + &:not(:last-child) { + margin-bottom: 1rem; + } + + // Sizes + &.are-medium { + .tag:not(.is-normal):not(.is-large) { + font-size: $size-normal; + } + } + + &.are-large { + .tag:not(.is-normal):not(.is-medium) { + font-size: $size-medium; + } + } + + &.is-centered { + justify-content: center; + + .tag { + margin-right: 0.25rem; + margin-left: 0.25rem; + } + } + + &.is-right { + justify-content: flex-end; + + .tag { + &:not(:first-child) { + margin-left: 0.5rem; + } + + &:not(:last-child) { + margin-right: 0; + } + } + } + + &.has-addons { + .tag { + @include ltr-property("margin", 0); + + &:not(:first-child) { + @include ltr-property("margin", 0, false); + @include ltr { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + + @include rtl { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + &:not(:last-child) { + @include ltr { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + + @include rtl { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } + } + } +} + +.tag:not(body) { + align-items: center; + background-color: $tag-background-color; + border-radius: $tag-radius; + color: $tag-color; + display: inline-flex; + font-size: $size-small; + height: 2em; + justify-content: center; + line-height: 1.5; + padding-left: 0.75em; + padding-right: 0.75em; + white-space: nowrap; + + .delete { + @include ltr-property("margin", 0.25rem, false); + @include ltr-property("margin", -0.375rem); + } + + // Colors + @each $name, $pair in $colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + background-color: $color; + color: $color-invert; + + // If a light and dark colors are provided + @if length($pair) > 3 { + $color-light: nth($pair, 3); + $color-dark: nth($pair, 4); + + &.is-light { + background-color: $color-light; + color: $color-dark; + } + } + } + } + + // Sizes + &.is-normal { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-normal; + } + + &.is-large { + font-size: $size-medium; + } + + .icon { + &:first-child:not(:last-child) { + @include ltr-property("margin", -0.375em, false); + @include ltr-property("margin", 0.1875em); + } + + &:last-child:not(:first-child) { + @include ltr-property("margin", 0.1875em, false); + @include ltr-property("margin", -0.375em); + } + + &:first-child:last-child { + @include ltr-property("margin", -0.375em, false); + @include ltr-property("margin", -0.375em); + } + } + + // Modifiers + &.is-delete { + @include ltr-property("margin", $tag-delete-margin, false); + + padding: 0; + position: relative; + width: 2em; + + &::before, + &::after { + background-color: currentColor; + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; + } + + &::before { + height: 1px; + width: 50%; + } + + &::after { + height: 50%; + width: 1px; + } + + &:hover, + &:focus { + background-color: darken($tag-background-color, 5%); + } + + &:active { + background-color: darken($tag-background-color, 10%); + } + } + + &.is-rounded { + border-radius: $radius-rounded; + } +} + +a.tag { + &:hover { + text-decoration: underline; + } +} diff --git a/lib/bulma-scss/elements/_title.scss b/lib/bulma-scss/elements/_title.scss new file mode 100644 index 0000000000..543429d09d --- /dev/null +++ b/lib/bulma-scss/elements/_title.scss @@ -0,0 +1,106 @@ +$title-color: $text-strong !default; +$title-family: false !default; +$title-size: $size-3 !default; +$title-weight: $weight-semibold !default; +$title-line-height: 1.125 !default; +$title-strong-color: inherit !default; +$title-strong-weight: inherit !default; +$title-sub-size: 0.75em !default; +$title-sup-size: 0.75em !default; + +$subtitle-color: $text !default; +$subtitle-family: false !default; +$subtitle-size: $size-5 !default; +$subtitle-weight: $weight-normal !default; +$subtitle-line-height: 1.25 !default; +$subtitle-strong-color: $text-strong !default; +$subtitle-strong-weight: $weight-semibold !default; +$subtitle-negative-margin: -1.25rem !default; + +.title, +.subtitle { + @extend %block; + + word-break: break-word; + + em, + span { + font-weight: inherit; + } + + sub { + font-size: $title-sub-size; + } + + sup { + font-size: $title-sup-size; + } + + .tag { + vertical-align: middle; + } +} + +.title { + color: $title-color; + + @if $title-family { + font-family: $title-family; + } + + font-size: $title-size; + font-weight: $title-weight; + line-height: $title-line-height; + + strong { + color: $title-strong-color; + font-weight: $title-strong-weight; + } + + & + .highlight { + margin-top: -0.75rem; + } + + &:not(.is-spaced) + .subtitle { + margin-top: $subtitle-negative-margin; + } + + // Sizes + @each $size in $sizes { + $i: index($sizes, $size); + + &.is-#{$i} { + font-size: $size; + } + } +} + +.subtitle { + color: $subtitle-color; + + @if $subtitle-family { + font-family: $subtitle-family; + } + + font-size: $subtitle-size; + font-weight: $subtitle-weight; + line-height: $subtitle-line-height; + + strong { + color: $subtitle-strong-color; + font-weight: $subtitle-strong-weight; + } + + &:not(.is-spaced) + .title { + margin-top: $subtitle-negative-margin; + } + + // Sizes + @each $size in $sizes { + $i: index($sizes, $size); + + &.is-#{$i} { + font-size: $size; + } + } +} diff --git a/lib/bulma-scss/form/_all.scss b/lib/bulma-scss/form/_all.scss new file mode 100644 index 0000000000..49da5bfdb2 --- /dev/null +++ b/lib/bulma-scss/form/_all.scss @@ -0,0 +1,6 @@ +@import "shared"; +@import "input-textarea"; +@import "checkbox-radio"; +@import "select"; +@import "file"; +@import "tools"; diff --git a/lib/bulma-scss/form/_checkbox-radio.scss b/lib/bulma-scss/form/_checkbox-radio.scss new file mode 100644 index 0000000000..6ae1b5b6c9 --- /dev/null +++ b/lib/bulma-scss/form/_checkbox-radio.scss @@ -0,0 +1,32 @@ +%checkbox-radio { + cursor: pointer; + display: inline-block; + line-height: 1.25; + position: relative; + + input { + cursor: pointer; + } + + &:hover { + color: $input-hover-color; + } + + &[disabled], + fieldset[disabled] & { + color: $input-disabled-color; + cursor: not-allowed; + } +} + +.checkbox { + @extend %checkbox-radio; +} + +.radio { + @extend %checkbox-radio; + + & + .radio { + @include ltr-property("margin", 0.5em, false); + } +} diff --git a/lib/bulma-scss/form/_file.scss b/lib/bulma-scss/form/_file.scss new file mode 100644 index 0000000000..1e6dc33d2f --- /dev/null +++ b/lib/bulma-scss/form/_file.scss @@ -0,0 +1,277 @@ +$file-border-color: $border !default; +$file-radius: $radius !default; + +$file-cta-background-color: $scheme-main-ter !default; +$file-cta-color: $text !default; +$file-cta-hover-color: $text-strong !default; +$file-cta-active-color: $text-strong !default; + +$file-name-border-color: $border !default; +$file-name-border-style: solid !default; +$file-name-border-width: 1px 1px 1px 0 !default; +$file-name-max-width: 16em !default; + +.file { + @extend %unselectable; + + align-items: stretch; + display: flex; + justify-content: flex-start; + position: relative; + + // Colors + @each $name, $pair in $colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + .file-cta { + background-color: $color; + border-color: transparent; + color: $color-invert; + } + + &:hover, + &.is-hovered { + .file-cta { + background-color: bulmaDarken($color, 2.5%); + border-color: transparent; + color: $color-invert; + } + } + + &:focus, + &.is-focused { + .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em bulmaRgba($color, 0.25); + color: $color-invert; + } + } + + &:active, + &.is-active { + .file-cta { + background-color: bulmaDarken($color, 5%); + border-color: transparent; + color: $color-invert; + } + } + } + } + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + + .file-icon { + .fa { + font-size: 21px; + } + } + } + + &.is-large { + font-size: $size-large; + + .file-icon { + .fa { + font-size: 28px; + } + } + } + + // Modifiers + &.has-name { + .file-cta { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + .file-name { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + &.is-empty { + .file-cta { + border-radius: $file-radius; + } + + .file-name { + display: none; + } + } + } + + &.is-boxed { + .file-label { + flex-direction: column; + } + + .file-cta { + flex-direction: column; + height: auto; + padding: 1em 3em; + } + + .file-name { + border-width: 0 1px 1px; + } + + .file-icon { + height: 1.5em; + width: 1.5em; + + .fa { + font-size: 21px; + } + } + + &.is-small { + .file-icon .fa { + font-size: 14px; + } + } + + &.is-medium { + .file-icon .fa { + font-size: 28px; + } + } + + &.is-large { + .file-icon .fa { + font-size: 35px; + } + } + + &.has-name { + .file-cta { + border-radius: $file-radius $file-radius 0 0; + } + + .file-name { + border-radius: 0 0 $file-radius $file-radius; + border-width: 0 1px 1px; + } + } + } + + &.is-centered { + justify-content: center; + } + + &.is-fullwidth { + .file-label { + width: 100%; + } + + .file-name { + flex-grow: 1; + max-width: none; + } + } + + &.is-right { + justify-content: flex-end; + + .file-cta { + border-radius: 0 $file-radius $file-radius 0; + } + + .file-name { + border-radius: $file-radius 0 0 $file-radius; + border-width: 1px 0 1px 1px; + order: -1; + } + } +} + +.file-label { + align-items: stretch; + display: flex; + cursor: pointer; + justify-content: flex-start; + overflow: hidden; + position: relative; + + &:hover { + .file-cta { + background-color: bulmaDarken($file-cta-background-color, 2.5%); + color: $file-cta-hover-color; + } + + .file-name { + border-color: bulmaDarken($file-name-border-color, 2.5%); + } + } + + &:active { + .file-cta { + background-color: bulmaDarken($file-cta-background-color, 5%); + color: $file-cta-active-color; + } + + .file-name { + border-color: bulmaDarken($file-name-border-color, 5%); + } + } +} + +.file-input { + height: 100%; + left: 0; + opacity: 0; + outline: none; + position: absolute; + top: 0; + width: 100%; +} + +.file-cta, +.file-name { + @extend %control; + + border-color: $file-border-color; + border-radius: $file-radius; + font-size: 1em; + padding-left: 1em; + padding-right: 1em; + white-space: nowrap; +} + +.file-cta { + background-color: $file-cta-background-color; + color: $file-cta-color; +} + +.file-name { + border-color: $file-name-border-color; + border-style: $file-name-border-style; + border-width: $file-name-border-width; + display: block; + max-width: $file-name-max-width; + overflow: hidden; + text-align: inherit; + text-overflow: ellipsis; +} + +.file-icon { + align-items: center; + display: flex; + height: 1em; + justify-content: center; + + @include ltr-property("margin", 0.5em); + + width: 1em; + + .fa { + font-size: 14px; + } +} diff --git a/lib/bulma-scss/form/_input-textarea.scss b/lib/bulma-scss/form/_input-textarea.scss new file mode 100644 index 0000000000..37bf4dc08c --- /dev/null +++ b/lib/bulma-scss/form/_input-textarea.scss @@ -0,0 +1,97 @@ +$textarea-padding: $control-padding-horizontal !default; +$textarea-max-height: 40em !default; +$textarea-min-height: 8em !default; + +%input-textarea { + @extend %input; + + box-shadow: $input-shadow; + max-width: 100%; + width: 100%; + + &[readonly] { + box-shadow: none; + } + + // Colors + @each $name, $pair in $colors { + $color: nth($pair, 1); + + &.is-#{$name} { + border-color: $color; + + &:focus, + &.is-focused, + &:active, + &.is-active { + box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25); + } + } + } + + // Sizes + &.is-small { + @include control-small; + } + + &.is-medium { + @include control-medium; + } + + &.is-large { + @include control-large; + } + + // Modifiers + &.is-fullwidth { + display: block; + width: 100%; + } + + &.is-inline { + display: inline; + width: auto; + } +} + +.input { + @extend %input-textarea; + + &.is-rounded { + border-radius: $radius-rounded; + padding-left: calc(#{$control-padding-horizontal} + 0.375em); + padding-right: calc(#{$control-padding-horizontal} + 0.375em); + } + + &.is-static { + background-color: transparent; + border-color: transparent; + box-shadow: none; + padding-left: 0; + padding-right: 0; + } +} + +.textarea { + @extend %input-textarea; + + display: block; + max-width: 100%; + min-width: 100%; + padding: $textarea-padding; + resize: vertical; + + &:not([rows]) { + max-height: $textarea-max-height; + min-height: $textarea-min-height; + } + + &[rows] { + height: initial; + } + + // Modifiers + &.has-fixed-size { + resize: none; + } +} diff --git a/lib/bulma-scss/form/_select.scss b/lib/bulma-scss/form/_select.scss new file mode 100644 index 0000000000..105580bea7 --- /dev/null +++ b/lib/bulma-scss/form/_select.scss @@ -0,0 +1,150 @@ +.select { + display: inline-block; + max-width: 100%; + position: relative; + vertical-align: top; + + &:not(.is-multiple) { + height: $input-height; + } + + &:not(.is-multiple):not(.is-loading) { + &::after { + @extend %arrow; + + border-color: $input-arrow; + + @include ltr-position(1.125em); + + z-index: 4; + } + } + + &.is-rounded { + select { + border-radius: $radius-rounded; + + @include ltr-property("padding", 1em, false); + } + } + + select { + @extend %input; + + cursor: pointer; + display: block; + font-size: 1em; + max-width: 100%; + outline: none; + + &::-ms-expand { + display: none; + } + + &[disabled]:hover, + fieldset[disabled] &:hover { + border-color: $input-disabled-border-color; + } + + &:not([multiple]) { + @include ltr-property("padding", 2.5em); + } + + &[multiple] { + height: auto; + padding: 0; + + option { + padding: 0.5em 1em; + } + } + } + + // States + &:not(.is-multiple):not(.is-loading):hover { + &::after { + border-color: $input-hover-color; + } + } + + // Colors + @each $name, $pair in $colors { + $color: nth($pair, 1); + + &.is-#{$name} { + &:not(:hover)::after { + border-color: $color; + } + + select { + border-color: $color; + + &:hover, + &.is-hovered { + border-color: bulmaDarken($color, 5%); + } + + &:focus, + &.is-focused, + &:active, + &.is-active { + box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25); + } + } + } + } + + // Sizes + &.is-small { + @include control-small; + } + + &.is-medium { + @include control-medium; + } + + &.is-large { + @include control-large; + } + + // Modifiers + &.is-disabled { + &::after { + border-color: $input-disabled-color; + } + } + + &.is-fullwidth { + width: 100%; + + select { + width: 100%; + } + } + + &.is-loading { + &::after { + @extend %loader; + + margin-top: 0; + position: absolute; + + @include ltr-position(0.625em); + + top: 0.625em; + transform: none; + } + + &.is-small:after { + font-size: $size-small; + } + + &.is-medium:after { + font-size: $size-medium; + } + + &.is-large:after { + font-size: $size-large; + } + } +} diff --git a/lib/bulma-scss/form/_shared.scss b/lib/bulma-scss/form/_shared.scss new file mode 100644 index 0000000000..4e36f874e1 --- /dev/null +++ b/lib/bulma-scss/form/_shared.scss @@ -0,0 +1,69 @@ +$input-color: $text-strong !default; +$input-background-color: $scheme-main !default; +$input-border-color: $border !default; +$input-height: $control-height !default; +$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default; +$input-placeholder-color: bulmaRgba($input-color, 0.3) !default; + +$input-hover-color: $text-strong !default; +$input-hover-border-color: $border-hover !default; + +$input-focus-color: $text-strong !default; +$input-focus-border-color: $link !default; +$input-focus-box-shadow-size: 0 0 0 0.125em !default; +$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default; + +$input-disabled-color: $text-light !default; +$input-disabled-background-color: $background !default; +$input-disabled-border-color: $background !default; +$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default; + +$input-arrow: $link !default; + +$input-icon-color: $border !default; +$input-icon-active-color: $text !default; + +$input-radius: $radius !default; + +@mixin input { + @extend %control; + + background-color: $input-background-color; + border-color: $input-border-color; + border-radius: $input-radius; + color: $input-color; + + @include placeholder { + color: $input-placeholder-color; + } + + + &:hover, + &.is-hovered { + border-color: $input-hover-border-color; + } + + &:focus, + &.is-focused, + &:active, + &.is-active { + border-color: $input-focus-border-color; + box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color; + } + + &[disabled], + fieldset[disabled] & { + background-color: $input-disabled-background-color; + border-color: $input-disabled-border-color; + box-shadow: none; + color: $input-disabled-color; + + @include placeholder { + color: $input-disabled-placeholder-color; + } + } +} + +%input { + @include input; +} diff --git a/lib/bulma-scss/form/_tools.scss b/lib/bulma-scss/form/_tools.scss new file mode 100644 index 0000000000..fb4abafc77 --- /dev/null +++ b/lib/bulma-scss/form/_tools.scss @@ -0,0 +1,358 @@ +$label-color: $text-strong !default; +$label-weight: $weight-bold !default; + +$help-size: $size-small !default; + +.label { + color: $label-color; + display: block; + font-size: $size-normal; + font-weight: $label-weight; + + &:not(:last-child) { + margin-bottom: 0.5em; + } + + // Sizes + &.is-small { + font-size: $size-small; + } + + &.is-medium { + font-size: $size-medium; + } + + &.is-large { + font-size: $size-large; + } +} + +.help { + display: block; + font-size: $help-size; + margin-top: 0.25rem; + + @each $name, $pair in $colors { + $color: nth($pair, 1); + + &.is-#{$name} { + color: $color; + } + } +} + +// Containers + +.field { + &:not(:last-child) { + margin-bottom: 0.75rem; + } + + // Modifiers + &.has-addons { + display: flex; + justify-content: flex-start; + + .control { + &:not(:last-child) { + @include ltr-property("margin", -1px); + } + + &:not(:first-child):not(:last-child) { + .button, + .input, + .select select { + border-radius: 0; + } + } + + &:first-child:not(:only-child) { + .button, + .input, + .select select { + @include ltr { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + + @include rtl { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + } + } + + &:last-child:not(:only-child) { + .button, + .input, + .select select { + @include ltr { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + + @include rtl { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + } + } + + .button, + .input, + .select select { + &:not([disabled]) { + &:hover, + &.is-hovered { + z-index: 2; + } + + &:focus, + &.is-focused, + &:active, + &.is-active { + z-index: 3; + + &:hover { + z-index: 4; + } + } + } + } + + &.is-expanded { + flex-grow: 1; + flex-shrink: 1; + } + } + + &.has-addons-centered { + justify-content: center; + } + + &.has-addons-right { + justify-content: flex-end; + } + + &.has-addons-fullwidth { + .control { + flex-grow: 1; + flex-shrink: 0; + } + } + } + + &.is-grouped { + display: flex; + justify-content: flex-start; + + & > .control { + flex-shrink: 0; + + &:not(:last-child) { + margin-bottom: 0; + + @include ltr-property("margin", 0.75rem); + } + + &.is-expanded { + flex-grow: 1; + flex-shrink: 1; + } + } + + &.is-grouped-centered { + justify-content: center; + } + + &.is-grouped-right { + justify-content: flex-end; + } + + &.is-grouped-multiline { + flex-wrap: wrap; + + & > .control { + &:last-child, + &:not(:last-child) { + margin-bottom: 0.75rem; + } + } + + &:last-child { + margin-bottom: -0.75rem; + } + + &:not(:last-child) { + margin-bottom: 0; + } + } + } + + &.is-horizontal { + @include tablet { + display: flex; + } + } +} + +.field-label { + .label { + font-size: inherit; + } + + @include mobile { + margin-bottom: 0.5rem; + } + + + @include tablet { + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + + @include ltr-property("margin", 1.5rem); + + text-align: right; + + &.is-small { + font-size: $size-small; + padding-top: 0.375em; + } + + &.is-normal { + padding-top: 0.375em; + } + + &.is-medium { + font-size: $size-medium; + padding-top: 0.375em; + } + + &.is-large { + font-size: $size-large; + padding-top: 0.375em; + } + } +} + +.field-body { + .field .field { + margin-bottom: 0; + } + + @include tablet { + display: flex; + flex-basis: 0; + flex-grow: 5; + flex-shrink: 1; + + .field { + margin-bottom: 0; + } + + & > .field { + flex-shrink: 1; + + &:not(.is-narrow) { + flex-grow: 1; + } + + &:not(:last-child) { + @include ltr-property("margin", 0.75rem); + } + } + } +} + +.control { + box-sizing: border-box; + clear: both; + font-size: $size-normal; + position: relative; + text-align: inherit; + + // Modifiers + &.has-icons-left, + &.has-icons-right { + .input, + .select { + &:focus { + & ~ .icon { + color: $input-icon-active-color; + } + } + + &.is-small ~ .icon { + font-size: $size-small; + } + + &.is-medium ~ .icon { + font-size: $size-medium; + } + + &.is-large ~ .icon { + font-size: $size-large; + } + } + + .icon { + color: $input-icon-color; + height: $input-height; + pointer-events: none; + position: absolute; + top: 0; + width: $input-height; + z-index: 4; + } + } + + &.has-icons-left { + .input, + .select select { + padding-left: $input-height; + } + + .icon.is-left { + left: 0; + } + } + + &.has-icons-right { + .input, + .select select { + padding-right: $input-height; + } + + .icon.is-right { + right: 0; + } + } + + &.is-loading { + &::after { + @extend %loader; + + position: absolute !important; + + @include ltr-position(0.625em); + + top: 0.625em; + z-index: 4; + } + + &.is-small:after { + font-size: $size-small; + } + + &.is-medium:after { + font-size: $size-medium; + } + + &.is-large:after { + font-size: $size-large; + } + } +} diff --git a/lib/bulma-scss/grid/_all.scss b/lib/bulma-scss/grid/_all.scss new file mode 100644 index 0000000000..cd1c6b3c8e --- /dev/null +++ b/lib/bulma-scss/grid/_all.scss @@ -0,0 +1,2 @@ +@import "columns"; +@import "tiles"; diff --git a/lib/bulma-scss/grid/_columns.scss b/lib/bulma-scss/grid/_columns.scss new file mode 100644 index 0000000000..3b59de2663 --- /dev/null +++ b/lib/bulma-scss/grid/_columns.scss @@ -0,0 +1,901 @@ +$column-gap: 0.75rem !default; + +.column { + display: block; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + padding: $column-gap; + + .columns.is-mobile > &.is-narrow { + flex: none; + } + + .columns.is-mobile > &.is-full { + flex: none; + width: 100%; + } + + .columns.is-mobile > &.is-three-quarters { + flex: none; + width: 75%; + } + + .columns.is-mobile > &.is-two-thirds { + flex: none; + width: 66.6666%; + } + + .columns.is-mobile > &.is-half { + flex: none; + width: 50%; + } + + .columns.is-mobile > &.is-one-third { + flex: none; + width: 33.3333%; + } + + .columns.is-mobile > &.is-one-quarter { + flex: none; + width: 25%; + } + + .columns.is-mobile > &.is-one-fifth { + flex: none; + width: 20%; + } + + .columns.is-mobile > &.is-two-fifths { + flex: none; + width: 40%; + } + + .columns.is-mobile > &.is-three-fifths { + flex: none; + width: 60%; + } + + .columns.is-mobile > &.is-four-fifths { + flex: none; + width: 80%; + } + + .columns.is-mobile > &.is-offset-three-quarters { + margin-left: 75%; + } + + .columns.is-mobile > &.is-offset-two-thirds { + margin-left: 66.6666%; + } + + .columns.is-mobile > &.is-offset-half { + margin-left: 50%; + } + + .columns.is-mobile > &.is-offset-one-third { + margin-left: 33.3333%; + } + + .columns.is-mobile > &.is-offset-one-quarter { + margin-left: 25%; + } + + .columns.is-mobile > &.is-offset-one-fifth { + margin-left: 20%; + } + + .columns.is-mobile > &.is-offset-two-fifths { + margin-left: 40%; + } + + .columns.is-mobile > &.is-offset-three-fifths { + margin-left: 60%; + } + + .columns.is-mobile > &.is-offset-four-fifths { + margin-left: 80%; + } + + @for $i from 0 through 12 { + .columns.is-mobile > &.is-#{$i} { + flex: none; + width: percentage($i / 12); + } + + .columns.is-mobile > &.is-offset-#{$i} { + margin-left: percentage($i / 12); + } + } + + @include mobile { + &.is-narrow-mobile { + flex: none; + } + + &.is-full-mobile { + flex: none; + width: 100%; + } + + &.is-three-quarters-mobile { + flex: none; + width: 75%; + } + + &.is-two-thirds-mobile { + flex: none; + width: 66.6666%; + } + + &.is-half-mobile { + flex: none; + width: 50%; + } + + &.is-one-third-mobile { + flex: none; + width: 33.3333%; + } + + &.is-one-quarter-mobile { + flex: none; + width: 25%; + } + + &.is-one-fifth-mobile { + flex: none; + width: 20%; + } + + &.is-two-fifths-mobile { + flex: none; + width: 40%; + } + + &.is-three-fifths-mobile { + flex: none; + width: 60%; + } + + &.is-four-fifths-mobile { + flex: none; + width: 80%; + } + + &.is-offset-three-quarters-mobile { + margin-left: 75%; + } + + &.is-offset-two-thirds-mobile { + margin-left: 66.6666%; + } + + &.is-offset-half-mobile { + margin-left: 50%; + } + + &.is-offset-one-third-mobile { + margin-left: 33.3333%; + } + + &.is-offset-one-quarter-mobile { + margin-left: 25%; + } + + &.is-offset-one-fifth-mobile { + margin-left: 20%; + } + + &.is-offset-two-fifths-mobile { + margin-left: 40%; + } + + &.is-offset-three-fifths-mobile { + margin-left: 60%; + } + + &.is-offset-four-fifths-mobile { + margin-left: 80%; + } + + @for $i from 0 through 12 { + &.is-#{$i}-mobile { + flex: none; + width: percentage($i / 12); + } + + &.is-offset-#{$i}-mobile { + margin-left: percentage($i / 12); + } + } + } + + + @include tablet { + &.is-narrow, + &.is-narrow-tablet { + flex: none; + } + + &.is-full, + &.is-full-tablet { + flex: none; + width: 100%; + } + + &.is-three-quarters, + &.is-three-quarters-tablet { + flex: none; + width: 75%; + } + + &.is-two-thirds, + &.is-two-thirds-tablet { + flex: none; + width: 66.6666%; + } + + &.is-half, + &.is-half-tablet { + flex: none; + width: 50%; + } + + &.is-one-third, + &.is-one-third-tablet { + flex: none; + width: 33.3333%; + } + + &.is-one-quarter, + &.is-one-quarter-tablet { + flex: none; + width: 25%; + } + + &.is-one-fifth, + &.is-one-fifth-tablet { + flex: none; + width: 20%; + } + + &.is-two-fifths, + &.is-two-fifths-tablet { + flex: none; + width: 40%; + } + + &.is-three-fifths, + &.is-three-fifths-tablet { + flex: none; + width: 60%; + } + + &.is-four-fifths, + &.is-four-fifths-tablet { + flex: none; + width: 80%; + } + + &.is-offset-three-quarters, + &.is-offset-three-quarters-tablet { + margin-left: 75%; + } + + &.is-offset-two-thirds, + &.is-offset-two-thirds-tablet { + margin-left: 66.6666%; + } + + &.is-offset-half, + &.is-offset-half-tablet { + margin-left: 50%; + } + + &.is-offset-one-third, + &.is-offset-one-third-tablet { + margin-left: 33.3333%; + } + + &.is-offset-one-quarter, + &.is-offset-one-quarter-tablet { + margin-left: 25%; + } + + &.is-offset-one-fifth, + &.is-offset-one-fifth-tablet { + margin-left: 20%; + } + + &.is-offset-two-fifths, + &.is-offset-two-fifths-tablet { + margin-left: 40%; + } + + &.is-offset-three-fifths, + &.is-offset-three-fifths-tablet { + margin-left: 60%; + } + + &.is-offset-four-fifths, + &.is-offset-four-fifths-tablet { + margin-left: 80%; + } + + @for $i from 0 through 12 { + &.is-#{$i}, + &.is-#{$i}-tablet { + flex: none; + width: percentage($i / 12); + } + + &.is-offset-#{$i}, + &.is-offset-#{$i}-tablet { + margin-left: percentage($i / 12); + } + } + } + + + @include touch { + &.is-narrow-touch { + flex: none; + } + + &.is-full-touch { + flex: none; + width: 100%; + } + + &.is-three-quarters-touch { + flex: none; + width: 75%; + } + + &.is-two-thirds-touch { + flex: none; + width: 66.6666%; + } + + &.is-half-touch { + flex: none; + width: 50%; + } + + &.is-one-third-touch { + flex: none; + width: 33.3333%; + } + + &.is-one-quarter-touch { + flex: none; + width: 25%; + } + + &.is-one-fifth-touch { + flex: none; + width: 20%; + } + + &.is-two-fifths-touch { + flex: none; + width: 40%; + } + + &.is-three-fifths-touch { + flex: none; + width: 60%; + } + + &.is-four-fifths-touch { + flex: none; + width: 80%; + } + + &.is-offset-three-quarters-touch { + margin-left: 75%; + } + + &.is-offset-two-thirds-touch { + margin-left: 66.6666%; + } + + &.is-offset-half-touch { + margin-left: 50%; + } + + &.is-offset-one-third-touch { + margin-left: 33.3333%; + } + + &.is-offset-one-quarter-touch { + margin-left: 25%; + } + + &.is-offset-one-fifth-touch { + margin-left: 20%; + } + + &.is-offset-two-fifths-touch { + margin-left: 40%; + } + + &.is-offset-three-fifths-touch { + margin-left: 60%; + } + + &.is-offset-four-fifths-touch { + margin-left: 80%; + } + + @for $i from 0 through 12 { + &.is-#{$i}-touch { + flex: none; + width: percentage($i / 12); + } + + &.is-offset-#{$i}-touch { + margin-left: percentage($i / 12); + } + } + } + + + @include desktop { + &.is-narrow-desktop { + flex: none; + } + + &.is-full-desktop { + flex: none; + width: 100%; + } + + &.is-three-quarters-desktop { + flex: none; + width: 75%; + } + + &.is-two-thirds-desktop { + flex: none; + width: 66.6666%; + } + + &.is-half-desktop { + flex: none; + width: 50%; + } + + &.is-one-third-desktop { + flex: none; + width: 33.3333%; + } + + &.is-one-quarter-desktop { + flex: none; + width: 25%; + } + + &.is-one-fifth-desktop { + flex: none; + width: 20%; + } + + &.is-two-fifths-desktop { + flex: none; + width: 40%; + } + + &.is-three-fifths-desktop { + flex: none; + width: 60%; + } + + &.is-four-fifths-desktop { + flex: none; + width: 80%; + } + + &.is-offset-three-quarters-desktop { + margin-left: 75%; + } + + &.is-offset-two-thirds-desktop { + margin-left: 66.6666%; + } + + &.is-offset-half-desktop { + margin-left: 50%; + } + + &.is-offset-one-third-desktop { + margin-left: 33.3333%; + } + + &.is-offset-one-quarter-desktop { + margin-left: 25%; + } + + &.is-offset-one-fifth-desktop { + margin-left: 20%; + } + + &.is-offset-two-fifths-desktop { + margin-left: 40%; + } + + &.is-offset-three-fifths-desktop { + margin-left: 60%; + } + + &.is-offset-four-fifths-desktop { + margin-left: 80%; + } + + @for $i from 0 through 12 { + &.is-#{$i}-desktop { + flex: none; + width: percentage($i / 12); + } + + &.is-offset-#{$i}-desktop { + margin-left: percentage($i / 12); + } + } + } + + + @include widescreen { + &.is-narrow-widescreen { + flex: none; + } + + &.is-full-widescreen { + flex: none; + width: 100%; + } + + &.is-three-quarters-widescreen { + flex: none; + width: 75%; + } + + &.is-two-thirds-widescreen { + flex: none; + width: 66.6666%; + } + + &.is-half-widescreen { + flex: none; + width: 50%; + } + + &.is-one-third-widescreen { + flex: none; + width: 33.3333%; + } + + &.is-one-quarter-widescreen { + flex: none; + width: 25%; + } + + &.is-one-fifth-widescreen { + flex: none; + width: 20%; + } + + &.is-two-fifths-widescreen { + flex: none; + width: 40%; + } + + &.is-three-fifths-widescreen { + flex: none; + width: 60%; + } + + &.is-four-fifths-widescreen { + flex: none; + width: 80%; + } + + &.is-offset-three-quarters-widescreen { + margin-left: 75%; + } + + &.is-offset-two-thirds-widescreen { + margin-left: 66.6666%; + } + + &.is-offset-half-widescreen { + margin-left: 50%; + } + + &.is-offset-one-third-widescreen { + margin-left: 33.3333%; + } + + &.is-offset-one-quarter-widescreen { + margin-left: 25%; + } + + &.is-offset-one-fifth-widescreen { + margin-left: 20%; + } + + &.is-offset-two-fifths-widescreen { + margin-left: 40%; + } + + &.is-offset-three-fifths-widescreen { + margin-left: 60%; + } + + &.is-offset-four-fifths-widescreen { + margin-left: 80%; + } + + @for $i from 0 through 12 { + &.is-#{$i}-widescreen { + flex: none; + width: percentage($i / 12); + } + + &.is-offset-#{$i}-widescreen { + margin-left: percentage($i / 12); + } + } + } + + + @include fullhd { + &.is-narrow-fullhd { + flex: none; + } + + &.is-full-fullhd { + flex: none; + width: 100%; + } + + &.is-three-quarters-fullhd { + flex: none; + width: 75%; + } + + &.is-two-thirds-fullhd { + flex: none; + width: 66.6666%; + } + + &.is-half-fullhd { + flex: none; + width: 50%; + } + + &.is-one-third-fullhd { + flex: none; + width: 33.3333%; + } + + &.is-one-quarter-fullhd { + flex: none; + width: 25%; + } + + &.is-one-fifth-fullhd { + flex: none; + width: 20%; + } + + &.is-two-fifths-fullhd { + flex: none; + width: 40%; + } + + &.is-three-fifths-fullhd { + flex: none; + width: 60%; + } + + &.is-four-fifths-fullhd { + flex: none; + width: 80%; + } + + &.is-offset-three-quarters-fullhd { + margin-left: 75%; + } + + &.is-offset-two-thirds-fullhd { + margin-left: 66.6666%; + } + + &.is-offset-half-fullhd { + margin-left: 50%; + } + + &.is-offset-one-third-fullhd { + margin-left: 33.3333%; + } + + &.is-offset-one-quarter-fullhd { + margin-left: 25%; + } + + &.is-offset-one-fifth-fullhd { + margin-left: 20%; + } + + &.is-offset-two-fifths-fullhd { + margin-left: 40%; + } + + &.is-offset-three-fifths-fullhd { + margin-left: 60%; + } + + &.is-offset-four-fifths-fullhd { + margin-left: 80%; + } + + @for $i from 0 through 12 { + &.is-#{$i}-fullhd { + flex: none; + width: percentage($i / 12); + } + + &.is-offset-#{$i}-fullhd { + margin-left: percentage($i / 12); + } + } + } +} + +.columns { + margin-left: -$column-gap; + margin-right: -$column-gap; + margin-top: -$column-gap; + + &:last-child { + margin-bottom: -$column-gap; + } + + &:not(:last-child) { + margin-bottom: calc(1.5rem - #{$column-gap}); + } + + // Modifiers + &.is-centered { + justify-content: center; + } + + &.is-gapless { + margin-left: 0; + margin-right: 0; + margin-top: 0; + + & > .column { + margin: 0; + padding: 0 !important; + } + + &:not(:last-child) { + margin-bottom: 1.5rem; + } + + &:last-child { + margin-bottom: 0; + } + } + + &.is-mobile { + display: flex; + } + + &.is-multiline { + flex-wrap: wrap; + } + + &.is-vcentered { + align-items: center; + } + + // Responsiveness + @include tablet { + &:not(.is-desktop) { + display: flex; + } + } + + + @include desktop { + // Modifiers + &.is-desktop { + display: flex; + } + } +} + +@if $variable-columns { + .columns.is-variable { + --columnGap: 0.75rem; + margin-left: calc(-1 * var(--columnGap)); + margin-right: calc(-1 * var(--columnGap)); + + .column { + padding-left: var(--columnGap); + padding-right: var(--columnGap); + } + + @for $i from 0 through 8 { + &.is-#{$i} { + --columnGap: #{$i * 0.25rem}; + } + + @include mobile { + &.is-#{$i}-mobile { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include tablet { + &.is-#{$i}-tablet { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include tablet-only { + &.is-#{$i}-tablet-only { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include touch { + &.is-#{$i}-touch { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include desktop { + &.is-#{$i}-desktop { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include desktop-only { + &.is-#{$i}-desktop-only { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include widescreen { + &.is-#{$i}-widescreen { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include widescreen-only { + &.is-#{$i}-widescreen-only { + --columnGap: #{$i * 0.25rem}; + } + } + + + @include fullhd { + &.is-#{$i}-fullhd { + --columnGap: #{$i * 0.25rem}; + } + } + } + } +} diff --git a/lib/bulma-scss/grid/_tiles.scss b/lib/bulma-scss/grid/_tiles.scss new file mode 100644 index 0000000000..962c124e91 --- /dev/null +++ b/lib/bulma-scss/grid/_tiles.scss @@ -0,0 +1,55 @@ +$tile-spacing: 0.75rem !default; + +.tile { + align-items: stretch; + display: block; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + min-height: min-content; + + // Modifiers + &.is-ancestor { + margin-left: $tile-spacing * -1; + margin-right: $tile-spacing * -1; + margin-top: $tile-spacing * -1; + + &:last-child { + margin-bottom: $tile-spacing * -1; + } + + &:not(:last-child) { + margin-bottom: $tile-spacing; + } + } + + &.is-child { + margin: 0 !important; + } + + &.is-parent { + padding: $tile-spacing; + } + + &.is-vertical { + flex-direction: column; + + & > .tile.is-child:not(:last-child) { + margin-bottom: 1.5rem !important; + } + } + + // Responsiveness + @include tablet { + &:not(.is-child) { + display: flex; + } + + @for $i from 1 through 12 { + &.is-#{$i} { + flex: none; + width: $i / 12 * 100%; + } + } + } +} diff --git a/lib/bulma-scss/helpers/_all.scss b/lib/bulma-scss/helpers/_all.scss new file mode 100644 index 0000000000..9831f49214 --- /dev/null +++ b/lib/bulma-scss/helpers/_all.scss @@ -0,0 +1,8 @@ +@import "color"; +@import "float"; +@import "other"; +@import "overflow"; +@import "position"; +@import "spacing"; +@import "typography"; +@import "visibility"; diff --git a/lib/bulma-scss/helpers/_color.scss b/lib/bulma-scss/helpers/_color.scss new file mode 100644 index 0000000000..557119700e --- /dev/null +++ b/lib/bulma-scss/helpers/_color.scss @@ -0,0 +1,65 @@ +@each $name, $pair in $colors { + $color: nth($pair, 1); + + .has-text-#{$name} { + color: $color !important; + } + + a.has-text-#{$name} { + &:hover, + &:focus { + color: bulmaDarken($color, 10%) !important; + } + } + + .has-background-#{$name} { + background-color: $color !important; + } + + @if length($pair) >= 4 { + $color-light: nth($pair, 3); + $color-dark: nth($pair, 4); + + // Light + .has-text-#{$name}-light { + color: $color-light !important; + } + + a.has-text-#{$name}-light { + &:hover, + &:focus { + color: bulmaDarken($color-light, 10%) !important; + } + } + + .has-background-#{$name}-light { + background-color: $color-light !important; + } + + // Dark + .has-text-#{$name}-dark { + color: $color-dark !important; + } + + a.has-text-#{$name}-dark { + &:hover, + &:focus { + color: bulmaLighten($color-dark, 10%) !important; + } + } + + .has-background-#{$name}-dark { + background-color: $color-dark !important; + } + } +} + +@each $name, $shade in $shades { + .has-text-#{$name} { + color: $shade !important; + } + + .has-background-#{$name} { + background-color: $shade !important; + } +} diff --git a/lib/bulma-scss/helpers/_float.scss b/lib/bulma-scss/helpers/_float.scss new file mode 100644 index 0000000000..878262a30f --- /dev/null +++ b/lib/bulma-scss/helpers/_float.scss @@ -0,0 +1,11 @@ +.is-clearfix { + @include clearfix; +} + +.is-pulled-left { + float: left !important; +} + +.is-pulled-right { + float: right !important; +} diff --git a/lib/bulma-scss/helpers/_other.scss b/lib/bulma-scss/helpers/_other.scss new file mode 100644 index 0000000000..94e4222c9b --- /dev/null +++ b/lib/bulma-scss/helpers/_other.scss @@ -0,0 +1,11 @@ +.is-radiusless { + border-radius: 0 !important; +} + +.is-shadowless { + box-shadow: none !important; +} + +.is-unselectable { + @extend %unselectable; +} diff --git a/lib/bulma-scss/helpers/_overflow.scss b/lib/bulma-scss/helpers/_overflow.scss new file mode 100644 index 0000000000..e8984804c2 --- /dev/null +++ b/lib/bulma-scss/helpers/_overflow.scss @@ -0,0 +1,3 @@ +.is-clipped { + overflow: hidden !important; +} diff --git a/lib/bulma-scss/helpers/_position.scss b/lib/bulma-scss/helpers/_position.scss new file mode 100644 index 0000000000..608f4f834a --- /dev/null +++ b/lib/bulma-scss/helpers/_position.scss @@ -0,0 +1,7 @@ +.is-overlay { + @extend %overlay; +} + +.is-relative { + position: relative !important; +} diff --git a/lib/bulma-scss/helpers/_spacing.scss b/lib/bulma-scss/helpers/_spacing.scss new file mode 100644 index 0000000000..e5819bcb33 --- /dev/null +++ b/lib/bulma-scss/helpers/_spacing.scss @@ -0,0 +1,40 @@ +.is-marginless { + margin: 0 !important; +} + +.is-paddingless { + padding: 0 !important; +} + +$spacing-shortcuts: ("margin": "m", "padding": "p") !default; +$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default; +$spacing-horizontal: "x" !default; +$spacing-vertical: "y" !default; +$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default; + +@each $property, $shortcut in $spacing-shortcuts { + @each $name, $value in $spacing-values { + // Cardinal directions + @each $direction, $suffix in $spacing-directions { + .#{$shortcut}#{$suffix}-#{$name} { + #{$property}-#{$direction}: $value !important; + } + } + + // Horizontal axis + @if $spacing-horizontal != null { + .#{$shortcut}#{$spacing-horizontal}-#{$name} { + #{$property}-left: $value !important; + #{$property}-right: $value !important; + } + } + + // Vertical axis + @if $spacing-vertical != null { + .#{$shortcut}#{$spacing-vertical}-#{$name} { + #{$property}-top: $value !important; + #{$property}-bottom: $value !important; + } + } + } +} diff --git a/lib/bulma-scss/helpers/_typography.scss b/lib/bulma-scss/helpers/_typography.scss new file mode 100644 index 0000000000..49cc0e27e2 --- /dev/null +++ b/lib/bulma-scss/helpers/_typography.scss @@ -0,0 +1,169 @@ +@mixin typography-size($target: "") { + @each $size in $sizes { + $i: index($sizes, $size); + + .is-size-#{$i}#{if($target == "", "", "-" + $target)} { + font-size: $size !important; + } + } +} + +@include typography-size; + +@include mobile { + @include typography-size("mobile"); +} + + +@include tablet { + @include typography-size("tablet"); +} + + +@include touch { + @include typography-size("touch"); +} + + +@include desktop { + @include typography-size("desktop"); +} + + +@include widescreen { + @include typography-size("widescreen"); +} + + +@include fullhd { + @include typography-size("fullhd"); +} + + +$alignments: ("centered": "center", "justified": "justify", "left": "left", "right": "right"); + +@each $alignment, $text-align in $alignments { + .has-text-#{$alignment} { + text-align: #{$text-align} !important; + } +} + +@each $alignment, $text-align in $alignments { + @include mobile { + .has-text-#{$alignment}-mobile { + text-align: #{$text-align} !important; + } + } + + + @include tablet { + .has-text-#{$alignment}-tablet { + text-align: #{$text-align} !important; + } + } + + + @include tablet-only { + .has-text-#{$alignment}-tablet-only { + text-align: #{$text-align} !important; + } + } + + + @include touch { + .has-text-#{$alignment}-touch { + text-align: #{$text-align} !important; + } + } + + + @include desktop { + .has-text-#{$alignment}-desktop { + text-align: #{$text-align} !important; + } + } + + + @include desktop-only { + .has-text-#{$alignment}-desktop-only { + text-align: #{$text-align} !important; + } + } + + + @include widescreen { + .has-text-#{$alignment}-widescreen { + text-align: #{$text-align} !important; + } + } + + + @include widescreen-only { + .has-text-#{$alignment}-widescreen-only { + text-align: #{$text-align} !important; + } + } + + + @include fullhd { + .has-text-#{$alignment}-fullhd { + text-align: #{$text-align} !important; + } + } +} + +.is-capitalized { + text-transform: capitalize !important; +} + +.is-lowercase { + text-transform: lowercase !important; +} + +.is-uppercase { + text-transform: uppercase !important; +} + +.is-italic { + font-style: italic !important; +} + +.has-text-weight-light { + font-weight: $weight-light !important; +} + +.has-text-weight-normal { + font-weight: $weight-normal !important; +} + +.has-text-weight-medium { + font-weight: $weight-medium !important; +} + +.has-text-weight-semibold { + font-weight: $weight-semibold !important; +} + +.has-text-weight-bold { + font-weight: $weight-bold !important; +} + +.is-family-primary { + font-family: $family-primary !important; +} + +.is-family-secondary { + font-family: $family-secondary !important; +} + +.is-family-sans-serif { + font-family: $family-sans-serif !important; +} + +.is-family-monospace { + font-family: $family-monospace !important; +} + +.is-family-code { + font-family: $family-code !important; +} diff --git a/lib/bulma-scss/helpers/_visibility.scss b/lib/bulma-scss/helpers/_visibility.scss new file mode 100644 index 0000000000..4b3f912626 --- /dev/null +++ b/lib/bulma-scss/helpers/_visibility.scss @@ -0,0 +1,213 @@ +$displays: "block" "flex" "inline" "inline-block" "inline-flex"; + +@each $display in $displays { + .is-#{$display} { + display: #{$display} !important; + } + + @include mobile { + .is-#{$display}-mobile { + display: #{$display} !important; + } + } + + + @include tablet { + .is-#{$display}-tablet { + display: #{$display} !important; + } + } + + + @include tablet-only { + .is-#{$display}-tablet-only { + display: #{$display} !important; + } + } + + + @include touch { + .is-#{$display}-touch { + display: #{$display} !important; + } + } + + + @include desktop { + .is-#{$display}-desktop { + display: #{$display} !important; + } + } + + + @include desktop-only { + .is-#{$display}-desktop-only { + display: #{$display} !important; + } + } + + + @include widescreen { + .is-#{$display}-widescreen { + display: #{$display} !important; + } + } + + + @include widescreen-only { + .is-#{$display}-widescreen-only { + display: #{$display} !important; + } + } + + + @include fullhd { + .is-#{$display}-fullhd { + display: #{$display} !important; + } + } +} + +.is-hidden { + display: none !important; +} + +.is-sr-only { + border: none !important; + clip: rect(0, 0, 0, 0) !important; + height: 0.01em !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + white-space: nowrap !important; + width: 0.01em !important; +} + +@include mobile { + .is-hidden-mobile { + display: none !important; + } +} + + +@include tablet { + .is-hidden-tablet { + display: none !important; + } +} + + +@include tablet-only { + .is-hidden-tablet-only { + display: none !important; + } +} + + +@include touch { + .is-hidden-touch { + display: none !important; + } +} + + +@include desktop { + .is-hidden-desktop { + display: none !important; + } +} + + +@include desktop-only { + .is-hidden-desktop-only { + display: none !important; + } +} + + +@include widescreen { + .is-hidden-widescreen { + display: none !important; + } +} + + +@include widescreen-only { + .is-hidden-widescreen-only { + display: none !important; + } +} + + +@include fullhd { + .is-hidden-fullhd { + display: none !important; + } +} + + +.is-invisible { + visibility: hidden !important; +} + +@include mobile { + .is-invisible-mobile { + visibility: hidden !important; + } +} + + +@include tablet { + .is-invisible-tablet { + visibility: hidden !important; + } +} + + +@include tablet-only { + .is-invisible-tablet-only { + visibility: hidden !important; + } +} + + +@include touch { + .is-invisible-touch { + visibility: hidden !important; + } +} + + +@include desktop { + .is-invisible-desktop { + visibility: hidden !important; + } +} + + +@include desktop-only { + .is-invisible-desktop-only { + visibility: hidden !important; + } +} + + +@include widescreen { + .is-invisible-widescreen { + visibility: hidden !important; + } +} + + +@include widescreen-only { + .is-invisible-widescreen-only { + visibility: hidden !important; + } +} + + +@include fullhd { + .is-invisible-fullhd { + visibility: hidden !important; + } +} diff --git a/lib/bulma-scss/layout/_all.scss b/lib/bulma-scss/layout/_all.scss new file mode 100644 index 0000000000..253d448c9b --- /dev/null +++ b/lib/bulma-scss/layout/_all.scss @@ -0,0 +1,3 @@ +@import "hero"; +@import "section"; +@import "footer"; diff --git a/lib/bulma-scss/layout/_footer.scss b/lib/bulma-scss/layout/_footer.scss new file mode 100644 index 0000000000..e49a627633 --- /dev/null +++ b/lib/bulma-scss/layout/_footer.scss @@ -0,0 +1,12 @@ +$footer-background-color: $scheme-main-bis !default; +$footer-color: false !default; +$footer-padding: 3rem 1.5rem 6rem !default; + +.footer { + background-color: $footer-background-color; + padding: $footer-padding; + + @if $footer-color { + color: $footer-color; + } +} diff --git a/lib/bulma-scss/layout/_hero.scss b/lib/bulma-scss/layout/_hero.scss new file mode 100644 index 0000000000..05dc084bd0 --- /dev/null +++ b/lib/bulma-scss/layout/_hero.scss @@ -0,0 +1,235 @@ +$hero-body-padding: 3rem 1.5rem !default; +$hero-body-padding-small: 1.5rem !default; +$hero-body-padding-medium: 9rem 1.5rem !default; +$hero-body-padding-large: 18rem 1.5rem !default; + +// Main container +.hero { + align-items: stretch; + display: flex; + flex-direction: column; + justify-content: space-between; + + .navbar { + background: none; + } + + .tabs { + ul { + border-bottom: none; + } + } + + // Colors + @each $name, $pair in $colors { + $color: nth($pair, 1); + $color-invert: nth($pair, 2); + + &.is-#{$name} { + background-color: $color; + color: $color-invert; + + a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), + strong { + color: inherit; + } + + .title { + color: $color-invert; + } + + .subtitle { + color: bulmaRgba($color-invert, 0.9); + + a:not(.button), + strong { + color: $color-invert; + } + } + + .navbar-menu { + @include touch { + background-color: $color; + } + } + + .navbar-item, + .navbar-link { + color: bulmaRgba($color-invert, 0.7); + } + + a.navbar-item, + .navbar-link { + &:hover, + &.is-active { + background-color: bulmaDarken($color, 5%); + color: $color-invert; + } + } + + .tabs { + a { + color: $color-invert; + opacity: 0.9; + + &:hover { + opacity: 1; + } + } + + li { + &.is-active a { + opacity: 1; + } + } + + &.is-boxed, + &.is-toggle { + a { + color: $color-invert; + + &:hover { + background-color: bulmaRgba($scheme-invert, 0.1); + } + } + + li.is-active a { + &, + &:hover { + background-color: $color-invert; + border-color: $color-invert; + color: $color; + } + } + } + } + + // Modifiers + @if type-of($color) == "color" { + &.is-bold { + $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%); + $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%); + + background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%); + + @include mobile { + .navbar-menu { + background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%); + } + } + } + } + } + } + + // Sizes + &.is-small { + .hero-body { + padding: $hero-body-padding-small; + } + } + + &.is-medium { + @include tablet { + .hero-body { + padding: $hero-body-padding-medium; + } + } + } + + &.is-large { + @include tablet { + .hero-body { + padding: $hero-body-padding-large; + } + } + } + + &.is-halfheight, + &.is-fullheight, + &.is-fullheight-with-navbar { + .hero-body { + align-items: center; + display: flex; + + & > .container { + flex-grow: 1; + flex-shrink: 1; + } + } + } + + &.is-halfheight { + min-height: 50vh; + } + + &.is-fullheight { + min-height: 100vh; + } +} + +// Components + +.hero-video { + @extend %overlay; + + overflow: hidden; + + video { + left: 50%; + min-height: 100%; + min-width: 100%; + position: absolute; + top: 50%; + transform: translate3d(-50%, -50%, 0); + } + + // Modifiers + &.is-transparent { + opacity: 0.3; + } + + // Responsiveness + @include mobile { + display: none; + } +} + +.hero-buttons { + margin-top: 1.5rem; + + // Responsiveness + @include mobile { + .button { + display: flex; + + &:not(:last-child) { + margin-bottom: 0.75rem; + } + } + } + + + @include tablet { + display: flex; + justify-content: center; + + .button:not(:last-child) { + @include ltr-property("margin", 1.5rem); + } + } +} + +// Containers + +.hero-head, +.hero-foot { + flex-grow: 0; + flex-shrink: 0; +} + +.hero-body { + flex-grow: 1; + flex-shrink: 0; + padding: $hero-body-padding; +} diff --git a/lib/bulma-scss/layout/_section.scss b/lib/bulma-scss/layout/_section.scss new file mode 100644 index 0000000000..dc28c4865b --- /dev/null +++ b/lib/bulma-scss/layout/_section.scss @@ -0,0 +1,19 @@ +$section-padding: 3rem 1.5rem !default; +$section-padding-medium: 9rem 1.5rem !default; +$section-padding-large: 18rem 1.5rem !default; + +.section { + padding: $section-padding; + + // Responsiveness + @include desktop { + // Sizes + &.is-medium { + padding: $section-padding-medium; + } + + &.is-large { + padding: $section-padding-large; + } + } +} diff --git a/lib/bulma-scss/package.json b/lib/bulma-scss/package.json new file mode 100644 index 0000000000..4b54bf2a38 --- /dev/null +++ b/lib/bulma-scss/package.json @@ -0,0 +1,25 @@ +{ + "name": "bulma-scss", + "version": "0.9.0-1", + "description": "The Bulma CSS Framework files converted to SCSS syntax", + "main": "bulma.scss", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/j1mc/bulma-scss.git" + }, + "keywords": [ + "bulma", + "css", + "scss", + "flexbox" + ], + "author": "Jim Campbell", + "license": "MIT", + "bugs": { + "url": "https://github.com/j1mc/bulma-scss/issues" + }, + "homepage": "https://github.com/j1mc/bulma-scss#readme" +} diff --git a/lib/bulma-scss/utilities/_all.scss b/lib/bulma-scss/utilities/_all.scss new file mode 100644 index 0000000000..5e3b143c28 --- /dev/null +++ b/lib/bulma-scss/utilities/_all.scss @@ -0,0 +1,6 @@ +@import "initial-variables"; +@import "functions"; +@import "derived-variables.scss"; +@import "animations"; +@import "mixins"; +@import "controls"; diff --git a/lib/bulma-scss/utilities/_animations.scss b/lib/bulma-scss/utilities/_animations.scss new file mode 100644 index 0000000000..4849c5a4cf --- /dev/null +++ b/lib/bulma-scss/utilities/_animations.scss @@ -0,0 +1,9 @@ +@keyframes spinAround { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(359deg); + } +} diff --git a/lib/bulma-scss/utilities/_controls.scss b/lib/bulma-scss/utilities/_controls.scss new file mode 100644 index 0000000000..b615f764e7 --- /dev/null +++ b/lib/bulma-scss/utilities/_controls.scss @@ -0,0 +1,61 @@ +$control-radius: $radius !default; +$control-radius-small: $radius-small !default; + +$control-border-width: 1px !default; + +$control-height: 2.5em !default; +$control-line-height: 1.5 !default; + +$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default; +$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default; + +@mixin control { + -moz-appearance: none; + -webkit-appearance: none; + align-items: center; + border: $control-border-width solid transparent; + border-radius: $control-radius; + box-shadow: none; + display: inline-flex; + font-size: $size-normal; + height: $control-height; + justify-content: flex-start; + line-height: $control-line-height; + padding-bottom: $control-padding-vertical; + padding-left: $control-padding-horizontal; + padding-right: $control-padding-horizontal; + padding-top: $control-padding-vertical; + position: relative; + vertical-align: top; + + // States + &:focus, + &.is-focused, + &:active, + &.is-active { + outline: none; + } + + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + } +} + +%control { + @include control; +} + +// The controls sizes use mixins so they can be used at different breakpoints +@mixin control-small { + border-radius: $control-radius-small; + font-size: $size-small; +} + +@mixin control-medium { + font-size: $size-medium; +} + +@mixin control-large { + font-size: $size-large; +} diff --git a/lib/bulma-scss/utilities/_derived-variables.scss b/lib/bulma-scss/utilities/_derived-variables.scss new file mode 100644 index 0000000000..54a03585d5 --- /dev/null +++ b/lib/bulma-scss/utilities/_derived-variables.scss @@ -0,0 +1,132 @@ +$primary: $turquoise !default; + +$info : $cyan !default; +$success: $green !default; +$warning: $yellow !default; +$danger : $red !default; + +$light : $white-ter !default; +$dark : $grey-darker !default; + +// Invert colors + +$orange-invert : findColorInvert($orange) !default; +$yellow-invert : findColorInvert($yellow) !default; +$green-invert : findColorInvert($green) !default; +$turquoise-invert: findColorInvert($turquoise) !default; +$cyan-invert : findColorInvert($cyan) !default; +$blue-invert : findColorInvert($blue) !default; +$purple-invert : findColorInvert($purple) !default; +$red-invert : findColorInvert($red) !default; + +$primary-invert : findColorInvert($primary) !default; +$primary-light : findLightColor($primary) !default; +$primary-dark : findDarkColor($primary) !default; +$info-invert : findColorInvert($info) !default; +$info-light : findLightColor($info) !default; +$info-dark : findDarkColor($info) !default; +$success-invert : findColorInvert($success) !default; +$success-light : findLightColor($success) !default; +$success-dark : findDarkColor($success) !default; +$warning-invert : findColorInvert($warning) !default; +$warning-light : findLightColor($warning) !default; +$warning-dark : findDarkColor($warning) !default; +$danger-invert : findColorInvert($danger) !default; +$danger-light : findLightColor($danger) !default; +$danger-dark : findDarkColor($danger) !default; +$light-invert : findColorInvert($light) !default; +$dark-invert : findColorInvert($dark) !default; + +// General colors + +$scheme-main : $white !default; +$scheme-main-bis : $white-bis !default; +$scheme-main-ter : $white-ter !default; +$scheme-invert : $black !default; +$scheme-invert-bis : $black-bis !default; +$scheme-invert-ter : $black-ter !default; + +$background : $white-ter !default; + +$border : $grey-lighter !default; +$border-hover : $grey-light !default; +$border-light : $grey-lightest !default; +$border-light-hover: $grey-light !default; + +// Text colors + +$text : $grey-dark !default; +$text-invert: findColorInvert($text) !default; +$text-light : $grey !default; +$text-strong: $grey-darker !default; + +// Code colors + +$code : $red !default; +$code-background: $background !default; + +$pre : $text !default; +$pre-background : $background !default; + +// Link colors + +$link : $blue !default; +$link-invert : findColorInvert($link) !default; +$link-light : findLightColor($link) !default; +$link-dark : findDarkColor($link) !default; +$link-visited : $purple !default; + +$link-hover : $grey-darker !default; +$link-hover-border : $grey-light !default; + +$link-focus : $grey-darker !default; +$link-focus-border : $blue !default; + +$link-active : $grey-darker !default; +$link-active-border: $grey-dark !default; + +// Typography + +$family-primary : $family-sans-serif !default; +$family-secondary: $family-sans-serif !default; +$family-code : $family-monospace !default; + +$size-small : $size-7 !default; +$size-normal: $size-6 !default; +$size-medium: $size-5 !default; +$size-large : $size-4 !default; + +// Lists and maps +$custom-colors: null !default; +$custom-shades: null !default; + +$colors: mergeColorMaps( +( + "white" : ($white, $black), + "black" : ($black, $white), + "light" : ($light, $light-invert), + "dark" : ($dark, $dark-invert), + "primary": ($primary, $primary-invert, $primary-light, $primary-dark), + "link" : ($link, $link-invert, $link-light, $link-dark), + "info" : ($info, $info-invert, $info-light, $info-dark), + "success": ($success, $success-invert, $success-light, $success-dark), + "warning": ($warning, $warning-invert, $warning-light, $warning-dark), + "danger" : ($danger, $danger-invert, $danger-light, $danger-dark)), + $custom-colors +) !default; + +$shades: mergeColorMaps( +( + "black-bis" : $black-bis, + "black-ter" : $black-ter, + "grey-darker" : $grey-darker, + "grey-dark" : $grey-dark, + "grey" : $grey, + "grey-light" : $grey-light, + "grey-lighter": $grey-lighter, + "white-ter" : $white-ter, + "white-bis" : $white-bis), + $custom-shades +) !default; + +$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default; diff --git a/lib/bulma-scss/utilities/_functions.scss b/lib/bulma-scss/utilities/_functions.scss new file mode 100644 index 0000000000..3724df3133 --- /dev/null +++ b/lib/bulma-scss/utilities/_functions.scss @@ -0,0 +1,167 @@ +@function mergeColorMaps($bulma-colors, $custom-colors) { + // We return at least Bulma's hard-coded colors + $merged-colors: $bulma-colors; + + // We want a map as input + @if type-of($custom-colors) == "map" { + @each $name, $components in $custom-colors { + // The color name should be a string + // and the components either a single color + // or a colors list with at least one element + @if type-of($name) == "string" and (type-of($components) == "list" or type-of($components) == "color") and length($components) >= 1 { + $color-base: null; + $color-invert: null; + $color-light: null; + $color-dark: null; + $value: null; + + // The param can either be a single color + // or a list of 2 colors + @if type-of($components) == "color" { + $color-base: $components; + $color-invert: findColorInvert($color-base); + $color-light: findLightColor($color-base); + $color-dark: findDarkColor($color-base); + } + @else if type-of($components) == "list" { + $color-base: nth($components, 1); + + // If Invert, Light and Dark are provided + @if length($components) > 3 { + $color-invert: nth($components, 2); + $color-light: nth($components, 3); + $color-dark: nth($components, 4); + + // If only Invert and Light are provided + } + @else if length($components) > 2 { + $color-invert: nth($components, 2); + $color-light: nth($components, 3); + $color-dark: findDarkColor($color-base); + + // If only Invert is provided + } + @else { + $color-invert: nth($components, 2); + $color-light: findLightColor($color-base); + $color-dark: findDarkColor($color-base); + } + } + + $value: $color-base, $color-invert, $color-light, $color-dark; + + // We only want to merge the map if the color base is an actual color + @if type-of($color-base) == "color" { + // We merge this colors elements as map with Bulma's colors map + // (we can override them this way, no multiple definition for the same name) + // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark))) + $merged-colors: map_merge($merged-colors, ($name: $value)); + } + } + } + } + + @return $merged-colors; +} + +@function powerNumber($number, $exp) { + $value: 1; + + @if $exp > 0 { + @for $i from 1 through $exp { + $value: $value * $number; + } + } + @else if $exp < 0 { + @for $i from 1 through -$exp { + $value: $value / $number; + } + } + + @return $value; +} + +@function colorLuminance($color) { + @if type-of($color) != "color" { + @return 0.55; + } + + $color-rgb: ("red": red($color), "green": green($color), "blue": blue($color)); + + @each $name, $value in $color-rgb { + $adjusted: 0; + $value: $value / 255; + + @if $value < 0.03928 { + $value: $value / 12.92; + } + @else { + $value: ($value + 0.055) / 1.055; + $value: powerNumber($value, 2); + } + + $color-rgb: map-merge($color-rgb, ($name: $value)); + } + + @return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") * 0.7152 + map-get($color-rgb, "blue") * 0.0722; +} + +@function findColorInvert($color) { + @if colorLuminance($color) > 0.55 { + @return rgba(#000, 0.7); + } + @else { + @return #fff; + } +} + +@function findLightColor($color) { + @if type-of($color) == "color" { + $l: 96%; + + @if lightness($color) > 96% { + $l: lightness($color); + } + + @return change-color($color, $lightness: $l); + } + + @return $background; +} + +@function findDarkColor($color) { + @if type-of($color) == "color" { + $base-l: 29%; + $luminance: colorLuminance($color); + $luminance-delta: 0.53 - $luminance; + $target-l: round($base-l + $luminance-delta * 53); + + @return change-color($color, $lightness: max($base-l, $target-l)); + } + + @return $text-strong; +} + +@function bulmaRgba($color, $alpha) { + @if type-of($color) != "color" { + @return $color; + } + + @return rgba($color, $alpha); +} + +@function bulmaDarken($color, $amount) { + @if type-of($color) != "color" { + @return $color; + } + + @return darken($color, $amount); +} + +@function bulmaLighten($color, $amount) { + @if type-of($color) != "color" { + @return $color; + } + + @return lighten($color, $amount); +} diff --git a/lib/bulma-scss/utilities/_initial-variables.scss b/lib/bulma-scss/utilities/_initial-variables.scss new file mode 100644 index 0000000000..9af866ade8 --- /dev/null +++ b/lib/bulma-scss/utilities/_initial-variables.scss @@ -0,0 +1,82 @@ +// Colors + +$black: hsl(0, 0%, 4%) !default; +$black-bis: hsl(0, 0%, 7%) !default; +$black-ter: hsl(0, 0%, 14%) !default; + +$grey-darker: hsl(0, 0%, 21%) !default; +$grey-dark: hsl(0, 0%, 29%) !default; +$grey: hsl(0, 0%, 48%) !default; +$grey-light: hsl(0, 0%, 71%) !default; +$grey-lighter: hsl(0, 0%, 86%) !default; +$grey-lightest: hsl(0, 0%, 93%) !default; + +$white-ter: hsl(0, 0%, 96%) !default; +$white-bis: hsl(0, 0%, 98%) !default; +$white: hsl(0, 0%, 100%) !default; + +$orange: hsl(14, 100%, 53%) !default; +$yellow: hsl(48, 100%, 67%) !default; +$green: hsl(141, 53%, 53%) !default; +$turquoise: hsl(171, 100%, 41%) !default; +$cyan: hsl(204, 71%, 53%) !default; +$blue: hsl(217, 71%, 53%) !default; +$purple: hsl(271, 100%, 71%) !default; +$red: hsl(348, 86%, 61%) !default; + +// Typography + +$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default; +$family-monospace: monospace !default; +$render-mode: optimizeLegibility !default; + +$size-1: 3rem !default; +$size-2: 2.5rem !default; +$size-3: 2rem !default; +$size-4: 1.5rem !default; +$size-5: 1.25rem !default; +$size-6: 1rem !default; +$size-7: 0.75rem !default; + +$weight-light: 300 !default; +$weight-normal: 400 !default; +$weight-medium: 500 !default; +$weight-semibold: 600 !default; +$weight-bold: 700 !default; + +// Spacing + +$block-spacing: 1.5rem !default; + +// Responsiveness + +// The container horizontal gap, which acts as the offset for breakpoints +$gap: 32px !default; + +// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16 +$tablet: 769px !default; + +// 960px container + 4rem +$desktop: 960px + 2 * $gap !default; + +// 1152px container + 4rem +$widescreen: 1152px + 2 * $gap !default; +$widescreen-enabled: true !default; + +// 1344px container + 4rem +$fullhd: 1344px + 2 * $gap !default; +$fullhd-enabled: true !default; + +// Miscellaneous + +$easing: ease-out !default; +$radius-small: 2px !default; +$radius: 4px !default; +$radius-large: 6px !default; +$radius-rounded: 290486px !default; +$speed: 86ms !default; + +// Flags + +$variable-columns: true !default; +$rtl: false !default; diff --git a/lib/bulma-scss/utilities/_mixins.scss b/lib/bulma-scss/utilities/_mixins.scss new file mode 100644 index 0000000000..b1bca0be07 --- /dev/null +++ b/lib/bulma-scss/utilities/_mixins.scss @@ -0,0 +1,390 @@ +@import "initial-variables"; + +@mixin clearfix { + &::after { + clear: both; + content: " "; + display: table; + } +} + +@mixin center($width, $height: 0) { + position: absolute; + + @if $height != 0 { + left: calc(50% - (#{$width} / 2)); + top: calc(50% - (#{$height} / 2)); + } + @else { + left: calc(50% - (#{$width} / 2)); + top: calc(50% - (#{$width} / 2)); + } +} + +@mixin fa($size, $dimensions) { + display: inline-block; + font-size: $size; + height: $dimensions; + line-height: $dimensions; + text-align: center; + vertical-align: top; + width: $dimensions; +} + +@mixin hamburger($dimensions) { + cursor: pointer; + display: block; + height: $dimensions; + position: relative; + width: $dimensions; + + span { + background-color: currentColor; + display: block; + height: 1px; + left: calc(50% - 8px); + position: absolute; + transform-origin: center; + transition-duration: $speed; + transition-property: background-color, opacity, transform; + transition-timing-function: $easing; + width: 16px; + + &:nth-child(1) { + top: calc(50% - 6px); + } + + &:nth-child(2) { + top: calc(50% - 1px); + } + + &:nth-child(3) { + top: calc(50% + 4px); + } + } + + &:hover { + background-color: bulmaRgba(black, 0.05); + } + + // Modifers + &.is-active { + span { + &:nth-child(1) { + transform: translateY(5px) rotate(45deg); + } + + &:nth-child(2) { + opacity: 0; + } + + &:nth-child(3) { + transform: translateY(-5px) rotate(-45deg); + } + } + } +} + +@mixin overflow-touch { + -webkit-overflow-scrolling: touch; +} + +@mixin placeholder { + $placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input"; + + @each $placeholder in $placeholders { + &:#{$placeholder}-placeholder { + @content; + } + } +} + +// Responsiveness + +@mixin from($device) { + @media screen and (min-width: $device) { + @content; + } +} + +@mixin until($device) { + @media screen and (max-width: $device - 1px) { + @content; + } +} + +@mixin mobile { + @media screen and (max-width: $tablet - 1px) { + @content; + } +} + +@mixin tablet { + @media screen and (min-width: $tablet), print { + @content; + } +} + +@mixin tablet-only { + @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) { + @content; + } +} + +@mixin touch { + @media screen and (max-width: $desktop - 1px) { + @content; + } +} + +@mixin desktop { + @media screen and (min-width: $desktop) { + @content; + } +} + +@mixin desktop-only { + @if $widescreen-enabled { + @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) { + @content; + } + } +} + +@mixin until-widescreen { + @if $widescreen-enabled { + @media screen and (max-width: $widescreen - 1px) { + @content; + } + } +} + +@mixin widescreen { + @if $widescreen-enabled { + @media screen and (min-width: $widescreen) { + @content; + } + } +} + +@mixin widescreen-only { + @if $widescreen-enabled and $fullhd-enabled { + @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) { + @content; + } + } +} + +@mixin until-fullhd { + @if $fullhd-enabled { + @media screen and (max-width: $fullhd - 1px) { + @content; + } + } +} + +@mixin fullhd { + @if $fullhd-enabled { + @media screen and (min-width: $fullhd) { + @content; + } + } +} + +@mixin ltr { + @if not $rtl { + @content; + } +} + +@mixin rtl { + @if $rtl { + @content; + } +} + +@mixin ltr-property($property, $spacing, $right: true) { + $normal: if($right, "right", "left"); + $opposite: if($right, "left", "right"); + + @if $rtl { + #{$property}-#{$opposite}: $spacing; + } + @else { + #{$property}-#{$normal}: $spacing; + } +} + +@mixin ltr-position($spacing, $right: true) { + $normal: if($right, "right", "left"); + $opposite: if($right, "left", "right"); + + @if $rtl { + #{$opposite}: $spacing; + } + @else { + #{$normal}: $spacing; + } +} + +// Placeholders + +@mixin unselectable { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +%unselectable { + @include unselectable; +} + +@mixin arrow($color: transparent) { + border: 3px solid $color; + border-radius: 2px; + border-right: 0; + border-top: 0; + content: " "; + display: block; + height: 0.625em; + margin-top: -0.4375em; + pointer-events: none; + position: absolute; + top: 50%; + transform: rotate(-45deg); + transform-origin: center; + width: 0.625em; +} + +%arrow { + @include arrow; +} + +@mixin block($spacing: $block-spacing) { + &:not(:last-child) { + margin-bottom: $spacing; + } +} + +%block { + @include block; +} + +@mixin delete { + @extend %unselectable; + + -moz-appearance: none; + -webkit-appearance: none; + background-color: bulmaRgba($scheme-invert, 0.2); + border: none; + border-radius: $radius-rounded; + cursor: pointer; + pointer-events: auto; + display: inline-block; + flex-grow: 0; + flex-shrink: 0; + font-size: 0; + height: 20px; + max-height: 20px; + max-width: 20px; + min-height: 20px; + min-width: 20px; + outline: none; + position: relative; + vertical-align: top; + width: 20px; + + &::before, + &::after { + background-color: $scheme-main; + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; + } + + &::before { + height: 2px; + width: 50%; + } + + &::after { + height: 50%; + width: 2px; + } + + &:hover, + &:focus { + background-color: bulmaRgba($scheme-invert, 0.3); + } + + &:active { + background-color: bulmaRgba($scheme-invert, 0.4); + } + + // Sizes + &.is-small { + height: 16px; + max-height: 16px; + max-width: 16px; + min-height: 16px; + min-width: 16px; + width: 16px; + } + + &.is-medium { + height: 24px; + max-height: 24px; + max-width: 24px; + min-height: 24px; + min-width: 24px; + width: 24px; + } + + &.is-large { + height: 32px; + max-height: 32px; + max-width: 32px; + min-height: 32px; + min-width: 32px; + width: 32px; + } +} + +%delete { + @include delete; +} + +@mixin loader { + animation: spinAround 500ms infinite linear; + border: 2px solid $grey-lighter; + border-radius: $radius-rounded; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1em; + position: relative; + width: 1em; +} + +%loader { + @include loader; +} + +@mixin overlay($offset: 0) { + bottom: $offset; + left: $offset; + position: absolute; + right: $offset; + top: $offset; +} + +%overlay { + @include overlay; +} diff --git a/lib/necolas/normalize.css/.editorconfig b/lib/necolas/normalize.css/.editorconfig new file mode 100644 index 0000000000..4039ff1115 --- /dev/null +++ b/lib/necolas/normalize.css/.editorconfig @@ -0,0 +1,12 @@ +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false diff --git a/lib/necolas/normalize.css/.gitattributes b/lib/necolas/normalize.css/.gitattributes new file mode 100644 index 0000000000..5e26201fb1 --- /dev/null +++ b/lib/necolas/normalize.css/.gitattributes @@ -0,0 +1,2 @@ +normalize.css linguist-vendored=false +test.html linguist-vendored diff --git a/lib/necolas/normalize.css/.gitignore b/lib/necolas/normalize.css/.gitignore new file mode 100644 index 0000000000..3c3629e647 --- /dev/null +++ b/lib/necolas/normalize.css/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/lib/necolas/normalize.css/.travis.yml b/lib/necolas/normalize.css/.travis.yml new file mode 100644 index 0000000000..833d09d149 --- /dev/null +++ b/lib/necolas/normalize.css/.travis.yml @@ -0,0 +1,3 @@ +language: node_js +node_js: + - stable diff --git a/lib/necolas/normalize.css/CHANGELOG.md b/lib/necolas/normalize.css/CHANGELOG.md new file mode 100644 index 0000000000..922f6e38c8 --- /dev/null +++ b/lib/necolas/normalize.css/CHANGELOG.md @@ -0,0 +1,175 @@ +# Changes to normalize.css + +### 8.0.1 (November 4, 2018) + +* Fix regression in IE rendering of `main` element. + +### 8.0.0 (February 2, 2018) + +* Remove support for older browsers Android 4, lte IE 9, lte Safari 7. +* Don't remove search input cancel button in Chrome/Safari. +* Form inputs inherit `font-family`. +* Fix text decoration in Safari 8+. + +### 7.0.0 (May 2, 2017) + +* Revert changes in `body` and form elements styles introduced by v6 + +### 6.0.0 (March 26, 2017) + +* Remove all opinionated rules +* Correct document heading comment +* Update `abbr[title]` support + +### 5.0.0 (October 3, 2016) + +* Add normalized sections not already present from + https://html.spec.whatwg.org/multipage/. +* Move unsorted rules into their respective sections. +* Update the `summary` style in all browsers. +* Remove `::placeholder` styles due to a bug in Edge. +* More explicitly define font resets on form controls. +* Remove the `optgroup` normalization needed by the previous font reset. +* Update text-size-adjust documentation
 for IE on Windows Phone +* Update OS X reference to macOS +* Update the semver strategy. + +### 4.2.0 (June 30, 2016) + +* Correct the `line-height` in all browsers. +* Restore `optgroup` font inheritance. +* Update normalize.css heading. + +### 4.1.1 (April 12, 2016) + +* Update normalize.css heading. + +### 4.1.0 (April 11, 2016) + +* Normalize placeholders in Chrome, Edge, and Safari. +* Normalize `text-decoration-skip` property in Safari. +* Normalize file select buttons. +* Normalize search input outlines in Safari. +* Limit Firefox focus normalizations to buttons. +* Restore `main` to package.json. +* Restore proper overflow to certain `select` elements. +* Remove opinionated cursor styles on buttons. +* Update stylelint configuration. +* Update tests. + +### 4.0.0 (March 19, 2016) + +* Add the correct font weight for `b` and `strong` in Chrome, Edge, and Safari. +* Correct inconsistent `overflow` for `hr` in Edge and IE. +* Correct inconsistent `box-sizing` for `hr` in Firefox. +* Correct inconsistent `text-decoration` and `border-bottom` for `abbr[title]` + in Chrome, Edge, Firefox IE, Opera, and Safari. +* Correct inheritance and scaling of `font-size` for preformatted text. +* Correct `legend` text wrapping not present in Edge and IE. +* Remove unnecessary normalization of `line-height` for `input`. +* Remove unnecessary normalization of `color` for form controls. +* Remove unnecessary `box-sizing` for `input[type="search"]` in Chrome, Edge, + Firefox, IE, and Safari. +* Remove opinionated table resets. +* Remove opinionated `pre` overflow. +* Remove selector weight from some input selectors. +* Update normalization of `border-style` for `img`. +* Update normalization of `color` inheritance for `legend`. +* Update normalization of `background-color` for `mark`. +* Update normalization of `outline` for `:-moz-focusring` removed by a previous + normalization in Firefox. +* Update opinionated style of `outline-width` for `a:active` and `a:hover`. +* Update comments to identify opinionated styles. +* Update comments to specify browser/versions affected by all changes. +* Update comments to use one voice. + +--- + +### 3.0.3 (March 30, 2015) + +* Remove unnecessary vendor prefixes. +* Add `main` property. + +### 3.0.2 (October 4, 2014) + +* Only alter `background-color` of links in IE 10. +* Add `menu` element to HTML5 display definitions. + +### 3.0.1 (March 27, 2014) + +* Add package.json for npm support. + +### 3.0.0 (January 28, 2014) + +### 3.0.0-rc.1 (January 26, 2014) + +* Explicit tests for each normalization. +* Fix i18n for `q` element. +* Fix `pre` text formatting and overflow. +* Fix vertical alignment of `progress`. +* Address `button` overflow in IE 8/9/10. +* Revert `textarea` alignment modification. +* Fix number input button cursor in Chrome on OS X. +* Remove `a:focus` outline normalization. +* Fix `figure` margin normalization. +* Normalize `optgroup`. +* Remove default table cell padding. +* Set correct display for `progress` in IE 8/9. +* Fix `font` and `color` inheritance for forms. + +--- + +### 2.1.3 (August 26, 2013) + +* Fix component.json. +* Remove the gray background color from active links in IE 10. + +### 2.1.2 (May 11, 2013) + +* Revert root `color` and `background` normalizations. + +### 2.1.1 (April 8, 2013) + +* Normalize root `color` and `background` to counter the effects of system + color schemes. + +### 2.1.0 (January 21, 2013) + +* Normalize `text-transform` for `button` and `select`. +* Normalize `h1` margin when within HTML5 sectioning elements. +* Normalize `hr` element. +* Remove unnecessary `pre` styles. +* Add `main` element to HTML5 display definitions. +* Fix cursor style for disabled button `input`. + +### 2.0.1 (August 20, 2012) + +* Remove stray IE 6/7 `inline-block` hack from HTML5 display settings. + +### 2.0.0 (August 19, 2012) + +* Remove legacy browser form normalizations. +* Remove all list normalizations. +* Add `quotes` normalizations. +* Remove all heading normalizations except `h1` font size. +* Form elements automatically inherit `font-family` from ancestor. +* Drop support for IE 6/7, Firefox < 4, and Safari < 5. + +--- + +### 1.0.1 (August 19, 2012) + +* Adjust `small` font size normalization. + +### 1.0.0 (August 14, 2012) + +(Only the notable changes since public release) + +* Add MIT License. +* Hide `audio` elements without controls in iOS 5. +* Normalize heading margins and font size. +* Move font-family normalization from `body` to `html`. +* Remove scrollbar normalization. +* Remove excess padding from checkbox and radio inputs in IE 7. +* Add IE9 correction for SVG overflow. +* Add fix for legend not inheriting color in IE 6/7/8/9. diff --git a/lib/necolas/normalize.css/CONTRIBUTING.md b/lib/necolas/normalize.css/CONTRIBUTING.md new file mode 100644 index 0000000000..fa84fa9561 --- /dev/null +++ b/lib/necolas/normalize.css/CONTRIBUTING.md @@ -0,0 +1,197 @@ +# Contributing to normalize.css + +Please take a moment to review this document in order to make the contribution +process easy and effective for everyone involved. + +Following these guidelines helps to communicate that you respect the time of +the developers managing and developing this open source project. In return, +they should reciprocate that respect in addressing your issue or assessing +patches and features. + + +## Using the issue tracker + +The issue tracker is the preferred channel for [bug reports](#bugs), +[features requests](#features) and [submitting pull +requests](#pull-requests), but please respect the following restrictions: + +* Please **do not** use the issue tracker for personal support requests. + +* Please **do not** derail or troll issues. Keep the discussion on topic and + respect the opinions of others. + + +## Bug reports + +A bug is a _demonstrable problem_ that is caused by the code in the repository. +Good bug reports are extremely helpful - thank you! + +Guidelines for bug reports: + +1. **Use the GitHub issue search** – check if the issue has already been + reported. + +2. **Check if the issue has been fixed** – try to reproduce it using the + latest `master` branch in the repository. + +3. **Isolate the problem** – create a live example (e.g., on + [Codepen](http://codepen.io)) of a [reduced test + case](http://css-tricks.com/6263-reduced-test-cases/). + +A good bug report shouldn't leave others needing to chase you up for more +information. Please try to be as detailed as possible in your report. What is +your environment? What steps will reproduce the issue? What browser(s) and OS +experience the problem? What would you expect to be the outcome? All these +details will help people to fix any potential bugs. + +Example: + +> Short and descriptive example bug report title +> +> A summary of the issue and the browser/OS environment in which it occurs. If +> suitable, include the steps required to reproduce the bug. +> +> 1. This is the first step +> 2. This is the second step +> 3. Further steps, etc. +> +> `` - a link to the reduced test case +> +> Any other information you want to share that is relevant to the issue being +> reported. This might include the lines of code that you have identified as +> causing the bug, and potential solutions (and your opinions on their +> merits). + + +## Feature requests + +Feature requests are welcome. But take a moment to find out whether your idea +fits with the scope and aims of the project. It's up to *you* to make a strong +case to convince the project's developers of the merits of this feature. Please +provide as much detail and context as possible. + + +## Pull requests + +Good pull requests - patches, improvements, new features - are a fantastic +help. They should remain focused in scope and avoid containing unrelated +commits. + +**Please ask first** before embarking on any significant work, otherwise you +risk spending a lot of time working on something that the project's developers +might not want to merge into the project. + +Please adhere to the coding conventions used throughout a project (whitespace, +accurate comments, etc.) and any other requirements (such as test coverage). + +Follow this process if you'd like your work considered for inclusion in the +project: + +1. [Fork](https://help.github.com/articles/fork-a-repo/) the project, clone your + fork, and configure the remotes: + + ```bash + # Clone your fork of the repo into the current directory + git clone https://github.com//normalize.css + # Navigate to the newly cloned directory + cd normalize.css + # Assign the original repo to a remote called "upstream" + git remote add upstream https://github.com/necolas/normalize.css + ``` + +2. If you cloned a while ago, get the latest changes from upstream: + + ```bash + git checkout master + git pull upstream master + ``` + +3. Never work directly on `master`. Create a new topic branch (off the latest + version of `master`) to contain your feature, change, or fix: + + ```bash + git checkout -b + ``` + +4. Commit your changes in logical chunks. Please adhere to these [git commit + message conventions](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) + or your code is unlikely be merged into the main project. Use Git's + [interactive rebase](https://help.github.com/articles/interactive-rebase) + feature to tidy up your commits before making them public. + + Be sure to add a test to the `test.html` file if appropriate, and test + your change in all supported browsers. + +5. Locally rebase the upstream development branch into your topic branch: + + ```bash + git pull --rebase upstream master + ``` + +6. Push your topic branch up to your fork: + + ```bash + git push origin + ``` + +10. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) + with a clear title and description. + +**IMPORTANT**: By submitting a patch, you agree to allow the project owner to +license your work under the same license as that used by the project. + +### CSS Conventions + +Keep the CSS file as readable as possible by following these guidelines: + +- Comments are short and to the point. +- Comments without a number reference the entire rule. +- Comments describe the selector when the selector does not make the + normalization obvious. +- Comments begin with “Correct the...” when they deal with less obvious side + effects. +- Rules are sorted by cascade, specificity, and then alphabetic order. +- Selectors are sorted by specificity and then alphabetic order. +- `in browser` applies to all versions. +- `in browser v-` applies to all versions up to and including the version. +- `in browser v+` applies to all versions after and including the version. +- `in browser v-v` applies to all versions including and between the versions. + + +## Maintainers + +If you have commit access, please follow this process for merging patches and +cutting new releases. + +### Accepting patches + +1. Check that a patch is within the scope and philosophy of the project. +2. Check that a patch has any necessary tests and a proper, descriptive commit + message. +3. Test the patch locally. +4. Do not use GitHub's merge button. Apply the patch to `master` locally + (either via `git am` or by checking the whole branch out). Amend minor + problems with the author's original commit if necessary. Then push to GitHub. + +### Releasing a new version + +1. Include all new functional changes in the CHANGELOG. +2. Use a dedicated commit to increment the version. The version needs to be + added to the CHANGELOG (inc. date), the `package.json`, and `normalize.css` + files. +3. The commit message must be of `v0.0.0` format. +4. Create an annotated tag for the version: `git tag -m "v0.0.0" 0.0.0`. +5. Push the changes and tags to GitHub: `git push --tags origin master` +6. Checkout the `gh-pages` branch and follow the instructions in the README. + +### Semver strategy + +[Semver](http://semver.org/) is a widely accepted method for deciding how +version numbers are incremented in a project. Versions are written as +MAJOR.MINOR.PATCH. + +Any change to CSS rules whatsoever is considered backwards-breaking and will +result in a new **major** release. No changes to CSS rules can add +functionality in a backwards-compatible manner, therefore no changes are +considered **minor**. Others changes with no impact on rendering are considered +backwards-compatible and will result in a new **patch** release. diff --git a/lib/necolas/normalize.css/LICENSE.md b/lib/necolas/normalize.css/LICENSE.md new file mode 100644 index 0000000000..43b5ddcc90 --- /dev/null +++ b/lib/necolas/normalize.css/LICENSE.md @@ -0,0 +1,21 @@ +# The MIT License (MIT) + +Copyright © Nicolas Gallagher and Jonathan Neal + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/lib/necolas/normalize.css/README.md b/lib/necolas/normalize.css/README.md new file mode 100644 index 0000000000..71954f2306 --- /dev/null +++ b/lib/necolas/normalize.css/README.md @@ -0,0 +1,102 @@ +# normalize.css + +Normalize Logo + +> A modern alternative to CSS resets + +[![npm][npm-image]][npm-url] [![license][license-image]][license-url] +[![changelog][changelog-image]][changelog-url] +[![gitter][gitter-image]][gitter-url] + + +**NPM** + +```sh +npm install --save normalize.css +``` + +**CDN** + +See https://yarnpkg.com/en/package/normalize.css + +**Download** + +See https://necolas.github.io/normalize.css/latest/normalize.css + + +## What does it do? + +* Preserves useful defaults, unlike many CSS resets. +* Normalizes styles for a wide range of elements. +* Corrects bugs and common browser inconsistencies. +* Improves usability with subtle modifications. +* Explains what code does using detailed comments. + + +## Browser support + +* Chrome +* Edge +* Firefox ESR+ +* Internet Explorer 10+ +* Safari 8+ +* Opera + + +## Extended details and known issues + +Additional detail and explanation of the esoteric parts of normalize.css. + +#### `pre, code, kbd, samp` + +The `font-family: monospace, monospace` hack fixes the inheritance and scaling +of font-size for preformatted text. The duplication of `monospace` is +intentional. [Source](https://en.wikipedia.org/wiki/User:Davidgothberg/Test59). + +#### `sub, sup` + +Normally, using `sub` or `sup` affects the line-box height of text in all +browsers. [Source](https://gist.github.com/413930). + +#### `select` + +By default, Chrome on OS X and Safari on OS X allow very limited styling of +`select`, unless a border property is set. The default font weight on `optgroup` +elements cannot safely be changed in Chrome on OSX and Safari on OS X. + +#### `[type="checkbox"]` + +It is recommended that you do not style checkbox and radio inputs as Firefox's +implementation does not respect box-sizing, padding, or width. + +#### `[type="number"]` + +Certain font size values applied to number inputs cause the cursor style of the +decrement button to change from `default` to `text`. + +#### `[type="search"]` + +The search input is not fully stylable by default. In Chrome and Safari on +OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In +Chrome and Safari on Windows you can't control `border` properly. It will apply +`border-width` but will only show a border color (which cannot be controlled) +for the outer 1px of that border. Applying `-webkit-appearance: textfield` +addresses these issues without removing the benefits of search inputs (e.g. +showing past searches). + +## Contributing + +Please read the [contribution guidelines](CONTRIBUTING.md) in order to make the +contribution process easy and effective for everyone involved. + + +[changelog-image]: https://img.shields.io/badge/changelog-md-blue.svg?style=flat-square +[changelog-url]: CHANGELOG.md +[license-image]: https://img.shields.io/npm/l/normalize.css.svg?style=flat-square +[license-url]: LICENSE.md +[npm-image]: https://img.shields.io/npm/v/normalize.css.svg?style=flat-square +[npm-url]: https://www.npmjs.com/package/normalize.css +[gitter-image]: https://img.shields.io/badge/chat-gitter-blue.svg?style=flat-square +[gitter-url]: https://gitter.im/necolas/normalize.css diff --git a/lib/necolas/normalize.css/normalize.css b/lib/necolas/normalize.css/normalize.css new file mode 100644 index 0000000000..192eb9ce43 --- /dev/null +++ b/lib/necolas/normalize.css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/lib/necolas/normalize.css/package-lock.json b/lib/necolas/normalize.css/package-lock.json new file mode 100644 index 0000000000..7f8590b4d9 --- /dev/null +++ b/lib/necolas/normalize.css/package-lock.json @@ -0,0 +1,5 @@ +{ + "name": "normalize.css", + "version": "8.0.1", + "lockfileVersion": 1 +} diff --git a/lib/necolas/normalize.css/package.json b/lib/necolas/normalize.css/package.json new file mode 100644 index 0000000000..668bda8a40 --- /dev/null +++ b/lib/necolas/normalize.css/package.json @@ -0,0 +1,15 @@ +{ + "name": "normalize.css", + "version": "8.0.1", + "description": "A modern alternative to CSS resets", + "main": "normalize.css", + "style": "normalize.css", + "files": [ + "LICENSE.md", + "normalize.css" + ], + "repository": "necolas/normalize.css", + "license": "MIT", + "bugs": "https://github.com/necolas/normalize.css/issues", + "homepage": "https://necolas.github.io/normalize.css" +} diff --git a/lib/necolas/normalize.css/test.html b/lib/necolas/normalize.css/test.html new file mode 100644 index 0000000000..615b08326d --- /dev/null +++ b/lib/necolas/normalize.css/test.html @@ -0,0 +1,441 @@ + + + + +Normalize CSS: UI tests + + + + +
+ . + +

Normalize.css: UI tests

+ +

html

+

should have a line height of 1.15

+
+ abcdefghijklmnopqrstuvwxyz +
+ +

body

+

should have no margin (opinionated)

+
+ (there should be no red background visible on this page) +
+ +

+ article, aside, details, + figure, figcaption, footer, + header, main, + menu, nav, section, + summary +

+

should render as block

+
+
article
+ +
+ summary + details +
+
+ figure +
figcaption
+
+
footer
+
header
+
main
+
  • menu
    •  + +
    section
    +
    + +

    audio, canvas, progress, video

    +

    should render as inline-block and baseline-aligned

    +
    + + canvas + progress + +
    + +

    audio:not([controls]), template, [hidden]

    +

    should not display

    +
    + + + +
    + +

    a

    +

    should have a transparent background when active

    +
    + dummy anchor +
    +

    should not skip underlines

    +
    + quip and jig +
    +

    should not have a focus outline when both focused and hovered (opinionated)

    +
    + dummy anchor +
    + +

    abbr[title]

    +

    should have a dotted underline with a solid underline as a fallback

    +
    + abbr +
    + +

    b, strong

    +

    should have bolder font-weight

    +
    + b + strong +
    + +

    dfn

    +

    should have italic font-style

    +
    + dfn +
    + +

    h1

    +

    should not change size within an article

    +
    +

    Heading (control)

    +
    +

    Heading (in article)

    +
    +
    +

    should not change size within a section

    +
    +

    Heading (control)

    +
    +

    Heading (in section)

    +
    +
    + +

    mark

    +

    should have a yellow background

    +
    + mark +
    + +

    small

    +

    should render equally small in all browsers

    +
    + control. small. +
    + +

    sub and sup

    +

    should not affect a line's visual line-height

    +
    +

    control.

    +

    control. sub.

    +

    control. sup.

    +
    + +

    img

    +

    should not have a border when wrapped in an anchor

    +
    + + + + +
    + +

    svg

    +

    should not overflow

    +
    + + + +
    + +

    code, kbd, pre, samp

    +

    should render text at the same absolute size as normal text

    +
    + span: abcdefghijklmnopqrstuvwxyz.
    + code: abcdefghijklmnopqrstuvwxyz.
    + kbd: abcdefghijklmnopqrstuvwxyz.
    + samp: abcdefghijklmnopqrstuvwxyz. + 
    pre: abcdefghijklmnopqrstuvwxyz.
    +
    + +

    figure

    +

    should have margins

    +
    +
    + +
    +
    + +

    hr

    +

    should have a content-box box model

    +
    +
    +
    + +

    button, input, optgroup, select, textarea

    +

    should inherit font-size from ancestor

    +
    +
    +
    +
    + +
    +

    should not have margins

    +
    + + + + + +
    + +

    button

    +

    should have visible overflow

    +
    + + +
    + +

    button, select

    +

    should not inherit text-transform

    +
    + + +
    + +

    button and button-style input

    +

    should be styleable

    +
    + +

    +

    +

    +

    +

    +

    +
    + +

    disabled button and input

    +

    should have default cursor style

    +
    +

    +

    +

    +

    +
    + +

    button, input

    +

    should not have extra inner padding in Firefox

    +
    + +

    +

    +

    +

    +
    + +

    fieldset

    +

    should have consistent border, padding, and margin

    +
    +
    +
    +
    +
    + +

    legend

    +

    should inherit color

    +
    +
    + legend +
    +
    +

    should not have padding

    +
    +
    + legend +
    +
    +

    should wrap text

    +
    +
    + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me. +
    +
    + +

    textarea

    +

    should not have a scrollbar unless overflowing

    +
    + +
    + +

    [type="checkbox"], [type="radio"]

    +

    should have a border-box box model

    +
    + + + +
    +

    should not have padding

    +
    + + +
    + +

    [type="number"]

    +

    should display a default cursor for the decrement button's click target in Chrome

    +
    + +
    + +

    [type="search"]

    +

    should be styleable

    +
    + +
    +

    should reference inherited color

    +
    + +
    + +
    diff --git a/lib/samvk/monorale-raleway-sober/OFL.txt b/lib/samvk/monorale-raleway-sober/OFL.txt new file mode 100644 index 0000000000..850368f868 --- /dev/null +++ b/lib/samvk/monorale-raleway-sober/OFL.txt @@ -0,0 +1,97 @@ +Copyright (c) 2010, Matt McInerney (matt@pixelspread.com), +Copyright (c) 2011, Pablo Impallari (www.impallari.com|impallari@gmail.com), +Copyright (c) 2011, Rodrigo Fuenzalida (www.rfuenzalida.com|hello@rfuenzalida.com), with Reserved Font Name Raleway + +Copyright (c) 2017, Sam Kauffman (hello@samvk.com), with Reserved Font Name Monorale + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/lib/samvk/monorale-raleway-sober/README.md b/lib/samvk/monorale-raleway-sober/README.md new file mode 100644 index 0000000000..2f5c6587b8 --- /dev/null +++ b/lib/samvk/monorale-raleway-sober/README.md @@ -0,0 +1,23 @@ +# Monorale: Raleway Sober + +###### The elegant _Raleway_ with numbers aligned and a non-crossing "w". + +![monorale-raleway](https://user-images.githubusercontent.com/12996081/32284539-f112f3da-befd-11e7-9c48-07789df31b78.png) + +_Monorale_ is built off [v4020](https://github.com/impallari/Raleway/tree/master/fonts/v4020) of Raleway. + +Currently available as `otf` and `woff` files. + +--- + +#### Why can't I just use _Raleway_ with its alternate glyphs? + +You absolutely can! _Monorale_ is just an easy way — especially for web apps — to host a `woff` file with Raleway's aligned numbers and alternate "w" as the default. + +#### How is this different from _Rawline_? + +[Rawline: Raleway With "Fixed" Numerals](https://github.com/h-ibaldo/Raleway_Fixed_Numerals/) still uses Raleway's criss-crossing "w". I also noticed all text was being shifted-down, especially SVGs. + +--- + +Special thanks to [@EmmaSimon](https://github.com/EmmaSimon) for the name. diff --git a/lib/samvk/monorale-raleway-sober/_config.yml b/lib/samvk/monorale-raleway-sober/_config.yml new file mode 100644 index 0000000000..c4192631f2 --- /dev/null +++ b/lib/samvk/monorale-raleway-sober/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-cayman \ No newline at end of file diff --git a/lib/samvk/monorale-raleway-sober/monorale.css b/lib/samvk/monorale-raleway-sober/monorale.css new file mode 100644 index 0000000000..7436f9e16c --- /dev/null +++ b/lib/samvk/monorale-raleway-sober/monorale.css @@ -0,0 +1,125 @@ +@font-face { + font-family: Monorale; + font-weight: 100; + font-style: normal; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-Thin.woff') format('woff'); +} +@font-face { + font-family: Monorale; + font-weight: 100; + font-style: italic; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-ThinItalic.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 200; + font-style: normal; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-ExtraLight.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 200; + font-style: italic; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-ExtraLightItalic.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 300; + font-style: normal; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-Light.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 300; + font-style: italic; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-LightItalic.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 400; + font-style: normal; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-Regular.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 400; + font-style: italic; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-Italic.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 500; + font-style: normal; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-Medium.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 500; + font-style: italic; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-MediumItalic.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 600; + font-style: normal; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-SemiBold.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 600; + font-style: italic; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-SemiBoldItalic.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 700; + font-style: normal; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-Bold.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 700; + font-style: italic; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-BoldItalic.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 800; + font-style: normal; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-ExtraBold.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 800; + font-style: italic; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-ExtraBoldItalic.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 900; + font-style: normal; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-Black.woff') format('woff'); + +} +@font-face { + font-family: Monorale; + font-weight: 900; + font-style: italic; + src: url('https://cdn.rawgit.com/samvk/monorale-raleway-sober/master/woff/Monorale-BlackItalic.woff') format('woff'); + +} diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-Black.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-Black.otf new file mode 100644 index 0000000000..5bd4d564a3 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-Black.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-BlackItalic.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-BlackItalic.otf new file mode 100644 index 0000000000..6e94102c5d Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-BlackItalic.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-Bold.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-Bold.otf new file mode 100644 index 0000000000..deddb84bf3 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-Bold.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-BoldItalic.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-BoldItalic.otf new file mode 100644 index 0000000000..0087ab78e3 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-BoldItalic.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraBold.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraBold.otf new file mode 100644 index 0000000000..7b44b8617b Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraBold.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraBoldItalic.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraBoldItalic.otf new file mode 100644 index 0000000000..0195bca7a2 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraBoldItalic.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraLight.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraLight.otf new file mode 100644 index 0000000000..f596b8c6f8 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraLight.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraLightItalic.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraLightItalic.otf new file mode 100644 index 0000000000..a813df59a4 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-ExtraLightItalic.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-Italic.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-Italic.otf new file mode 100644 index 0000000000..d50bd7b566 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-Italic.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-Light.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-Light.otf new file mode 100644 index 0000000000..d12f2ff9df Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-Light.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-LightItalic.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-LightItalic.otf new file mode 100644 index 0000000000..c80db81923 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-LightItalic.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-Medium.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-Medium.otf new file mode 100644 index 0000000000..e0dbe9bc5b Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-Medium.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-MediumItalic.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-MediumItalic.otf new file mode 100644 index 0000000000..503804e71f Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-MediumItalic.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-Regular.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-Regular.otf new file mode 100644 index 0000000000..2c35025ffa Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-Regular.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-SemiBold.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-SemiBold.otf new file mode 100644 index 0000000000..a65064e816 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-SemiBold.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-SemiBoldItalic.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-SemiBoldItalic.otf new file mode 100644 index 0000000000..8bf4b2dac0 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-SemiBoldItalic.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-Thin.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-Thin.otf new file mode 100644 index 0000000000..fc22b60d0a Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-Thin.otf differ diff --git a/lib/samvk/monorale-raleway-sober/otf/Monorale-ThinItalic.otf b/lib/samvk/monorale-raleway-sober/otf/Monorale-ThinItalic.otf new file mode 100644 index 0000000000..9be7518126 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/otf/Monorale-ThinItalic.otf differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-Black.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-Black.woff new file mode 100644 index 0000000000..ec4d65d0ba Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-Black.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-BlackItalic.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-BlackItalic.woff new file mode 100644 index 0000000000..b60b8a1a67 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-BlackItalic.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-Bold.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-Bold.woff new file mode 100644 index 0000000000..b9a93026c8 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-Bold.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-BoldItalic.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-BoldItalic.woff new file mode 100644 index 0000000000..464c7c1e3e Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-BoldItalic.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraBold.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraBold.woff new file mode 100644 index 0000000000..08a45bceff Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraBold.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraBoldItalic.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraBoldItalic.woff new file mode 100644 index 0000000000..42e1c9fb9a Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraBoldItalic.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraLight.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraLight.woff new file mode 100644 index 0000000000..dbc322264c Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraLight.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraLightItalic.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraLightItalic.woff new file mode 100644 index 0000000000..938e126b16 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-ExtraLightItalic.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-Italic.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-Italic.woff new file mode 100644 index 0000000000..5442ef3573 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-Italic.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-Light.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-Light.woff new file mode 100644 index 0000000000..ec52c3ccf0 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-Light.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-LightItalic.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-LightItalic.woff new file mode 100644 index 0000000000..b693a89438 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-LightItalic.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-Medium.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-Medium.woff new file mode 100644 index 0000000000..a504507477 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-Medium.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-MediumItalic.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-MediumItalic.woff new file mode 100644 index 0000000000..dc4089cf37 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-MediumItalic.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-Regular.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-Regular.woff new file mode 100644 index 0000000000..f6f8c8ecfd Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-Regular.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-SemiBold.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-SemiBold.woff new file mode 100644 index 0000000000..8bc3cecd07 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-SemiBold.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-SemiBoldItalic.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-SemiBoldItalic.woff new file mode 100644 index 0000000000..31c668b3df Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-SemiBoldItalic.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-Thin.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-Thin.woff new file mode 100644 index 0000000000..048ed38600 Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-Thin.woff differ diff --git a/lib/samvk/monorale-raleway-sober/woff/Monorale-ThinItalic.woff b/lib/samvk/monorale-raleway-sober/woff/Monorale-ThinItalic.woff new file mode 100644 index 0000000000..3665d6a8ed Binary files /dev/null and b/lib/samvk/monorale-raleway-sober/woff/Monorale-ThinItalic.woff differ diff --git a/pages/fmd.php b/pages/fmd.php new file mode 100644 index 0000000000..470fb743f8 --- /dev/null +++ b/pages/fmd.php @@ -0,0 +1,36 @@ +add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'lib/necolas/normalize.css/normalize.css'); + + $sCSSRelPath = utils::GetCSSFromSASS( + 'css/backoffice/main.scss', + array( + APPROOT.'css/backoffice/', + ) + ); + $oPage->add_saas($sCSSRelPath); + + + $oPage->add(<< +
    +
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    +
    +
    + +
    +
    + itemitemitemitemitemitemitemitem +
    +
    +
    item
    itemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitemitem
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    item
    +
    +
    +HTML + ); + + $oPage->output();