diff --git a/.gitignore b/.gitignore index 9c3d391661..0aa37c1a53 100644 --- a/.gitignore +++ b/.gitignore @@ -33,6 +33,9 @@ patternfly.spec #Ignore generated dist files /dist +# Ignore less and sass test builds +/tests/build + #Ignore backstop regression test images and reports /backstop_data/bitmaps_test /backstop_data/html_report diff --git a/Gruntfile.js b/Gruntfile.js index e6b70117f3..7e34c8222a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,4 +1,5 @@ /*global module,require*/ +/* eslint-disable */ var pageBuilder = require('./tests/pages/_script/page-builder'), open = require('open'); @@ -11,6 +12,9 @@ module.exports = function (grunt) { src: '' }; + // '--sass' command line argument exists? + var sassBuild = grunt.option('sass'); + // load all grunt tasks require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); @@ -44,7 +48,9 @@ module.exports = function (grunt) { } }, clean: { - build: '<%= config.dist %>' + build: '<%= config.dist %>', + sass: 'src/sass/converted', + testBuild: 'tests/build' }, concat: { js: { @@ -76,37 +82,162 @@ module.exports = function (grunt) { } }, copy: { - main: { + fonts: { files: [ // copy Bootstrap font files - {expand: true, cwd: 'node_modules/bootstrap/dist/fonts/', src: ['*'], dest: 'dist/fonts/'}, + { + expand: true, + cwd: 'node_modules/bootstrap/dist/fonts/', + src: ['*'], + dest: 'dist/fonts/' + }, // copy Font Awesome font files - {expand: true, cwd: 'node_modules/font-awesome/fonts/', src: ['*'], dest: 'dist/fonts/'}, - // copy Patternfly less files - {expand: true, cwd: 'src/less/', src: ['*'], dest: 'dist/less/'}, + { + expand: true, + cwd: 'node_modules/font-awesome/fonts/', + src: ['*'], + dest: 'dist/fonts/' + }, // copy Patternfly font files - {expand: true, cwd: 'src/fonts/', src: ['*'], dest: 'dist/fonts/'}, - //copy images - {expand: true, cwd: 'src/img/', src: ['**'], dest: 'dist/img/'}, + { + expand: true, + cwd: 'src/fonts/', + src: ['*'], + dest: 'dist/fonts/' + } + ] + }, + images: { + // copy images + files: [ + { + expand: true, + cwd: 'src/img/', + src: ['**'], + dest: 'dist/img/' + } + ] + }, + less: { + files: [ + // copy Patternfly less files + { + expand: true, + cwd: 'src/less/', + src: ['*'], + dest: 'dist/less/' + }, // Dependencies // copy Bootstrap less files - {expand: true, cwd: 'node_modules/bootstrap/less/', src: ['**'], dest: 'dist/less/dependencies/bootstrap/'}, + { + expand: true, + cwd: 'node_modules/bootstrap/less/', + src: ['**'], + dest: 'dist/less/dependencies/bootstrap/' + }, // copy Font Awesome less files - {expand: true, cwd: 'node_modules/font-awesome/less/', src: ['**'], dest: 'dist/less/dependencies/font-awesome/'}, + { + expand: true, + cwd: 'node_modules/font-awesome/less/', + src: ['**'], + dest: 'dist/less/dependencies/font-awesome/' + }, // copy Bootstrap-Combobox less files - {expand: true, cwd: 'node_modules/patternfly-bootstrap-combobox/less/', src: ['**'], dest: 'dist/less/dependencies/bootstrap-combobox/'}, + { + expand: true, + cwd: 'node_modules/patternfly-bootstrap-combobox/less/', + src: ['**'], + dest: 'dist/less/dependencies/bootstrap-combobox/' + }, // copy Bootstrap-Datepicker less files - {expand: true, cwd: 'node_modules/bootstrap-datepicker/less/', src: ['**'], dest: 'dist/less/dependencies/bootstrap-datepicker/'}, + { + expand: true, + cwd: 'node_modules/bootstrap-datepicker/less/', + src: ['**'], + dest: 'dist/less/dependencies/bootstrap-datepicker/' + }, // copy Bootstrap-Select less files - {expand: true, cwd: 'node_modules/bootstrap-select/less/', src: ['**'], dest: 'dist/less/dependencies/bootstrap-select/'}, + { + expand: true, + cwd: 'node_modules/bootstrap-select/less/', + src: ['**'], + dest: 'dist/less/dependencies/bootstrap-select/' + }, // copy Bootstrap-Slider less files - {expand: true, cwd: 'node_modules/bootstrap-slider/src/less', src: ['**'], dest: 'dist/less/dependencies/bootstrap-slider/'}, + { + expand: true, + cwd: 'node_modules/bootstrap-slider/src/less', + src: ['**'], + dest: 'dist/less/dependencies/bootstrap-slider/' + }, // Bootstrap Switch less files must be manually copied because of edits made to source less for strict-math purposes // manually copy 'node_modules/bootstrap-switch/src/less/bootstrap3/' and make sure any math is wrapped with parentheses // copy Bootstrap Touchspin css file - {expand: true, cwd: 'node_modules/bootstrap-touchspin/dist/', src: ['jquery.bootstrap-touchspin.css'], dest: 'dist/less/dependencies/bootstrap-touchspin/'}, + { + expand: true, + cwd: 'node_modules/bootstrap-touchspin/dist/', + src: ['jquery.bootstrap-touchspin.css'], + dest: 'dist/less/dependencies/bootstrap-touchspin/' + }, // copy C3 css file - {expand: true, cwd: 'node_modules/c3/', src: ['c3.css'], dest: 'dist/less/dependencies/c3/'} + { + expand: true, + cwd: 'node_modules/c3/', + src: ['c3.css'], + dest: 'dist/less/dependencies/c3/' + }, + ] + }, + sass: { + files: [ + + // copy bootstrap-select sass files + { + expand: true, + cwd: 'node_modules/bootstrap-select/sass', + src: '**/*.scss', + dest: 'dist/sass/patternfly/dependencies/bootstrap-select' + }, + // copy bootstrap-slider sass files + { + expand: true, + cwd: 'node_modules/bootstrap-slider/src/sass', + src: ['**/*.scss'], + dest: 'dist/sass/patternfly/dependencies/bootstrap-slider/' + }, + // copy bootstrap-touchspin css file and change extension to scss + { + expand: false, + src: 'node_modules/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.css', + dest: 'dist/sass/patternfly/dependencies/bootstrap-touchspin/_jquery.bootstrap-touchspin.scss' + }, + // copy c3 css file and change extension to scss + { + expand: false, + src: 'node_modules/c3/c3.css', + dest: 'dist/sass/patternfly/dependencies/c3/_c3.scss' + }, + // copy converted sass files + { + expand: true, + cwd: 'node_modules/eonasdan-bootstrap-datetimepicker/src/sass', + src: '**/*.scss', + dest: 'dist/sass/patternfly/dependencies/eonasdan-bootstrap-datetimepicker/' + }, + // copy converted sass files + { + expand: true, + cwd: 'src/sass/converted', + src: '**/*.scss', + dest: 'dist/sass/' + }, + { + // copy static sass partials to overwrite equivalent converted sass files + expand: true, + cwd: 'src/sass/static', + src: '**/*.scss', + dest: 'dist/sass/' + } ] }, js: { @@ -114,15 +245,47 @@ module.exports = function (grunt) { // copy js src file {expand: true, cwd: 'src/js/', src: ['*.js'], dest: 'dist/js/'} ] + }, + lessBuild: { + files: [ + { + // copy css built from less into dist/css + expand: true, + cwd: 'tests/build/less', + src: ['**/*.css', '**/*.map'], + dest: 'dist/css/' + } + ] + }, + sassBuild:{ + files: [ + { + // copy css built from less into dist/css + expand: true, + cwd: 'tests/build/sass', + src: ['**/*.css', '**/*.map'], + dest: 'dist/css/' + } + ] } }, csscount: { - production: { + less: { + src: [ + 'tests/build/less/patternfly*.min.css' + ], + options: { + maxSelectors: 4095, + beForgiving: true + } + }, + sass: { src: [ - 'dist/css/patternfly*.min.css' + 'tests/build/sass/patternfly.min.css' ], options: { - maxSelectors: 4096 + maxSelectors: 65534, + beForgiving: true } } }, @@ -141,9 +304,9 @@ module.exports = function (grunt) { production: { files: [{ expand: true, - cwd: 'dist/css', - src: ['patternfly*.css', '!*.min.css'], - dest: 'dist/css', + cwd: 'tests/build', + src: ['**/patternfly*.css', '**/!*.min.css'], + dest: 'tests/build', ext: '.min.css', }], options: { @@ -154,7 +317,7 @@ module.exports = function (grunt) { less: { patternfly: { files: { - 'dist/css/patternfly.css': 'src/less/patternfly.less', + 'tests/build/less/patternfly.css': 'src/less/patternfly.less', }, options: { paths: [ @@ -164,13 +327,13 @@ module.exports = function (grunt) { strictMath: true, sourceMap: true, outputSourceFiles: true, - sourceMapFilename: 'dist/css/patternfly.css.map', + sourceMapFilename: 'tests/build/less/patternfly.css.map', sourceMapURL: 'patternfly.css.map' } }, patternflyAdditions: { files: { - 'dist/css/patternfly-additions.css': 'src/less/patternfly-additions.less' + 'tests/build/less/patternfly-additions.css': 'src/less/patternfly-additions.less' }, options: { paths: [ @@ -180,11 +343,168 @@ module.exports = function (grunt) { strictMath: true, sourceMap: true, outputSourceFiles: true, - sourceMapFilename: 'dist/css/patternfly-additions.css.map', + sourceMapFilename: 'tests/build/less/patternfly-additions.css.map', sourceMapURL: 'patternfly-additions.css.map' } } }, + lessToSass: { + convert_within_custom_replacements: { + files: [ + { + expand: true, + cwd: 'src/less', + src: ['*.less','!patternfly.less', '!patternfly-additions.less', '!application-launcher.less'], + dest: 'src/sass/converted/patternfly/', + rename: function(dest, src) { + return dest + '_' + src.replace('.less', '.scss'); + } + }, + { + expand: true, + cwd: 'node_modules/bootstrap-datepicker/less', + src: ['*.less'], + ext: '.scss', + dest: 'dist/sass/patternfly/dependencies/bootstrap-datepicker' + }, + { + expand: true, + cwd: 'node_modules/bootstrap-switch/src/less/bootstrap3', + src: ['**/*.less'], + ext: '.scss', + dest: 'dist/sass/patternfly/dependencies/bootstrap-switch' + }, + { + expand: true, + cwd: 'node_modules/patternfly-bootstrap-combobox/less', + src: ['*.less'], + ext: '.scss', + dest: 'dist/sass/patternfly/dependencies/bootstrap-combobox' + } + ], + options: { + excludes: ['variables', 'default'], + replacements: [ + { + // Customize variable conversion to include newer css reserved words. + pattern: /(?!@debug|@import|@media|@keyframes|@font-face|@include|@extend|@mixin|@supports|@-\w)@/gi, + replacement: '$', + order: 0 + }, + { + // + pattern: /^\$(img|font)-path:(\s*)"(.*)"(.*);(.*)$/mgi, + replacement: '\$$$1-path:$2if($pf-sass-asset-helper, "", "$3/")$4;$5', + order: 1 + }, + { + // + pattern: /^\$icon-font-path:(\s*)"(.*)"(.*);(.*)$/mgi, + replacement: '\$icon-font-path:$1if($pf-sass-asset-helper, "", "$2")$3;$4', + order: 1 + }, + { + // Add !default flag to variable declarations without leading whitespace. + pattern: /^(\$.*?:.*?);(\s*\/\/.*)?$/mgi, + replacement: '$1 !default;$2', + order: 2 + }, + { + // Include mixins with no arguments + pattern: /(\s+)\.([\w\-]+)\(\)/gi, + replacement: '$1@include $2()', + order: 3 + }, + { + // Interpolates second ampersand where double ampersands are used + pattern: /\&\&/gi, + replacement: '&#{&}', + order: 20 + }, + { + // Interpolates ampersands that directly follow (are touching) a definition + // e.g. somedef& becomes somedef#{&} + pattern: /(\w+)\&/gi, + replacement: '$1#{&}', + order: 30 + }, + { + // Namespaced mixins are detected as includes by default conversion + // process. Remove namespacing by concatenating namespace and mixin name. + // #gradient { + // @include striped(){...} + // } + // + // becomes + // + // @mixin gradient-striped(){...} + pattern: /^#([\w\-]+)\s*{\s*@include\s*([\w\-]*)\((.*)\)\s*{([\s\S]*?)}\s*}/mgi, + replacement: '@mixin $1-$2($3){$4}', + order: 40 + }, + // Fix invocation of namespaced mixins. Replace #namespace > .mixin() + // or #namespace.mixin() with @include namespace-mixin() + { + pattern: /#(\w*)\s*\>?\s*\.(\w*)(\(.*\))/gi, + replacement: '@include $1-$2$3', + order: 50 + }, + { + // Remove "!default" flag from mixin declarations + pattern: /@mixin.*!default.*/gi, + replacement: function(match){ + return match.replace(/\s*!default\s*/gi, ''); + }, + order: 60 + }, + { + // Replace semi-colons with commas in mixins and includes + pattern: /(@mixin |@include )([\w\-]*)\s*(\(.*\))(\s*[{;]?)/gi, + replacement: function(match, p1, p2, p3, p4){ + return p1+p2+p3.replace(/;/g, ',')+p4; + }, + order: 70 + }, + { + // Fix bug in grunt-less-to-sass that puts "!important" inside mixin and css function parens. + pattern: /^(\s*[\w\-]*:\s*[\w\-]*)\((.*?)\s*!important.*\)(.*);(.*)$/mgi, + replacement: '$1($2) !important$3;$4', + order: 80 + }, + { + pattern: /\&:extend\((.*)\)/gi, + replacement: '@extend $1', + order: 90 + }, + { + pattern: /url\(\"\#\{\$font-path\}\/(.+?)\"\)/gi, + replacement: 'url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}$1"), "#{$font-path}$1"))', + order: 100 + }, + { + pattern: /url\(\"\#\{\$img-path\}\/(.+?)\"\)/gi, + replacement: 'url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}$1"), "#{$img-path}$1"))', + order: 110 + }, + ] + } + } + }, + sass: { + patternfly: { + files: { + 'tests/build/sass/patternfly.css': 'src/sass/build.scss', + }, + options: { + outputStyle: 'expanded', + includePaths: [ + 'node_modules/bootstrap-sass/assets/stylesheets', + 'node_modules/font-awesome-sass/assets/stylesheets', + 'node_modules/' + ], + } + }, + }, uglify: { options: { mangle: false @@ -203,26 +523,27 @@ module.exports = function (grunt) { } }, watch: { - copy: { + fonts: { files: [ 'node_modules/bootstrap/dist/fonts/**/*', 'node_modules/font-awesome/fonts/**/*', 'src/fonts/**/*', - 'src/img/**/*' ], - tasks: ['copy'] + tasks: ['copy:fonts'] + }, + images: { + files: [ + 'src/img/**/*' + ], + tasks: ['copy:images'] }, jekyll: { files: 'tests/pages/**/*', tasks: ['pages'] }, - less: { - files: ['src/less/*.less'], - tasks: ['less'] - }, - css: { - files: ['dist/css/patternfly*.css', 'dist/css/!*.min.css'], - tasks: ['cssmin','csscount'] + styles: { + files: ['src/less/*.less', 'src/sass/**/*.scss'], + tasks: ['clean:testBuild', 'lessToSass', 'copy:less', 'copy:sass', 'less', 'sass', 'shipcss'] }, js: { files: ['src/js/*.js'], @@ -233,7 +554,7 @@ module.exports = function (grunt) { }, options: { livereload: true - } + }, }, karma: { unit: { @@ -272,9 +593,9 @@ module.exports = function (grunt) { files: [ { expand: true, // Enable dynamic expansion. - cwd: 'dist/css/', // Src matches are relative to this path. - src: ['*.css'], // Actual pattern(s) to match. - dest: 'dist/css' // Destination path prefix. + cwd: 'tests/build/', // Src matches are relative to this path. + src: ['**/*.css'], // Actual pattern(s) to match. + dest: 'tests/build' // Destination path prefix. } ] } @@ -292,28 +613,43 @@ module.exports = function (grunt) { grunt.log.writeln('Builidng test pages with liquid.js'); done = this.async(); pageBuilder.build() - .then(function () { - done(); - }); + .then(function () { + done(); + }); } else { grunt.log.writeln('Invalid taget:', target); } }); - grunt.registerTask('build', [ - 'clean', - 'concat', - 'copy', - 'pages', - 'less', - 'cssmin', - 'postcss', - 'csscount', - 'eslint', - 'uglify', - 'htmlhint', - 'stylelint' - ]); + grunt.registerTask('shipcss', function(){ + grunt.task.run(['cssmin', 'postcss', 'csscount']); + if(sassBuild){ + grunt.task.run('copy:sassBuild'); + } else { + grunt.task.run('copy:lessBuild'); + } + }) + + grunt.registerTask('build', function(){ + grunt.task.run([ + 'clean', + 'concat', + 'pages', + 'lessToSass', + 'copy:fonts', + 'copy:images', + 'copy:less', + 'copy:sass', + 'copy:js', + 'sass', + 'less', + 'shipcss', + 'eslint', + 'uglify', + 'htmlhint', + 'stylelint' + ]); + }); grunt.registerTask('serve', [ 'connect:server', diff --git a/README.md b/README.md index ac855cf6e5..c6c64fd3a9 100644 --- a/README.md +++ b/README.md @@ -55,7 +55,12 @@ exclude: [ ### Sass and/or Rails -A [Sass port of PatternFly](https://github.com/patternfly/patternfly-sass) is available, as is a [Sass-based Rails Gem](https://rubygems.org/gems/patternfly-sass). +**Patternfly now supports Sass natively!** +Sass is included in the `dist/sass` directory. Just add `node_modules` to your build tool's Sass include paths then `@import 'patternfly/dist/sass/patternfly';` in your Sass to get started! + +Please note that the packages listed below are no longer supported and will not include any features or fixes introduced after Patternfly 3.23.2 +- NPM package: [patternfly-sass 3.23.2](https://github.com/patternfly/patternfly-sass) +- Ruby Gem: [patternfly-sass 3.23.2](https://rubygems.org/gems/patternfly-sass) ### AngularJS @@ -203,7 +208,7 @@ The tool will prompt you with several questions that it will use to correctly fo ### CSS -In development, styling is written and managed through multiple lesscss files. In order to generate a CSS file of all styling, run the build Gruntjs task: +In development, styling is written and managed through multiple Less files. In order to generate a CSS file of all styling, run the build Gruntjs task: ``` npm run build @@ -215,7 +220,153 @@ or grunt build ``` -This task will compile and minify the lesscss files into CSS files located at `dist/css/patternfly.min.css` and `dist/css/patternfly-additional.min.css`. +This task will compile and minify the Less files into CSS files located at `dist/css/patternfly.min.css` and `dist/css/patternfly-additions.min.css`. + +### Less to Sass Conversion +Any time style changes are introduced, the Sass code will need to be updated to reflect those changes. The conversion is accomplished as part of the build, but in order to test the CSS you will need to build it from Sass: + +``` +npm start -- --sass +``` +*Note the extra ` -- ` between `npm start` and the `--sass` flag. This syntax passes the flag on to the underlying grunt process instead of the npm command itself.* + +or + +``` +grunt build --sass +``` + +These tasks will run a Less to Sass conversion, then compile and minify the resulting Sass into CSS, creating a `dist/css/patternfly.css` file. Note that building from Sass does not create the `dist/css/patternfly-additions.css` file, which is the expected behavior. + +The Less to Sass Conversion step will be accomplished and managed as a part of any Pull Request which includes Less file changes. Although contributors may want to build and test their style changes with Sass before submitting a Pull Request, this step should always be tested and validated by reviewers before a style change is merged and released. If a contributor is having issues with Sass conversion that they cannot resolve, Pull Request reviewers will need to ensure that the Sass conversion step is successfully accomplished, tested, and included in the Pull Request before it is approved and merged. + +### Scenarios to Avoid when Making Less Style Updates + +Sass and Less do not have perfect feature parity, which can sometimes throw a wrench into the conversion process described above. Furthermore, a failed conversion may be somewhat transparent since it may create Sass that will compile to unexpected, but valid CSS. The following are a few known scenarios that can be easily avoided to prevent failures in the Less to Sass conversion process. + +#### Non-parametric Mixins +Sass does not support non-parametric mixins in the same way that Less does. Mixins must be explictly declared in Sass, whereas any class definition in Less can be used as a non-parametric mixin. Sass does not have a feature that perfectly parallels this behavior, so we have to use the closest thing which is the `@extend` statement. However, an edge case exists where `@extend` statements are not allowed within media queries in Sass. This creates a scenario where uncompilable Sass code can be generated from perfectly acceptable Less. For example: +**Less:** +``` + .applauncher-pf { + .applauncher-pf-title { + .sr-only(); + } + } + + @media (min-width: @screen-sm-min) { + .applauncher-pf; + } +``` + +**Converts to Sass:** +``` + .applauncher-pf { + .applauncher-pf-title { + @extend .sr-only; + } + } + + @media (min-width: @screen-sm-min) { + @extend applauncher-pf; //Invalid Sass + } +``` + +This breaks for two reasons. We cannot use the `@extend` statement directly inside a media query, and even if we are able to work around that by making applauncher-pf into a mixin and using the `@include` directive, `.applauncher-pf .applauncher-pf-title` uses the `@extend` directive, which would still fall within the media query via the mixin invocation. To fix this, the Less would need to be adjusted like this: + +**Less** +``` + // Explicitly define a non-parametric sr-only mixin. + .sr-only() { + // sr-only rules; + } + + // Explicitly define a non-parametric applauncher-pf mixin. + .applauncher-pf() { + .applauncher-pf-title { + // Explicitly invoke sr-only mixin. + .sr-only(); + } + } + + // Define the .applauncher-pf class and explicitly invoke the applauncher-pf + // mixin. + .applauncher-pf { + .applauncher-pf(); + } + + @media (min-width: @screen-sm-min) { + // Explicitly invoke applauncher-pf mixin inside of media query + .applauncher-pf(); + } +``` + +**Converts to Sass:** +``` + @mixin sr-only() { + // sr-only rules + } + + @mixin applauncher-pf() { + .applauncher-pf-title { + @include sr-only(); + } + } + + .applauncher-pf { + @include applauncher-pf(); + } + + @media (min-width: @screen-sm-min) { + @include applauncher-pf(); + } +``` + +#### Tilde-Escaped Strings +Strings that are escaped using the tilde in Less get converted to the Sass `unquote()` function. This causes Sass compilation issues when using escaped strings inside native CSS functions like `calc()`. Here is what happens: +Less: +``` +height: calc(~"100vh - 20px"); +``` +Converts to Sass: +``` +height: calc(unqoute("100vh - 20px")): +``` +Which compiles directly to CSS and does not work as expected: +``` +height: calc(unqoute("100vh - 20px")): +``` + +To fix this, move the tilde operator outside of the `calc()` statement: + +Less: +``` +height: ~"calc(100vh - 20px)"; +``` +Converts to Sass: +``` +height: unqoute("calc(100vh - 20px)"); +``` +Compiles to CSS: +``` +height: calc(100vh - 20px); +``` + +#### Comma Separated CSS Rules +Using complex, comma separated rules in things like box shadows or backgrounds will cause conversion problems if they are not properly escaped. These rules should be escaped, and mixins and variables should not be used inline. For example, this statement should not be used in Less: +``` +box-shadow: inset 0 1px 1px fade(@color-pf-black, 7.5%), 0 0 6px lighten(@state-danger-text, 20%); +``` + +Instead, mixins should be assigned to variables, and variables should be interpolated in an escaped string like this: + +``` +@color1: fade(@color-pf-black, 7.5%); +@color2: lighten(@state-danger-text, 20%); +box-shadow: ~"inset 0 1px 1px @{color1}, 0 0 6px @{color2}"; +``` + +This is especially important when passing a complex rule to a mixin. ### PatternFlyIcons Font diff --git a/bower.json b/bower.json index b6cf161267..e43567aab9 100644 --- a/bower.json +++ b/bower.json @@ -22,6 +22,7 @@ "dependencies": { "bootstrap": "~3.3.7", "bootstrap-datepicker": "~1.6.4", + "bootstrap-sass": "^3.3.7", "bootstrap-select": "~1.12.2", "bootstrap-switch": "<=3.3.3", "bootstrap-touchspin": "~3.1.1", @@ -30,11 +31,12 @@ "datatables": "~1.10.15", "datatables-colreorder": "~1.3.2", "datatables-colvis": "~1.1.2", + "eonasdan-bootstrap-datetimepicker": "~4.17.47", "font-awesome": "~4.7.0", + "font-awesome-sass": "~4.7.0", "google-code-prettify": "~1.0.5", "jquery": "~3.2.1", "matchHeight": "~0.7.2", - "eonasdan-bootstrap-datetimepicker": "~4.17.47", "moment": "~2.18.1", "patternfly-bootstrap-combobox": "~1.1.7", "patternfly-bootstrap-treeview": "~2.1.0" diff --git a/lib/patternfly-sass.rb b/lib/patternfly-sass.rb new file mode 100644 index 0000000000..1205831d1e --- /dev/null +++ b/lib/patternfly-sass.rb @@ -0,0 +1,92 @@ +require 'patternfly-sass/version' +module Patternfly + class << self + # Inspired by Kaminari + def load! + register_compass_extension if compass? + + if rails? + register_rails_engine + elsif sprockets? + register_sprockets + end + + configure_sass + end + + # Paths + def gem_path + @gem_path ||= File.expand_path '..', File.dirname(__FILE__) + end + + def stylesheets_path + File.join assets_path, 'sass' + end + + def fonts_path + File.join assets_path, 'fonts' + end + + def javascripts_path + File.join assets_path, 'js' + end + + def images_path + File.join assets_path, 'img' + end + + def assets_path + @assets_path ||= File.join gem_path, 'dist' + end + + # Environment detection helpers + def sprockets? + defined?(::Sprockets) + end + + def compass? + defined?(::Compass) + end + + def rails? + defined?(::Rails) + end + + private + + def configure_sass + require 'sass' + + ::Sass.load_paths << stylesheets_path + + # bootstrap requires minimum precision of 8, see https://github.com/twbs/bootstrap-sass/issues/409 + ::Sass::Script::Number.precision = [8, ::Sass::Script::Number.precision].max + end + + def register_compass_extension + ::Compass::Frameworks.register( + 'patternfly', + :version => Patternfly::VERSION, + :path => gem_path, + :stylesheets_directory => stylesheets_path, + :templates_directory => File.join(gem_path, 'templates') + ) + end + + def register_rails_engine + require 'bootstrap-sass' + require 'font-awesome-sass' + + require 'patternfly-sass/engine' + end + + def register_sprockets + Sprockets.append_path(stylesheets_path) + Sprockets.append_path(fonts_path) + Sprockets.append_path(javascripts_path) + Sprockets.append_path(images_path) + end + end +end + +Patternfly.load! diff --git a/lib/patternfly-sass/engine.rb b/lib/patternfly-sass/engine.rb new file mode 100644 index 0000000000..f0c254d6ad --- /dev/null +++ b/lib/patternfly-sass/engine.rb @@ -0,0 +1,11 @@ +module Patternfly + module Rails + class Engine < ::Rails::Engine + initializer 'patternfly-sass.assets.precompile' do |app| + %w(fonts img js sass).each do |sub| + app.config.assets.paths << root.join('dist', sub).to_s + end + end + end + end +end diff --git a/lib/patternfly-sass/version.rb b/lib/patternfly-sass/version.rb new file mode 100644 index 0000000000..07f9c01704 --- /dev/null +++ b/lib/patternfly-sass/version.rb @@ -0,0 +1,5 @@ +module Patternfly + require 'json' + path = File.join(File.dirname(__FILE__), '../../package.json') + VERSION = JSON.parse(File.read(path))['version'] +end diff --git a/package.json b/package.json index d8c5df49b1..dbe5cde866 100644 --- a/package.json +++ b/package.json @@ -34,8 +34,10 @@ "grunt-htmlhint": "^0.9.13", "grunt-jekyll": "^0.4.4", "grunt-karma": "^2.0.0", + "grunt-lassie": "0.0.1", "grunt-postcss": "^0.8.0", "grunt-run": "^0.6.0", + "grunt-sass": "^2.0.0", "grunt-stylelint": "^0.7.0", "html-pdf": "^2.2.0", "husky": "^0.14.3", @@ -62,6 +64,7 @@ }, "optionalDependencies": { "bootstrap-datepicker": "~1.6.4", + "bootstrap-sass": "^3.3.7", "bootstrap-select": "^1.12.2", "bootstrap-slider": "^9.9.0", "bootstrap-switch": "~3.3.4", @@ -74,6 +77,7 @@ "datatables.net-select": "~1.2.0", "drmonty-datatables-colvis": "~1.1.2", "eonasdan-bootstrap-datetimepicker": "^4.17.47", + "font-awesome-sass": "^4.7.0", "google-code-prettify": "~1.0.5", "jquery-match-height": "^0.7.2", "moment": "~2.14.1", diff --git a/patternfly-sass.gemspec b/patternfly-sass.gemspec new file mode 100644 index 0000000000..6ec01495d1 --- /dev/null +++ b/patternfly-sass.gemspec @@ -0,0 +1,30 @@ +lib = File.expand_path('../lib', __FILE__) +$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib) +require 'patternfly-sass/version' + +Gem::Specification.new do |s| + s.name = 'patternfly-sass' + s.version = Patternfly::VERSION + s.authors = ['Dávid Halász', 'Alex Wood'] + s.email = 'patternflyui@gmail.com' + s.summary = "Red Hat's Patternfly, converted to Sass and ready to drop into Rails" + s.homepage = 'https://github.com/Patternfly/patternfly' + s.license = 'Apache-2.0' + + s.add_runtime_dependency 'sass', '~> 3.4.15' + s.add_runtime_dependency 'bootstrap-sass', '~> 3.3.7' + s.add_runtime_dependency 'font-awesome-sass', '~> 4.6.2' + + s.files = [ + 'patternfly-sass.gemspec', + 'LICENSE.txt', + 'README.md', + 'CODE_OF_CONDUCT.md', + 'QUICKSTART.md', + 'OPEN_SOURCE_LICENCES.txt', + Dir.glob('dist/sass/**/*'), + Dir.glob('dist/js/**/*'), + Dir.glob('dist/fonts/**/*'), + Dir.glob('dist/img/**/*') + ].flatten +end diff --git a/src/js/patternfly-settings-base.js b/src/js/patternfly-settings-base.js index 1f35cd09b6..eab3a06d13 100644 --- a/src/js/patternfly-settings-base.js +++ b/src/js/patternfly-settings-base.js @@ -2,7 +2,7 @@ 'use strict'; var patternfly = { - version: "3.26.1", + version: "0.0.0-semantically-released", }; // definition of breakpoint sizes for tablet and desktop modes diff --git a/src/less/about-modal.less b/src/less/about-modal.less index da4e7276d0..633f30a7c5 100644 --- a/src/less/about-modal.less +++ b/src/less/about-modal.less @@ -41,4 +41,4 @@ .trademark-pf { font-size: ceil((@font-size-base - 1)); -} \ No newline at end of file +} diff --git a/src/less/application-launcher.less b/src/less/application-launcher.less index a941290767..cdf92522a0 100644 --- a/src/less/application-launcher.less +++ b/src/less/application-launcher.less @@ -7,7 +7,7 @@ overflow: visible; .applauncher-pf-title { - .sr-only; + .sr-only-pf(); } .dropdown-toggle { diff --git a/src/less/bootstrap-datepicker.less b/src/less/bootstrap-datepicker.less index 708b2466d6..84ba814e54 100644 --- a/src/less/bootstrap-datepicker.less +++ b/src/less/bootstrap-datepicker.less @@ -7,22 +7,30 @@ border-color: @input-border !important; color: @input-color; .box-shadow(inset 0 1px 1px fade(@color-pf-black, 7.5%)); - .form-control-focus(); + .form-control-outline(); &:focus { + // TODO Create global variables for validation box shadows? + @input-validation-focus-box-shadow: fade(@color-pf-black, 7.5%); border-color: @input-border-focus !important; .has-error & { + // TODO Create global variables for validation box shadows? + @state-danger-input-focus: lighten(@state-danger-text, 20%); + @shadow: ~"inset 0 1px 1px @{input-validation-focus-box-shadow}, 0 0 6px @{state-danger-input-focus}"; border-color: darken(@state-danger-text, 10%); - @shadow: inset 0 1px 1px fade(@color-pf-black, 7.5%), 0 0 6px lighten(@state-danger-text, 20%); .box-shadow(@shadow); } .has-success & { + // TODO Create global variables for validation box shadows? + @state-success-input-focus: lighten(@state-success-text, 20%); + @shadow: ~"inset 0 1px 1px @{input-validation-focus-box-shadow}, 0 0 6px @{state-success-input-focus}"; border-color: darken(@state-success-text, 10%); - @shadow: inset 0 1px 1px fade(@color-pf-black, 7.5%), 0 0 6px lighten(@state-success-text, 20%); .box-shadow(@shadow); } .has-warning & { + // TODO Create global variables for validation box shadows? + @state-warning-input-focus: lighten(@state-warning-text, 20%); + @shadow: ~"inset 0 1px 1px @{input-validation-focus-box-shadow}, 0 0 6px @{state-warning-input-focus}"; border-color: darken(@state-warning-text, 10%); - @shadow: inset 0 1px 1px fade(@color-pf-black, 7.5%), 0 0 6px lighten(@state-warning-text, 20%); .box-shadow(@shadow); } } diff --git a/src/less/bootstrap-mixin-overrides.less b/src/less/bootstrap-mixin-overrides.less new file mode 100644 index 0000000000..5da88eab0c --- /dev/null +++ b/src/less/bootstrap-mixin-overrides.less @@ -0,0 +1,35 @@ +// Mixins - Bootstrap overrides +// ------------------- + +// Form control outline +.form-control-outline(@color: @input-border-focus) { + @color-rgba: rgba(red(@color), green(@color), blue(@color), .6); + &:focus { + border-color: @color; + outline: 0 !important; + .box-shadow(~"inset 0 1px 1px rgba(3, 3, 3, 0.075), 0 0 8px @{color-rgba}"); + } +} + +// Gradients +#gradient { + .striped(@color: fade(@color-pf-black, 15%); @angle: -45deg) { + background-image: linear-gradient(@angle, @color 25%, @color 26%, transparent 27%, transparent 49%, @color 50%, @color 51%, transparent 52%, transparent 74%, @color 75%, @color 76%, transparent 77%); + } +} + +// Horizontal dividers +.nav-divider(@color: @color-pf-black-200, @margin: 4px 1px) { + background-color: @color; + height: 1px; + margin: @margin; + overflow: hidden; +} + +// Placeholder text +.placeholder(@color: @input-color-placeholder) { + &:-moz-placeholder { color: @color; font-style: italic; } // Firefox 4-18 + &::-moz-placeholder { color: @color; font-style: italic; opacity: 1; } // Firefox 19+ + &:-ms-input-placeholder { color: @color; font-style: italic; } // Internet Explorer 10+ + &::-webkit-input-placeholder { color: @color; font-style: italic; } // Safari and Chrome +} diff --git a/src/less/bootstrap-select.less b/src/less/bootstrap-select.less index 9b7b5b65e6..7bc6db34a9 100644 --- a/src/less/bootstrap-select.less +++ b/src/less/bootstrap-select.less @@ -7,6 +7,8 @@ margin-bottom: 0; } .btn { + // TODO Create global variable for validation state box shadows? + @input-validation-focus-box-shadow: fade(@color-pf-black, 7.5%); &:hover { border-color: @input-border-hover; } @@ -17,24 +19,30 @@ .has-error & { border-color: @state-danger-text; &:focus { + // TODO Create global variable for validation state box shadows? + @state-danger-input-focus: lighten(@state-danger-text, 20%); + @shadow: ~"inset 0 1px 1px @{input-validation-focus-box-shadow}, 0 0 6px @{state-danger-input-focus}"; border-color: darken(@state-danger-text, 10%); - @shadow: inset 0 1px 1px fade(@color-pf-black, 7.5%), 0 0 6px lighten(@state-danger-text, 20%); .box-shadow(@shadow); } } .has-success & { border-color: @state-success-text; &:focus { + // TODO Create global variable for validation state box shadows? + @state-success-input-focus: lighten(@state-success-text, 20%); + @shadow: ~"inset 0 1px 1px @{input-validation-focus-box-shadow}, 0 0 6px @{state-success-input-focus}"; border-color: darken(@state-success-text, 10%); - @shadow: inset 0 1px 1px fade(@color-pf-black, 7.5%), 0 0 6px lighten(@state-success-text, 20%); .box-shadow(@shadow); } } .has-warning & { border-color: @state-warning-text; &:focus { + // TODO Create global variable for validation state box shadows? + @state-warning-input-focus: lighten(@state-warning-text, 20%); + @shadow: ~"inset 0 1px 1px @{input-validation-focus-box-shadow}, 0 0 6px @{state-warning-input-focus}"; border-color: darken(@state-warning-text, 10%); - @shadow: inset 0 1px 1px fade(@color-pf-black, 7.5%), 0 0 6px lighten(@state-warning-text, 20%); .box-shadow(@shadow); } } diff --git a/src/less/bootstrap-slider.less b/src/less/bootstrap-slider.less index 873952d878..b50fbc063a 100644 --- a/src/less/bootstrap-slider.less +++ b/src/less/bootstrap-slider.less @@ -39,6 +39,7 @@ } .slider-tick { + background-color: transparent !important; background-image: radial-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3) 2px, transparent 2px) !important; .box-shadow(none); diff --git a/src/less/experimental-features.less b/src/less/experimental-features.less index 8b93f0311d..82084ac527 100644 --- a/src/less/experimental-features.less +++ b/src/less/experimental-features.less @@ -44,8 +44,5 @@ } .btn-experimental-pf { - &:extend(.btn-default); - background-color: @color-pf-light-green-400; - background-image: linear-gradient(to bottom, @color-pf-light-green-300 0, @color-pf-light-green-400 100%); - border-color: @color-pf-light-green-400; + .button-variant(@btn-default-color; @color-pf-light-green-400; @color-pf-light-green-300; @color-pf-light-green-400; @color-pf-light-green-400); } diff --git a/src/less/list-pf.less b/src/less/list-pf.less index 5987f40b5b..7badd4c3f0 100644 --- a/src/less/list-pf.less +++ b/src/less/list-pf.less @@ -2,8 +2,6 @@ // PatternFly List // -------------------------------------------------- -@list-pf-main-content-width: 70%; // sets the proportional width of the main content vs the additional content - .list-pf { border-bottom: 1px solid @list-pf-border-color; } diff --git a/src/less/list-view.less b/src/less/list-view.less index bba926a9b6..50614f5199 100644 --- a/src/less/list-view.less +++ b/src/less/list-view.less @@ -53,14 +53,14 @@ font-weight: 400; } @media (min-width: @screen-md-min) { - flex: 1 0 calc(~"25% - 20px"); + flex: 1 0 ~"calc(25% - 20px)"; float: left; // IE9 fallback font-size: @font-size-base; margin: 0 (@grid-gutter-width/2) 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - width: calc(~"25% - 20px"); // IE9 fallback + width: ~"calc(25% - 20px)"; // IE9 fallback } } .list-group-item-text { @@ -70,7 +70,7 @@ flex: 1 0 auto; // it covers whats left from the title float: left; // IE9 fallback margin: 0 @grid-gutter-width 0 0; - width: calc(~"75% - 40px"); // IE9 fallback + width: ~"calc(75% - 40px)" // IE9 fallback } } } diff --git a/src/less/mixins.less b/src/less/mixins.less index 0aca84ee45..8ed71a4046 100644 --- a/src/less/mixins.less +++ b/src/less/mixins.less @@ -1,12 +1,9 @@ // -// Mixins +// Patternfly Mixins // -------------------------------------------------- -// Bootstrap overrides and PatternFly-specific mixins +// PatternFly-specific mixins -// Bootstrap overrides -// ------------------- - -// Button variants +// Patternfly button variants. .button-variant(@color; @background; @background-image-start; @background-image-stop; @border) { background-color: @background; #gradient > .vertical(@background-image-start, @background-image-stop); @@ -48,42 +45,20 @@ } } -// Form control outline -.form-control-outline(@color: @input-border-focus) { - @color-rgba: rgba(red(@color), green(@color), blue(@color), .6); - &:focus { - border-color: @color; - outline: 0 !important; - .box-shadow(~"inset 0 1px 1px rgba(3, 3, 3, 0.075), 0 0 8px @{color-rgba}"); - } -} - -// Gradients -#gradient { - .striped(@color: fade(@color-pf-black, 15%); @angle: -45deg) { - background-image: linear-gradient(@angle, @color 25%, @color 26%, transparent 27%, transparent 49%, @color 50%, @color 51%, transparent 52%, transparent 74%, @color 75%, @color 76%, transparent 77%); - } -} - -// Horizontal dividers -.nav-divider(@color: @color-pf-black-200, @margin: 4px 1px) { - background-color: @color; +// SASS CONVERSION FIX. +// Allows inclusion of sr-only rules in nested media queries where @extends .sr-only +// will not work. +.sr-only-pf() { + position: absolute; + width: 1px; height: 1px; - margin: @margin; + margin: -1px; + padding: 0; overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; } -// Placeholder text -.placeholder(@color: @input-color-placeholder) { - &:-moz-placeholder { color: @color; font-style: italic; } // Firefox 4-18 - &::-moz-placeholder { color: @color; font-style: italic; opacity: 1; } // Firefox 19+ - &:-ms-input-placeholder { color: @color; font-style: italic; } // Internet Explorer 10+ - &::-webkit-input-placeholder { color: @color; font-style: italic; } // Safari and Chrome -} - -// PatternFly-specific -// ------------------- - .tab-indicator(@background: @gray-light-pf, @left: 15px, @right: 15px) { &:before { background: @background; @@ -104,4 +79,3 @@ white-space: nowrap; word-wrap: normal; } - diff --git a/src/less/notifications-drawer.less b/src/less/notifications-drawer.less index 3634ac384c..00049b0dfb 100644 --- a/src/less/notifications-drawer.less +++ b/src/less/notifications-drawer.less @@ -214,7 +214,7 @@ /* Exclusive styles to work with Vertical Navigation */ .navbar-pf-vertical { .drawer-pf { - height: calc(~"100vh - @{drawer-pf-top-vertical} - 20px");//to create a 20px offset bottom + height: ~"calc(100vh - @{drawer-pf-top-vertical} - 20px)";//to create a 20px offset bottom top: @drawer-pf-top-vertical; //menu height; @media (max-width: @screen-xs-max) { width:100%; @@ -238,7 +238,7 @@ /* Exclusive styles to work with Horizontal Navigation */ .navbar-pf { .drawer-pf { - height: calc(~"100vh - @{drawer-pf-top-horizontal} - 20px"); + height: ~"calc(100vh - @{drawer-pf-top-horizontal} - 20px)"; top: @drawer-pf-top-horizontal; @media (max-width: @screen-xs-max) { width:100%; diff --git a/src/less/patternfly-additions.less b/src/less/patternfly-additions.less index 8196014223..16c0848763 100644 --- a/src/less/patternfly-additions.less +++ b/src/less/patternfly-additions.less @@ -26,6 +26,7 @@ @import "eonasdan-bootstrap-datetimepicker/src/less/bootstrap-datetimepicker-build.less"; @import "variables.less"; +@import "bootstrap-mixin-overrides.less"; @import "mixins.less"; @import "about-modal.less"; @import "application-launcher.less"; diff --git a/src/less/patternfly.less b/src/less/patternfly.less index 7b70352964..91aa107395 100644 --- a/src/less/patternfly.less +++ b/src/less/patternfly.less @@ -9,6 +9,7 @@ // Bootstrap overrides @import "variables.less"; +@import "bootstrap-mixin-overrides.less"; @import "mixins.less"; @import "alerts.less"; @import "badges.less"; diff --git a/src/less/time-picker.less b/src/less/time-picker.less index 2f0f02694e..f73a0100e8 100644 --- a/src/less/time-picker.less +++ b/src/less/time-picker.less @@ -1,8 +1,6 @@ // // Time Picker // -------------------------------------------------- -@bs-datetimepicker-timepicker-font-size: 1em; -@bs-datetimepicker-btn-hover-bg: transparent; .bootstrap-datetimepicker-widget { a[data-action] { border: 0; @@ -16,7 +14,7 @@ &.dropdown-menu { left: 0!important; padding: 0; - width: calc(~"100% - 25px"); + width: ~"calc(100% - 25px)"; &:before, &:after { content: none; } diff --git a/src/less/variables.less b/src/less/variables.less index 5c248ec4f3..4d66d0b87c 100644 --- a/src/less/variables.less +++ b/src/less/variables.less @@ -3,6 +3,10 @@ // -------------------------------------------------- // Bootstrap overrides and PatternFly-specific variables +// Sass compass/sprockets asset helper flag +// ---------------------- +@pf-sass-asset-helper: false; + // PatternFly-specific // ------------------- @import "color-variables.less"; @@ -72,6 +76,7 @@ @list-pf-active-border-color: @color-pf-black-400; @list-pf-header-background-color: @color-pf-black-200; @list-pf-hover-background-color: @color-pf-blue-25; +@list-pf-main-content-width: 70%; // sets the proportional width of the main content vs the additional content @list-pf-padding: 20px; @list-view-accented-border: @color-pf-blue-300; @list-view-active-bg: @color-pf-blue-50; @@ -152,7 +157,7 @@ @nav-pf-vertical-secondary-link-height: 63px; @nav-pf-vertical-secondary-link-padding: 4px 0 2px 0; @nav-pf-vertical-secondary-list-header-margin: 30px 20px 10px 20px; -@nav-pf-vertical-tertiary-active-color: @color-pf-white; +@nav-pf-vertical-tertiary-active-color: @color-pf-white; @nav-pf-vertical-tertiary-active-bg-color: @color-pf-black-800; @nav-pf-vertical-tertiary-indicator-padding: 0; @nav-pf-vertical-tertiary-bg-color: @color-pf-black-700; @@ -324,12 +329,12 @@ @navbar-pf-navbar-primary-context-active-border-top-color: lighten(@navbar-pf-navbar-primary-context-hover-border-top-color, 6%); // References variable declared in block above @navbar-pf-navbar-primary-context-active-border-right-color: @navbar-pf-navbar-primary-context-active-border-color; -@slider-line-height: 16px; -@slider-horizontal-width: 100%; -@slider-primary-top: @color-pf-black-100; -@slider-primary-bottom: @color-pf-black-200; -@slider-secondary-top: @color-pf-blue-400; -@slider-secondary-bottom: @color-pf-blue-300; +@slider-line-height: 16px; +@slider-horizontal-width: 100%; +@slider-primary-top: @color-pf-black-100; +@slider-primary-bottom: @color-pf-black-200; +@slider-secondary-top: @color-pf-blue-400; +@slider-secondary-bottom: @color-pf-blue-300; // Alternate navigation layout - Kept for backwards compatibility // -------------------------------------------------------------- @@ -378,6 +383,8 @@ @brand-warning: @color-pf-orange; @breadcrumb-bg: transparent; @breadcrumb-separator: "\f105"; +@bs-datetimepicker-timepicker-font-size: 1em; +@bs-datetimepicker-btn-hover-bg: transparent; @btn-danger-bg: @color-pf-red-200; @btn-danger-border: @color-pf-red-300; @btn-default-border: @color-pf-black-400; diff --git a/src/less/vertical-nav.less b/src/less/vertical-nav.less index 758d997ba9..268a534764 100644 --- a/src/less/vertical-nav.less +++ b/src/less/vertical-nav.less @@ -216,34 +216,34 @@ } } .hover-secondary-nav-pf { - width: calc(@nav-pf-vertical-width * 2); + width: ~"calc(@{nav-pf-vertical-width} * 2)"; &.nav-pf-vertical-with-badges { - width: calc(@nav-pf-vertical-badges-width * 2); + width: ~"calc(@{nav-pf-vertical-badges-width} * 2)"; } } .hover-tertiary-nav-pf { - width: calc(@nav-pf-vertical-width * 3); + width: ~"calc(@{nav-pf-vertical-width} * 3)"; &.nav-pf-vertical-with-badges { - width: calc(@nav-pf-vertical-badges-width * 3); + width: ~"calc(@{nav-pf-vertical-badges-width} * 3)"; } .nav-pf-secondary-nav { - width: calc(@nav-pf-vertical-width * 2); + width: ~"calc(@{nav-pf-vertical-width} * 2)"; .collapsed-tertiary-nav-pf { width: @nav-pf-vertical-width; } } .nav-pf-tertiary-nav { - left: calc(@nav-pf-vertical-width * 2); + left: ~"calc(@{nav-pf-vertical-width} * 2)"; } &.nav-pf-vertical-with-badges { .nav-pf-secondary-nav { - width: calc(@nav-pf-vertical-badges-width * 2); + width: ~"calc(@{nav-pf-vertical-badges-width} * 2)"; .collapsed-tertiary-nav-pf { width: @nav-pf-vertical-badges-width; } } .nav-pf-tertiary-nav { - left: calc(@nav-pf-vertical-badges-width * 2); + left: ~"calc(@{nav-pf-vertical-badges-width} * 2)"; } } } @@ -262,15 +262,15 @@ } } &.hover-secondary-nav-pf { - width: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-width); + width: ~"calc(@{nav-pf-vertical-collapsed-width} + @{nav-pf-vertical-width})"; &.nav-pf-vertical-with-badges { - width: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-badges-width); + width: ~"calc(@{nav-pf-vertical-collapsed-width} + @{nav-pf-vertical-badges-width})"; } } &.hover-tertiary-nav-pf { - width: calc(@nav-pf-vertical-collapsed-width + (@nav-pf-vertical-width * 2)); + width: ~"calc(@{nav-pf-vertical-collapsed-width} + (@{nav-pf-vertical-width} * 2))"; &.nav-pf-vertical-with-badges { - width: calc(@nav-pf-vertical-collapsed-width + (@nav-pf-vertical-badges-width * 2)); + width: ~"calc(@{nav-pf-vertical-collapsed-width} + (@{nav-pf-vertical-badges-width} * 2))"; } } } @@ -347,7 +347,7 @@ &.active, &:hover { > a { - width: calc(@nav-pf-vertical-width + 1px); + width: ~"calc(@{nav-pf-vertical-width} + 1px)"; z-index: (@zindex-navbar-fixed + 1); &:after { right: 21px; @@ -364,7 +364,7 @@ &.active, &:hover { > a { - width: calc(@nav-pf-vertical-badges-width + 1px); + width: ~"calc(@{nav-pf-vertical-badges-width} + 1px)"; } } } @@ -423,9 +423,9 @@ } .nav-pf-vertical.nav-pf-persistent-secondary.secondary-visible-pf { // Persistent secondary nav settings @media (min-width: @screen-lg-min) { // secondary menu only persistent at lg screen - width: calc(@nav-pf-vertical-width * 2); + width: ~"calc(@{nav-pf-vertical-width} * 2)"; &.nav-pf-vertical-with-badges { - width: calc(@nav-pf-vertical-badges-width * 2); + width: ~"calc(@{nav-pf-vertical-badges-width} * 2)"; } &.collapsed-secondary-nav-pf { width: @nav-pf-vertical-width; @@ -433,9 +433,9 @@ width: @nav-pf-vertical-badges-width; } &.hover-tertiary-nav-pf { - width: calc(@nav-pf-vertical-width * 2); + width: ~"calc(@{nav-pf-vertical-width} * 2)"; &.nav-pf-vertical-with-badges { - width: calc(@nav-pf-vertical-badges-width * 2); + width: ~"calc(@{nav-pf-vertical-badges-width} * 2)"; } } } @@ -446,7 +446,7 @@ } } &.collapsed { - width: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-width); + width: ~"calc(@{nav-pf-vertical-collapsed-width} + @{nav-pf-vertical-width})"; &.collapsed-secondary-nav-pf { width: @nav-pf-vertical-width; &.nav-pf-vertical-with-badges { @@ -460,16 +460,16 @@ } } &.hover-tertiary-nav-pf { - width: calc(@nav-pf-vertical-collapsed-width + (@nav-pf-vertical-width * 2)); + width: ~"calc(@{nav-pf-vertical-collapsed-width} + (@{nav-pf-vertical-width} * 2))"; &.nav-pf-vertical-with-badges { - width: calc(@nav-pf-vertical-collapsed-width + (@nav-pf-vertical-badges-width * 2)); + width: ~"calc(@{nav-pf-vertical-collapsed-width} + (@{nav-pf-vertical-badges-width} * 2))"; } } } &.hover-tertiary-nav-pf { - width: calc(@nav-pf-vertical-width * 3); + width: ~"calc(@{nav-pf-vertical-width} * 3)"; &.nav-pf-vertical-with-badges { - width: calc(@nav-pf-vertical-badges-width * 3); + width: ~"calc(@{nav-pf-vertical-badges-width} * 3)"; } } .secondary-nav-item-pf.active { @@ -579,7 +579,7 @@ height: inherit; padding: @nav-pf-vertical-secondary-link-padding; margin-left: 20px; - width: calc(@nav-pf-vertical-width - 20px); + width: ~"calc(@{nav-pf-vertical-width} - 20px)"; &:hover { .list-group-item-value { @@ -632,7 +632,7 @@ &.active, &:hover { > a { - width: calc(@nav-pf-vertical-width - 19px); + width: ~"calc(@{nav-pf-vertical-width} - 19px)"; z-index: (@zindex-navbar-fixed + 3); &:after { right: 21px; @@ -647,13 +647,13 @@ .list-group-item { width: @nav-pf-vertical-badges-width; > a { - width: calc(@nav-pf-vertical-badges-width - 20px); + width: ~"calc(@{nav-pf-vertical-badges-width} - 20px)"; } &.tertiary-nav-item-pf { // Secondary menu items with tertiary sub menus &.active, &:hover { > a { - width: calc(@nav-pf-vertical-badges-width - 19px); + width: ~"calc(@{nav-pf-vertical-badges-width} - 19px)"; } } } @@ -667,7 +667,7 @@ border-top: none; bottom: 0; display: block; - left: calc(@nav-pf-vertical-width * 2); + left: ~"calc(@{nav-pf-vertical-width} * 2)"; opacity: 0; overflow-x: hidden; overflow-y: auto; @@ -753,7 +753,7 @@ left: @nav-pf-vertical-collapsed-width; .list-group-item { > a { - width: calc(@nav-pf-vertical-width - 20px); + width: ~"calc(@{nav-pf-vertical-width} - 20px)"; > .list-group-item-value { // Continue to show labels for secondary menu items display: inline-block; } @@ -764,10 +764,10 @@ } } .nav-pf-tertiary-nav { // Adjust left placement - left: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-width); + left: ~"calc(@{nav-pf-vertical-collapsed-width} + @{nav-pf-vertical-width})"; .list-group-item { > a { - width: calc(@nav-pf-vertical-width - 20px); + width: ~"calc(@{nav-pf-vertical-width} - 20px)"; > .list-group-item-value { // Continue to show labels for tertiary menu items display: inline-block; } @@ -802,7 +802,7 @@ } } &.hover-secondary-nav-pf { - width: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-width); + width: ~"calc(@{nav-pf-vertical-collapsed-width} + @{nav-pf-vertical-width})"; &.collapsed-secondary-nav-pf, &.collapsed-tertiary-nav-pf { @@ -810,9 +810,9 @@ } } &.hover-tertiary-nav-pf { - width: calc(@nav-pf-vertical-collapsed-width + (@nav-pf-vertical-width * 2)); + width: ~"calc(@{nav-pf-vertical-collapsed-width} + (@{nav-pf-vertical-width} * 2))"; &.collapsed-secondary-nav-pf { - width: calc(@nav-pf-vertical-width * 2); + width: ~"calc(@{nav-pf-vertical-width} * 2)"; } &.collapsed-tertiary-nav-pf { width: @nav-pf-vertical-width; @@ -822,15 +822,15 @@ .nav-pf-secondary-nav { .list-group-item { > a { - width: calc(@nav-pf-vertical-badges-width - 20px); + width: ~"calc(@{nav-pf-vertical-badges-width} - 20px)"; } } } .nav-pf-tertiary-nav { - left: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-badges-width); + left: ~"calc(@{nav-pf-vertical-collapsed-width} + @{nav-pf-vertical-badges-width})"; .list-group-item { > a { - width: calc(@nav-pf-vertical-badges-width - 20px); + width: ~"calc(@{nav-pf-vertical-badges-width} - 20px)"; } } } @@ -844,16 +844,16 @@ } } &.hover-secondary-nav-pf { - width: calc(@nav-pf-vertical-collapsed-width + @nav-pf-vertical-badges-width); + width: ~"calc(@{nav-pf-vertical-collapsed-width} + @{nav-pf-vertical-badges-width})"; &.collapsed-secondary-nav-pf, &.collapsed-tertiary-nav-pf { width: @nav-pf-vertical-badges-width; } } &.hover-tertiary-nav-pf { - width: calc(@nav-pf-vertical-collapsed-width + (@nav-pf-vertical-width * 2)); + width: ~"calc(@{nav-pf-vertical-collapsed-width} + (@{nav-pf-vertical-width} * 2))"; &.collapsed-secondary-nav-pf { - width: calc(@nav-pf-vertical-width * 2); + width: ~"calc(@{nav-pf-vertical-width} * 2)"; } &.collapsed-tertiary-nav-pf { width: @nav-pf-vertical-width; diff --git a/src/sass/build.scss b/src/sass/build.scss new file mode 100644 index 0000000000..79bed72f56 --- /dev/null +++ b/src/sass/build.scss @@ -0,0 +1 @@ +@import '../../dist/sass/patternfly'; diff --git a/src/sass/converted/patternfly/_about-modal.scss b/src/sass/converted/patternfly/_about-modal.scss new file mode 100644 index 0000000000..7b4d4b6acb --- /dev/null +++ b/src/sass/converted/patternfly/_about-modal.scss @@ -0,0 +1,44 @@ +// +// About Modal +// -------------------------------------------------- + +.about-modal-pf { + background-color: $color-pf-black-900; + background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$modal-about-pf-bg-img}"), "#{$img-path}#{$modal-about-pf-bg-img}")); + background-position: right bottom; + background-repeat: no-repeat; + background-size: 216px auto; + @media (min-width: $screen-sm-min) { + background-size: auto; + } + .modal-body { + color: $color-pf-white; + padding-bottom: 16px; + padding-left: $grid-gutter-width; + padding-right: $grid-gutter-width; + @media (min-width: $screen-sm-min) { + padding-left: ($grid-gutter-width * 2); + padding-right: ($grid-gutter-width * 2); + } + } + .modal-header { + background-color: transparent; + } + .pficon-close { + color: $color-pf-white; + } +} + +.product-versions-pf { + margin-bottom: 30px; + margin-top: 30px; + li { + strong { + margin-right: ($grid-gutter-width / 4); + } + } +} + +.trademark-pf { + font-size: ceil(($font-size-base - 1)); +} diff --git a/src/sass/converted/patternfly/_alerts.scss b/src/sass/converted/patternfly/_alerts.scss new file mode 100644 index 0000000000..fbc835374b --- /dev/null +++ b/src/sass/converted/patternfly/_alerts.scss @@ -0,0 +1,44 @@ +// +// Alerts +// -------------------------------------------------- + +.alert { + border-width: 1px; + padding-left: 47px; + padding-right: ($alert-padding + 3); + position: relative; + word-wrap: break-word; + .alert-link { + color: $link-color; + &:hover { + color: $link-hover-color; + } + } + > .btn.pull-right { + margin-top: -3px; + } + > .pficon { + font-size: 22px; + position: absolute; + left: 13px; + top: 10px; + } + .close { + @include opacity(.85); + &:hover, + &:focus { + @include opacity(1); + } + } + .pficon-info { + color: $color-pf-black-700; + } +} + +.alert-dismissable { + padding-right: ($alert-padding + 17); + .close { + right: -13px; + top: 1px; + } +} diff --git a/src/sass/converted/patternfly/_badges.scss b/src/sass/converted/patternfly/_badges.scss new file mode 100644 index 0000000000..e3a536455b --- /dev/null +++ b/src/sass/converted/patternfly/_badges.scss @@ -0,0 +1,11 @@ +// +// Badges +// -------------------------------------------------- + +.badge { + margin-left: 6px; +} + +.nav-pills > li > a > .badge { + margin-left: 6px; +} diff --git a/src/sass/converted/patternfly/_blank-slate.scss b/src/sass/converted/patternfly/_blank-slate.scss new file mode 100644 index 0000000000..b46c35afc9 --- /dev/null +++ b/src/sass/converted/patternfly/_blank-slate.scss @@ -0,0 +1,29 @@ +// +// Blank Slate +// -------------------------------------------------- + +.blank-slate-pf { + @media (min-width: $screen-sm-min) { + padding: ($jumbotron-padding * 2) ($jumbotron-padding * 2); + } + @media (min-width: $screen-md-min) { + padding: ($jumbotron-padding * 3) ($jumbotron-padding * 4); + } + background-color: $well-bg; + border: 1px solid $well-border; + border-radius: $border-radius-base; + margin-bottom: 20px; + padding: $jumbotron-padding; + text-align: center; + .blank-slate-pf-icon { + color: $gray-light; + font-size: ($font-size-h1 * 2.4); + line-height: ($font-size-h1 * 2.4); + } + .blank-slate-pf-main-action { + margin-top: $line-height-computed; + } + .blank-slate-pf-secondary-action { + margin-top: $line-height-computed; + } +} diff --git a/src/sass/converted/patternfly/_bootstrap-combobox.scss b/src/sass/converted/patternfly/_bootstrap-combobox.scss new file mode 100644 index 0000000000..725a4c9b14 --- /dev/null +++ b/src/sass/converted/patternfly/_bootstrap-combobox.scss @@ -0,0 +1,35 @@ +// +// Bootstrap-Combobox +// -------------------------------------------------- + +.combobox-container { + &.combobox-selected .glyphicon-remove { + display: inline-block; + } + .caret { + margin-left: 0; + } + .combobox::-ms-clear { + display: none; + } + .dropdown-menu { + margin-top: -1px; + width: 100%; + } + .glyphicon-remove { + display: none; + top: auto; + width: 12px; + &:before { + content: "\e60b"; + font-family: $icon-font-name-pf; + } + } + .input-group-addon { + @include button-variant($btn-default-color, $btn-default-bg, $btn-default-bg-img-start, $btn-default-bg-img-stop, $btn-default-border); + position: relative; // IE8 + &:active { + @include box-shadow(inset 0 2px 8px rgba($color-pf-black, (20/100))); + } + } +} diff --git a/src/sass/converted/patternfly/_bootstrap-datepicker.scss b/src/sass/converted/patternfly/_bootstrap-datepicker.scss new file mode 100644 index 0000000000..f22022473c --- /dev/null +++ b/src/sass/converted/patternfly/_bootstrap-datepicker.scss @@ -0,0 +1,132 @@ +// +// Bootstrap-Datepicker +// -------------------------------------------------- + +.bootstrap-datepicker.form-control[readonly] { + background-color: $input-bg; + border-color: $input-border !important; + color: $input-color; + @include box-shadow(inset 0 1px 1px fade($color-pf-black, 7.5%)); + @include form-control-outline(); + &:focus { + // TODO Create global variables for validation box shadows? + $input-validation-focus-box-shadow: fade($color-pf-black, 7.5%); + border-color: $input-border-focus !important; + .has-error & { + // TODO Create global variables for validation box shadows? + $state-danger-input-focus: lighten($state-danger-text, 20%); + $shadow: unquote("inset 0 1px 1px #{$input-validation-focus-box-shadow}, 0 0 6px #{$state-danger-input-focus}"); + border-color: darken($state-danger-text, 10%); + @include box-shadow($shadow); + } + .has-success & { + // TODO Create global variables for validation box shadows? + $state-success-input-focus: lighten($state-success-text, 20%); + $shadow: unquote("inset 0 1px 1px #{$input-validation-focus-box-shadow}, 0 0 6px #{$state-success-input-focus}"); + border-color: darken($state-success-text, 10%); + @include box-shadow($shadow); + } + .has-warning & { + // TODO Create global variables for validation box shadows? + $state-warning-input-focus: lighten($state-warning-text, 20%); + $shadow: unquote("inset 0 1px 1px #{$input-validation-focus-box-shadow}, 0 0 6px #{$state-warning-input-focus}"); + border-color: darken($state-warning-text, 10%); + @include box-shadow($shadow); + } + } + &:hover { + border-color: $input-border-hover !important; + .has-error & { + border-color: darken($state-danger-text, 10%) !important; + } + .has-success & { + border-color: darken($state-success-text, 10%) !important; + } + .has-warning & { + border-color: darken($state-warning-text, 10%) !important; + } + } + .has-error & { + border-color: $state-danger-text !important; + } + .has-success & { + border-color: $state-success-text !important; + } + .has-warning & { + border-color: $state-warning-text !important; + } +} + +.datepicker { + border-radius: $border-radius-base; + .datepicker-switch, + tfoot .clear, + tfoot .today { + font-size: $font-size-large; + font-weight: 500; + } + .next, + .prev { + font-weight: 500; + } + table tr { + td, + th { + border-radius: $border-radius-base; + } + td { + &.active, + &.active:hover, + &.active.disabled, + &.active.disabled:hover { + background: $dropdown-link-active-bg !important; + color: $color-pf-white !important; + text-shadow: none; + } + &.day:hover, + &.day.focused { + background: $dropdown-link-hover-bg; + } + &.selected, + &.selected:hover, + &.selected.disabled, + &.selected.disabled:hover { + text-shadow: none; + } + span { + border-radius: $border-radius-base; + &.active, + &.active:hover, + &.active.disabled, + &.active.disabled:hover { + background: $dropdown-link-active-bg; + text-shadow: none; + } + &:hover { + background: $dropdown-link-hover-bg; + } + } + } + } + thead tr:first-child th, + tfoot tr th { + &:hover { + background: $dropdown-link-hover-bg; + } + } +} + +.input-daterange { + input:first-child { + border-radius: $border-radius-base 0 0 $border-radius-base; + } + input:last-child { + border-radius: 0 $border-radius-base $border-radius-base 0; + } + .input-group-addon { + background-color: $input-group-addon-bg; + border-color: $input-group-addon-border-color; + line-height: $line-height-base; + padding: $padding-base-vertical $padding-base-horizontal; + } +} diff --git a/src/sass/converted/patternfly/_bootstrap-mixin-overrides.scss b/src/sass/converted/patternfly/_bootstrap-mixin-overrides.scss new file mode 100644 index 0000000000..fca61f3b86 --- /dev/null +++ b/src/sass/converted/patternfly/_bootstrap-mixin-overrides.scss @@ -0,0 +1,33 @@ +// Mixins - Bootstrap overrides +// ------------------- + +// Form control outline +@mixin form-control-outline($color: $input-border-focus){ + $color-rgba: rgba(red($color), green($color), blue($color), .6); + &:focus { + border-color: $color; + outline: 0 !important; + @include box-shadow(unquote("inset 0 1px 1px rgba(3, 3, 3, 0.075), 0 0 8px #{$color-rgba}")); + } +} + +// Gradients +@mixin gradient-striped($color: rgba($color-pf-black, (15/100)), $angle: -45deg){ + background-image: linear-gradient($angle, $color 25%, $color 26%, transparent 27%, transparent 49%, $color 50%, $color 51%, transparent 52%, transparent 74%, $color 75%, $color 76%, transparent 77%); + } + +// Horizontal dividers +@mixin nav-divider($color: $color-pf-black-200, $margin: 4px 1px){ + background-color: $color; + height: 1px; + margin: $margin; + overflow: hidden; +} + +// Placeholder text +@mixin placeholder($color: $input-color-placeholder){ + &:-moz-placeholder { color: $color; font-style: italic; } // Firefox 4-18 + &::-moz-placeholder { color: $color; font-style: italic; opacity: 1; } // Firefox 19+ + &:-ms-input-placeholder { color: $color; font-style: italic; } // Internet Explorer 10+ + &::-webkit-input-placeholder { color: $color; font-style: italic; } // Safari and Chrome +} diff --git a/src/sass/converted/patternfly/_bootstrap-select.scss b/src/sass/converted/patternfly/_bootstrap-select.scss new file mode 100644 index 0000000000..2e1a9ab001 --- /dev/null +++ b/src/sass/converted/patternfly/_bootstrap-select.scss @@ -0,0 +1,108 @@ +// +// Bootstrap-select +// -------------------------------------------------- + +.bootstrap-select.btn-group { + &.form-control { + margin-bottom: 0; + } + .btn { + // TODO Create global variable for validation state box shadows? + $input-validation-focus-box-shadow: fade($color-pf-black, 7.5%); + &:hover { + border-color: $input-border-hover; + } + .caret { + margin-top: -4px; + } + @include form-control-outline(); + .has-error & { + border-color: $state-danger-text; + &:focus { + // TODO Create global variable for validation state box shadows? + $state-danger-input-focus: lighten($state-danger-text, 20%); + $shadow: unquote("inset 0 1px 1px #{$input-validation-focus-box-shadow}, 0 0 6px #{$state-danger-input-focus}"); + border-color: darken($state-danger-text, 10%); + @include box-shadow($shadow); + } + } + .has-success & { + border-color: $state-success-text; + &:focus { + // TODO Create global variable for validation state box shadows? + $state-success-input-focus: lighten($state-success-text, 20%); + $shadow: unquote("inset 0 1px 1px #{$input-validation-focus-box-shadow}, 0 0 6px #{$state-success-input-focus}"); + border-color: darken($state-success-text, 10%); + @include box-shadow($shadow); + } + } + .has-warning & { + border-color: $state-warning-text; + &:focus { + // TODO Create global variable for validation state box shadows? + $state-warning-input-focus: lighten($state-warning-text, 20%); + $shadow: unquote("inset 0 1px 1px #{$input-validation-focus-box-shadow}, 0 0 6px #{$state-warning-input-focus}"); + border-color: darken($state-warning-text, 10%); + @include box-shadow($shadow); + } + } + @include transition(unquote("border-color ease-in-out .15s, box-shadow ease-in-out .15s")); + } + .dropdown-menu { // Also see navbar.less + > .active > a { + &, + &:active { + background-color: $dropdown-link-hover-bg !important; + border-color: $dropdown-link-hover-border-color !important; + color: $gray-dark !important; + small { + color: $gray-light !important; + } + } + } + > .disabled > a { + color: $gray-light !important; + } + > .selected > a { + background-color: $dropdown-link-active-bg !important; + border-color: $dropdown-link-active-border-color !important; + color: $color-pf-white !important; + small { + color: fade($color-pf-white, 50%) !important; + } + } + .divider { + background: $dropdown-divider-bg !important; + margin: $dropdown-divider-margin !important; + } + dt { + color: $color-pf-black-500; + font-weight:normal; + padding: 1px 10px; + } + li { + & > a.opt { + padding: 1px 10px; + } + & a { + &:active small { + color: fade($color-pf-white, 50%) !important; + } + &:hover, + &:focus { + small { + color: $gray-light; + } + } + } + &:not(.disabled) { + a:hover, + a:focus { + small { + color: $gray-light; + } + } + } + } + } +} diff --git a/src/sass/converted/patternfly/_bootstrap-slider.scss b/src/sass/converted/patternfly/_bootstrap-slider.scss new file mode 100644 index 0000000000..c0ddbd3d7c --- /dev/null +++ b/src/sass/converted/patternfly/_bootstrap-slider.scss @@ -0,0 +1,66 @@ +// +// Bootstrap slider +// -------------------------------------------------- +// https://github.com/seiyria/bootstrap-slider + + +// Overwrites and fixes to Bootstrap slider + +// https //github.com/seiyria/bootstrap-slider/issues/797 +.slider-tick-label-container { + display: flex; + justify-content: space-between; + margin-left: 0!important; +} + +.slider-tick-label { + width: auto !important; +} + +.slider { + .tooltip { + top: -10px; + } +} +.slider-track { + background-color: $color-pf-black-200; + box-shadow: inset 0 2px 3px rgba(0, 0, 0, .1), 0 0px 2px $color-pf-black-200; + border: 1px solid $color-pf-black-400; +} + +.slider-selection { + @include gradient-vertical($slider-secondary-top, $slider-secondary-bottom); +} + +.slider-handle { + width: $slider-line-height; + height: $slider-line-height; + border: 1px solid $color-pf-black-400; //THIS! +} + +.slider-tick { + background-color: transparent !important; + background-image: + radial-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3) 2px, transparent 2px) !important; + @include box-shadow(none); +} + + +// Styles to create the pf slider +.slider-pf { + display: flex; + align-items: center; + + * { + margin-right: 10px; + + &:last-child { + margin: 0; + } + } + + .slider { + width: auto; + flex: 1 1 100%; + } +} diff --git a/src/sass/converted/patternfly/_bootstrap-switch.scss b/src/sass/converted/patternfly/_bootstrap-switch.scss new file mode 100644 index 0000000000..6a3b1682f0 --- /dev/null +++ b/src/sass/converted/patternfly/_bootstrap-switch.scss @@ -0,0 +1,19 @@ +// +// Bootstrap Switch +// -------------------------------------------------- + +.#{$bootstrap-switch-base} { + .#{$bootstrap-switch-base}-handle-off, + .#{$bootstrap-switch-base}-handle-on { + &.#{$bootstrap-switch-base}-default { + background: $bootstrap-switch-handle-default-bg-color; + } + } + .#{$bootstrap-switch-base}-label { + background: $bootstrap-switch-bg-color; + box-shadow: 0 0 2px rgba($color-pf-black, (40/100)); + @include gradient-vertical($bootstrap-switch-bg-color-start, $bootstrap-switch-bg-color-stop); + position: relative; + z-index: 9; + } +} diff --git a/src/sass/converted/patternfly/_bootstrap-touchspin.scss b/src/sass/converted/patternfly/_bootstrap-touchspin.scss new file mode 100644 index 0000000000..b010aeddfa --- /dev/null +++ b/src/sass/converted/patternfly/_bootstrap-touchspin.scss @@ -0,0 +1,31 @@ +// +// Bootstrap Touchspin +// -------------------------------------------------- + +.bootstrap-touchspin .input-group-btn-vertical { + > .btn { + padding-bottom: 6px; + padding-top: 6px; + } + .bootstrap-touchspin-down { + border-bottom-right-radius: $border-radius-base; + } + .bootstrap-touchspin-up { + border-top-right-radius: $border-radius-base; + } + i { + font-size: ($font-size-base - 4); + left: 6px; + top: 2px; + &.fa-angle-down, + &.fa-angle-up { + font-size: $font-size-base; + line-height: $font-size-base; + top: 0; + } + &.fa-angle-down, + &.fa-angle-up { + left: 7px; + } + } +} diff --git a/src/sass/converted/patternfly/_bootstrap-treeview.scss b/src/sass/converted/patternfly/_bootstrap-treeview.scss new file mode 100644 index 0000000000..fb9170bf82 --- /dev/null +++ b/src/sass/converted/patternfly/_bootstrap-treeview.scss @@ -0,0 +1,89 @@ +// +// Bootstrap Tree View +// -------------------------------------------------- + +.treeview { + .list-group { + border-top: 0; + } + .list-group-item { + background: transparent; + border-bottom: 1px solid transparent !important; + border-top: 1px solid transparent !important; + cursor: default !important; + margin-bottom: 0; + overflow: hidden; + padding: 0 10px; + text-overflow: ellipsis; + white-space: nowrap; + &:hover { + background: none !important; + } + &.node-selected { + background: none !important; + border-color: transparent !important; + color: inherit !important; + } + &.node-check-changed { + span.node-icon, + span.text { + color: $bootstrap-treeview-highlight-color; + } + } + } + span.icon { + display: inline-block; + font-size: ($font-size-base + 1); + min-width: 10px; + text-align: center; + > [class*="fa-angle"] { + font-size: ($font-size-base + 3); + } + &.check-icon { + margin-right: 10px; + } + &.expand-icon { + cursor: pointer !important; + } + } + span.image { + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + height: 1.19em; + line-height: 1em; + margin-right: 5px; + vertical-align: middle; + width: 12px; + } + span.indent { + margin-right: 5px; + } + .node-disabled { + color: $color-pf-black-300; + cursor: not-allowed; + span.expand-icon { + cursor: default !important; + } + } + .node-hidden { + display:none; + } +} + +.treeview-pf-hover .list-group-item { + cursor: pointer !important; + &:hover { + background-color: $dropdown-link-hover-bg !important; + border-color: $dropdown-link-hover-border-color !important; + } +} + +.treeview-pf-select .list-group-item { + cursor: pointer !important; + &.node-selected { + background: $dropdown-link-active-bg !important; + border-color: $dropdown-link-active-border-color !important; + color: $dropdown-link-active-color !important; + } +} diff --git a/src/sass/converted/patternfly/_breadcrumbs.scss b/src/sass/converted/patternfly/_breadcrumbs.scss new file mode 100644 index 0000000000..75cb85f519 --- /dev/null +++ b/src/sass/converted/patternfly/_breadcrumbs.scss @@ -0,0 +1,20 @@ +// +// Breadcrumbs +// -------------------------------------------------- + +.breadcrumb { + padding-left: 0; + > .active strong { + font-weight: 600; + } + > li { + display: inline; /* IE8 */ + + li:before { + color: $gray-light; + content: $fa-var-angle-double-right; + font-family: $icon-font-name-fa; + font-size: ($font-size-base - 1); + padding: 0 9px 0 7px; + } + } +} diff --git a/src/sass/converted/patternfly/_buttons.scss b/src/sass/converted/patternfly/_buttons.scss new file mode 100644 index 0000000000..458bd77123 --- /dev/null +++ b/src/sass/converted/patternfly/_buttons.scss @@ -0,0 +1,50 @@ +// +// Buttons +// -------------------------------------------------- + +.btn { + @include box-shadow(0 2px 3px rgba($color-pf-black, (10/100))); + &:active { + @include box-shadow(inset 0 2px 8px rgba($color-pf-black, (20/100))); + } + &.disabled, + &[disabled], + fieldset[disabled] & { + background-color: $color-pf-black-100 !important; + background-image: none !important; + border-color: $color-pf-black-300 !important; + color: $color-pf-black-500 !important; + opacity: 1; + &:active { + @include box-shadow(none); + } + &.btn-link { + background-color: transparent !important; + border: 0; + } + } +} + +.btn-danger { + @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-bg-img-start, $btn-danger-bg-img-stop, $btn-danger-border); +} + +.btn-default { + @include button-variant($btn-default-color, $btn-default-bg, $btn-default-bg-img-start, $btn-default-bg-img-stop, $btn-default-border); +} + +.btn-link { + &, + &:active { + @include box-shadow(none); + } +} + +.btn-primary { + @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-bg-img-start, $btn-primary-bg-img-stop, $btn-primary-border); +} + +.btn-xs, +.btn-group-xs .btn { + font-weight: $btn-xs-font-weight; +} diff --git a/src/sass/converted/patternfly/_card-view.scss b/src/sass/converted/patternfly/_card-view.scss new file mode 100644 index 0000000000..8c4dcf5e29 --- /dev/null +++ b/src/sass/converted/patternfly/_card-view.scss @@ -0,0 +1,105 @@ +// +// Card View +// -------------------------------------------------- + +.card-pf-view { + border: 2px solid transparent; + .card-pf-heading-kebab { + .dropdown-kebab-pf { + margin-top: -3px; + } + + .progress-pf-legend { + p { margin-bottom: 0; } + .progress { + margin-bottom: 7px; + margin-top: 16px; + } + } + } + .card-pf-info { + margin-top: 15px; + strong { + font-size: ceil(($font-size-base + 1)); + margin-right: 10px; + } + } + .card-pf-item { + display: inline-block; + font-size: $font-size-h3; + padding: 0 13px 0 15px; + &:first-child { padding-left: 0; } + &:last-child { padding-right: 0; } + + .card-pf-item { border-left: 1px solid $card-pf-border-color; } + .fa-check { color: $brand-success; } + .fa, + .pficon { + + .card-pf-item-text { margin-left: 10px; } + } + } + .card-pf-items { margin-top: 15px; } + .card-pf-title { + font-size: ceil(($font-size-base * 1.6666)); + font-weight: 300; + margin-bottom: 0; + margin-top: 15px; + .fa, + .pficon { + font-size: ceil(($font-size-base * 1.5)); + margin-right: 2px; + } + .col-lg-2 & { font-size: $font-size-h3; } + } + .card-pf-top-element .card-pf-icon-circle { + border: 2px solid $color-pf-blue-300; + border-radius: 50%; + display: block; + font-size: 46px; + height: 106px; + line-height: 102px; + margin: 0 auto; + text-align: center; + width: 106px; + .col-lg-2 & { + font-size: 23px; + height: 54px; + line-height: 50px; + width: 54px; + } + } + .card-pf-view-checkbox { + position: absolute; + top: 11px; + left: 15px; + input[type=checkbox] { display: none; } + } + &.card-pf-view-multi-select { + .card-pf-view-checkbox { + input[type=checkbox] { + display: block; + @media(min-width:$screen-sm-min) { + visibility: hidden; + &:checked { visibility: visible; } + } + } + } + &:hover .card-pf-view-checkbox input[type=checkbox] { visibility: visible; } + } + &.card-pf-view-select { + position: relative; + &:hover { @include box-shadow(0 1px 6px rgba($color-pf-black, (35/100))); } + &.active { border: 2px solid $card-pf-selected-border-color; } + } + &.card-pf-view-single-select { cursor: pointer; } + &.card-pf-view-xs { + .card-pf-title { + font-size: 16px; + font-weight: normal; + margin-bottom: 10px; + .fa, + .pficon { + font-size: 14px; + margin-right: 5px; + } + } + } +} diff --git a/src/sass/converted/patternfly/_cards.scss b/src/sass/converted/patternfly/_cards.scss new file mode 100644 index 0000000000..f3f218b5c3 --- /dev/null +++ b/src/sass/converted/patternfly/_cards.scss @@ -0,0 +1,238 @@ +// +// Cards +// -------------------------------------------------- + +.card-pf { + background: $card-pf-bg-color; + border-top: 2px solid $card-pf-border-top-color; + @include box-shadow(0 1px 1px fade($color-pf-black, 17.5%)); + margin: 0 (-($grid-gutter-width / 4)) ($grid-gutter-width / 2); + padding: 0 ($grid-gutter-width / 2); + &.card-pf-accented { + border-top-color: $card-pf-accented-border-top-color; + } + &.card-pf-aggregate-status { + .card-pf-aggregate-status-notifications, + .card-pf-title { + a { + color: $text-color; + &.add { + color: $link-color; + &:hover { + color: $link-hover-color; + } + } + &:hover { + color: $link-hover-color; + } + } + } + } + &.card-pf-aggregate-status { + padding: 0 ($grid-gutter-width / 4); + text-align: center; + } + &.card-pf-aggregate-status-mini { + padding-bottom: ($grid-gutter-width / 4); + position: relative; + } + @media (min-width: $grid-float-breakpoint) { + &.card-pf-bleed-left { + margin-left: (-($grid-gutter-width / 2)); + } + &.card-pf-bleed-right { + border-right: 1px solid $card-pf-border-color; + margin-right: (-($grid-gutter-width / 2)); + } + } +} + +.card-pf-aggregate-status-notifications { + font-size: ($font-size-base * 2); // 24px + font-weight: 300; + .card-pf-aggregate-status-mini & { + line-height: 1; + } + .card-pf-aggregate-status-notification + .card-pf-aggregate-status-notification { + border-left: 1px solid $card-pf-border-color; + margin-left: ($grid-gutter-width / 8 - 2); + padding-left: ($grid-gutter-width / 4); + } + .fa, .pficon { + font-size: ($font-size-base * 1.5); // 18px + margin-right: 7px; + } +} + +.card-pf-body { + margin: ($grid-gutter-width / 2) 0 0; + padding: 0 0 ($grid-gutter-width / 2); + .card-pf-aggregate-status & { + margin-top: ($grid-gutter-width / 4); + padding-bottom: ($grid-gutter-width / 4); + } + .card-pf-aggregate-status-mini & { + margin-bottom: 0; + margin-top: 0; + padding-bottom: 0; + position: absolute; + right: ($grid-gutter-width / 2); + top: 15px; + } + .card-pf-utilization .card-pf-title + & { + margin-top: -8px; + } + > *:last-child { + margin-bottom: 0; + } +} + +.card-pf-footer { + background-color: $card-pf-footer-bg-color; + border-top: 1px solid $card-pf-border-color; + margin: 0 (-($grid-gutter-width / 2) !important); + padding: ($grid-gutter-width / 2) ($grid-gutter-width / 2) ($grid-gutter-width / 4); + a > { + .fa, + .pficon { + margin-right: 5px; + } + } + .card-pf-time-frame-filter { + margin-top: -2px; + } +} + +.card-pf-link-with-icon { + padding-left: 21px; + position: relative; + .fa, + .pficon { + font-size: 16px; + left: 0; + position: absolute; + top: 0; + } +} + +.card-pf-time-frame-filter { + .card-pf-heading &, + .card-pf-footer & { + float: right; + margin-left: 20px; + } +} + +.card-pf-heading { + border-bottom: 1px solid $card-pf-border-color; + margin: 0 (-($grid-gutter-width / 2)) ($grid-gutter-width / 2); + padding: 0 ($grid-gutter-width / 2) 0; + & .card-pf-time-frame-filter { + margin-top: -5px; + } +} + +.card-pf-heading-details { + float: right; + font-size: ($font-size-small - 1); +} + +.card-pf-subtitle { + font-size: $font-size-h3; + margin-top: $line-height-computed; + margin-bottom: ($line-height-computed / 2); + [class^="col"] & { + margin-top: 0; + } + @media (max-width: $screen-xs-max) { + .card-pf-body [class^="col"] + [class^="col"] > & { + margin-top: ($grid-gutter-width); + } + } +} + +.card-pf-title { + font-size: $font-size-h3; + font-weight: 400; + margin: ($grid-gutter-width / 2) 0; + padding: 0; + .card-pf-aggregate-status & { + font-size: $font-size-large; + margin: ($grid-gutter-width / 4) 0 0; + .fa, + .pficon { + color: $card-pf-aggregate-status-title-icon-color; + font-size: $font-size-h3; + margin-right: 7px; + } + } + .card-pf-aggregate-status-count { + font-size: $font-size-h3; + .card-pf-aggregate-status-mini & { + display: block; + font-size: ($font-size-base * 2); // 24px + font-weight: 300; + margin-bottom: 3px; + } + } + .card-pf-aggregate-status-mini & { + font-size: $font-size-base; + margin-top: ($grid-gutter-width / 8); + a { + display: inline-block; + } + .fa, + .pficon { + font-size: ($font-size-base * 2 + 2); // 26px + margin-right: 0; + min-width: ($font-size-base * 2 + 2); // 26px + position: absolute; + left: ($grid-gutter-width / 2); + text-align: center; + top: 15px; + } + } +} + +.card-pf-utilization-details { + border-bottom: 1px solid $card-pf-border-color; + display: table; + margin: 12px 0 15px; + padding: 0 0 15px; + width: 100%; + .card-pf-utilization-card-details-count, + .card-pf-utilization-card-details-description { + float: left; + line-height: 1; + } + .card-pf-utilization-card-details-count { + font-size: ($font-size-base * 2 + 2); // 26px + font-weight: 300; + margin-right: 10px; + } + .card-pf-utilization-card-details-line-1, + .card-pf-utilization-card-details-line-2 { + display: block; + } + .card-pf-utilization-card-details-line-1 { + font-size: ($font-size-small - 1); + margin-bottom: 2px; + } +} + +.cards-pf { + background: $card-pf-container-bg-color; + .row-cards-pf { + padding: 0 20px; + &:first-child { padding-top: 20px; } + } +} + +.container-cards-pf { + margin-top: ($grid-gutter-width / 2); +} + +.row-cards-pf { + margin-left: (-($grid-gutter-width / 4)); + margin-right: (-($grid-gutter-width / 4)); +} diff --git a/src/sass/converted/patternfly/_charts.scss b/src/sass/converted/patternfly/_charts.scss new file mode 100644 index 0000000000..74b1e08869 --- /dev/null +++ b/src/sass/converted/patternfly/_charts.scss @@ -0,0 +1,125 @@ +// +// Charts +// -------------------------------------------------- + +.c3 { + path { + stroke: $table-border-color; + } + svg { + font-family: $font-family-base; + } +} + +.c3-axis-x .tick line { + stroke: $table-border-color; +} + +.c3-axis-y .tick line { + display: none; +} + +.c3-chart-arc path { + stroke: $color-pf-white; +} + +.c3-grid line { + stroke: $table-border-color; +} + +.c3-line { + stroke-width: 2px; +} + +.c3-tooltip { + background: $tooltip-bg; + @include box-shadow(none); + @include opacity($tooltip-opacity); + + td { + background: transparent; + border: 0; + color: $tooltip-color; + font-size: $font-size-base; + padding: 5px 10px; + } + + th { + background: transparent; + font-size: $font-size-base; + padding: 5px 10px 0; + border-bottom: solid 2px $color-pf-black; + } + + tr { + border: 0; + + tr > td { + padding-top: 0; + } + } +} + +.c3-tooltip-sparkline, +.donut-tooltip-pf { + background: $tooltip-bg; + color: $tooltip-color; + @include opacity($tooltip-opacity); + padding: 2px 6px; +} + +.c3-xgrid, +.c3-ygrid { + stroke-dasharray: 0 0; +} + +.chart-pf-sparkline { + margin-left: -5px; + margin-right: -5px; +} + +.donut-title-big-pf { + font-size: $donut-font-size-big; + font-weight: 300; +} + +.donut-title-small-pf { + font-size: $font-size-base; + font-weight: 400; +} + +.line-chart-pf { + .c3-zoom-rect { + opacity: 1 !important; + fill: $color-pf-black-100; + stroke: $table-border-color; + stroke-width: 1px; + } +} + +.pct-donut-chart-pf { + + .pct-donut-chart-pf-label { + display: block; + } + + &.pct-donut-chart-pf-left, + &.pct-donut-chart-pf-right, + .pct-donut-chart-pf-left, + .pct-donut-chart-pf-right { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + + &.pct-donut-chart-pf-left, + &.pct-donut-chart-pf-right { + display: inline-flex; + } + + &.pct-donut-chart-pf-left, + .pct-donut-chart-pf-left { + flex-direction: row-reverse; + } +} + diff --git a/src/sass/converted/patternfly/_close.scss b/src/sass/converted/patternfly/_close.scss new file mode 100644 index 0000000000..b3e103dc81 --- /dev/null +++ b/src/sass/converted/patternfly/_close.scss @@ -0,0 +1,16 @@ +// +// Close icons +// -------------------------------------------------- + +//this should no longer be needed and be replaced with pficon-close. This is here for legacy. For further info see https://github.com/patternfly/patternfly/pull/781 + +.close { + text-shadow: none; + z-index: 1; + position: relative; + @include opacity(.6); + &:hover, + &:focus { + @include opacity(.9); + } +} diff --git a/src/sass/converted/patternfly/_color-variables.scss b/src/sass/converted/patternfly/_color-variables.scss new file mode 100644 index 0000000000..95f123fa5a --- /dev/null +++ b/src/sass/converted/patternfly/_color-variables.scss @@ -0,0 +1,85 @@ +$color-pf-black-100: #fafafa !default; +$color-pf-black-150: #f5f5f5 !default; +$color-pf-black-200: #ededed !default; +$color-pf-black-300: #d1d1d1 !default; +$color-pf-black-400: #bbb !default; +$color-pf-black-500: #8b8d8f !default; +$color-pf-black-600: #72767b !default; +$color-pf-black-700: #4d5258 !default; +$color-pf-black-800: #393f44 !default; +$color-pf-black-900: #292e34 !default; +$color-pf-blue-25: #edf8ff !default; +$color-pf-blue-50: #def3ff !default; +$color-pf-blue-100: #bee1f4 !default; +$color-pf-blue-200: #7dc3e8 !default; +$color-pf-blue-300: #39a5dc !default; +$color-pf-blue-400: #0088ce !default; +$color-pf-blue-500: #00659c !default; +$color-pf-blue-600: #004368 !default; +$color-pf-blue-700: #002235 !default; +$color-pf-cyan-100: #bedee1 !default; +$color-pf-cyan-200: #7dbdc3 !default; +$color-pf-cyan-300: #3a9ca6 !default; +$color-pf-cyan-400: #007a87 !default; +$color-pf-cyan-500: #005c66 !default; +$color-pf-cyan-600: #003d44 !default; +$color-pf-cyan-700: #001f22 !default; +$color-pf-gold-100: #fbeabc !default; +$color-pf-gold-200: #f9d67a !default; +$color-pf-gold-300: #f5c12e !default; +$color-pf-gold-400: #f0ab00 !default; +$color-pf-gold-500: #b58100 !default; +$color-pf-gold-600: #795600 !default; +$color-pf-gold-700: #3d2c00 !default; +$color-pf-green-100: #cfe7cd !default; +$color-pf-green-200: #9ecf99 !default; +$color-pf-green-300: #6ec664 !default; +$color-pf-green-400: #3f9c35 !default; +$color-pf-green-500: #2d7623 !default; +$color-pf-green-600: #1e4f18 !default; +$color-pf-green-700: #0f280d !default; +$color-pf-light-blue-100: #beedf9 !default; +$color-pf-light-blue-200: #7cdbf3 !default; +$color-pf-light-blue-300: #35caed !default; +$color-pf-light-blue-400: #00b9e4 !default; +$color-pf-light-blue-500: #008bad !default; +$color-pf-light-blue-600: #005c73 !default; +$color-pf-light-blue-700: #002d39 !default; +$color-pf-light-green-100: #e4f5bc !default; +$color-pf-light-green-200: #c8eb79 !default; +$color-pf-light-green-300: #ace12e !default; +$color-pf-light-green-400: #92d400 !default; +$color-pf-light-green-500: #6ca100 !default; +$color-pf-light-green-600: #486b00 !default; +$color-pf-light-green-700: #253600 !default; +$color-pf-orange-100: #fbdebf !default; +$color-pf-orange-200: #f7bd7f !default; +$color-pf-orange-300: #f39d3c !default; +$color-pf-orange-400: #ec7a08 !default; +$color-pf-orange-500: #b35c00 !default; +$color-pf-orange-600: #773d00 !default; +$color-pf-orange-700: #3b1f00 !default; +$color-pf-purple-100: #c7bfff !default; +$color-pf-purple-200: #a18fff !default; +$color-pf-purple-300: #8461f7 !default; +$color-pf-purple-400: #703fec !default; +$color-pf-purple-500: #582fc0 !default; +$color-pf-purple-600: #40199a !default; +$color-pf-purple-700: #1f0066 !default; +$color-pf-red-100: #cc0000 !default; +$color-pf-red-200: #a30000 !default; +$color-pf-red-300: #8b0000 !default; +$color-pf-red-400: #470000 !default; +$color-pf-red-500: #2c0000 !default; + +$color-pf-black: #030303 !default; +$color-pf-blue: $color-pf-blue-400 !default; +$color-pf-cyan: $color-pf-cyan-400 !default; +$color-pf-gold: $color-pf-gold-400 !default; +$color-pf-green: $color-pf-green-400 !default; +$color-pf-light-blue: $color-pf-light-blue-400 !default; +$color-pf-light-green: $color-pf-light-green-400 !default; +$color-pf-orange: $color-pf-orange-400 !default; +$color-pf-purple: $color-pf-purple-400 !default; +$color-pf-red: $color-pf-red-100 !default; +$color-pf-white: #fff !default; diff --git a/src/sass/converted/patternfly/_datatables.scss b/src/sass/converted/patternfly/_datatables.scss new file mode 100644 index 0000000000..158df1f33a --- /dev/null +++ b/src/sass/converted/patternfly/_datatables.scss @@ -0,0 +1,186 @@ +// +// DataTables +// -------------------------------------------------- + +// Deprecated +.ColVis_Button { + &:active { + &:focus { + outline: none; + } + } +} + +// Deprecated +.ColVis_catcher { + position: absolute; + z-index: 999; +} + +// Deprecated +.ColVis_collection { + background-color: $dropdown-bg; + border: 1px solid $dropdown-border; + border-radius: $border-radius-base; + @include box-shadow(0 6px 12px fade($color-pf-black, 17.5%)); + background-clip: padding-box; + list-style: none; + margin: -1px 0 0 0; + padding: 5px 10px; + width: 150px; + z-index: $zindex-dropdown; + label { + font-weight: normal; + margin-bottom: 5px; + margin-top: 5px; + padding-left: 20px; + } +} + +// Deprecated +.ColVis_collectionBackground { + background-color: $color-pf-white; + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 998; +} + +// Note: We won't be using this class with the Patternfly toolbar +.dataTables_header { + background-color: $color-pf-black-150; + border: 1px solid $table-border-color; + border-bottom: none; + padding: 5px; + position: relative; + text-align: center; + .btn { + @include box-shadow(none); + } + // Deprecated + .ColVis { + position: absolute; + right: 5px; + text-align: left; + top: 5px; + + .dataTables_info { + padding-right: 30px; + } + } + .dataTables_filter { + position: absolute; + input { + border: 1px solid $color-pf-black-400; + height: 24px; + @media (max-width: $screen-xs-max) { + width: 100px; + } + } + } + .dataTables_info { + padding: 2px 0; + @media (max-width: $screen-xs) { + text-align: right; + } + b { + font-weight: bold; + } + } +} + +// Note: We won't be using this class with the table view +.dataTables_footer { + background-color: $color-pf-white; + border: 1px solid $table-border-color; + border-top: none; + overflow: hidden; +} + +// Not in use with latest example: May be used with pagination? +.dataTables_paginate { + background: $color-pf-black-100; + float: right; + margin: 0; + .pagination { + float: left; + margin: 0; + > li { + > span { + border-color: $color-pf-white $color-pf-black-300 $color-pf-black-150; + border-width: 0 1px; + font-size: ($font-size-base + 4); + font-weight: normal; + padding: 0; + text-align: center; + width: 31px; + &:hover, + &:focus { + @include reset-filter(); + } + } + &.last > span { + border-right: none; + } + &.disabled > span { + background: $color-pf-black-150; + border-left-color: $color-pf-black-200; + border-right-color: $color-pf-black-200; + @include reset-filter(); + } + } + } + .pagination-input { + float: left; + font-size: $font-size-base; + line-height: 1em; + padding: 4px 15px 0; + text-align: right; + .paginate_input { + border: 1px solid $color-pf-black-300; + @include box-shadow(inset 0 1px 1px fade($color-pf-black, 7.5%)); + font-size: $font-size-base; + font-weight: 600; + height: 19px; + margin-right: 8px; + padding-right: 3px; + text-align: right; + width: 30px; + } + .paginate_of { + position: relative; + b { + margin-left: 3px; + } + } + } +} + +.dataTables_empty { + background: $table-bg-accent; +} + +/* Might need this for pagination? +.dataTables_wrapper { + margin: $line-height-computed 0; + @media (max-width: $screen-xs-max) { + .table-responsive { + margin-bottom: 0; + } + } +} +*/ + +// Not in use with latest example: May be used with column reordering? +.DTCR_clonedTable { + background-color: rgba($color-pf-white, (70/100)); + z-index: 202; +} + +// Not in use with latest example: May be used with column reordering? +.DTCR_pointer { + background-color: $link-color; + width: 1px; + z-index: 201; +} diff --git a/src/sass/converted/patternfly/_dropdowns.scss b/src/sass/converted/patternfly/_dropdowns.scss new file mode 100644 index 0000000000..6c1cb0492c --- /dev/null +++ b/src/sass/converted/patternfly/_dropdowns.scss @@ -0,0 +1,233 @@ +// +// Dropdowns +// -------------------------------------------------- + + +// Dropdown arrow/caret +// Modified to use Font Awesome's angle-down icon +.caret { + font-family: $icon-font-name-fa; + font-weight: normal; + height: ($font-size-base - 3); + position: relative; + vertical-align: baseline; + width: $font-size-base; + &:before { + bottom: 0; + content: $fa-var-angle-down; + left: 0; + line-height: $font-size-base; + position: absolute; + text-align: center; + top: -1px; + right: 0; + } + .dropup & { + &:before { + content: $fa-var-angle-up; + } + } +} + +// Bootstrap removes the focus ring on dropdowns; this replaces it for better accessibility +.dropdown-toggle:focus { + @include tab-focus(); +} + +// The dropdown menu (ul) +.dropdown-menu { + // Dividers (basically an hr) within the dropdown + .divider { + @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin); + } + // Links within the dropdown menu + > li > a { + border-color: transparent; + border-style: solid; + border-width: 1px 0; + padding: 1px 10px; + } +} + +// Hover/Focus state +.dropdown-menu > li > a { + &:hover, + &:focus { + border-color: $dropdown-link-hover-border-color; + @include reset-filter(); + } + &:active { + background-color: $dropdown-link-focus-bg; + border-color: $dropdown-link-active-border-color; + color: $dropdown-link-focus-color !important; + @include reset-filter(); + } +} + +// Active state +.dropdown-menu > .active > a { + &, + &:hover, + &:focus { + background-color: $dropdown-link-active-bg !important; + border-color: $dropdown-link-active-border-color !important; + @include reset-filter(); + } +} + +// Disabled state +.dropdown-menu > .disabled > a { + &, + &:hover, + &:focus { + border-color: transparent; + } +} + +// Selected state +.dropdown-menu > .selected > a { + background-color: $dropdown-link-active-bg; + border-color: $dropdown-link-active-border-color; + color: $color-pf-white; + small { + color: rgba($color-pf-white, (50/100)); + } +} + +// Nuke hover/focus effects +.dropdown-menu > .disabled > a { + &:hover, + &:focus { + border-color: transparent; + } +} + +// Dropdown section headers +.dropdown-header { + padding-left: 10px; + padding-right: 10px; + text-transform: uppercase; +} + +// Position Menu closer to button +.btn-group, +.dropdown, +.input-group-btn { + > .dropdown-menu { + margin-top: -1px; + } +} + +// Position Menu closer to button (dropup-menu) +.dropup .dropdown-menu { + margin-bottom: -1px; +} + +// Add back styles for dropdown-submenu +.dropdown-submenu { + position:relative; + &:hover { + > a { + background-color: $dropdown-link-hover-bg; + border-color: $dropdown-link-hover-border-color; + } + > .dropdown-menu { + display: block; + } + } + &.pull-left { + float: none !important; + > .dropdown-menu { + left: auto; + margin-left: 10px; + right: 100%; + } + } + > a { + padding-right: 20px !important; + &:after { + content: $fa-var-angle-right; + font-family: $icon-font-name-fa; + display: block; + position: absolute; + right: 10px; + top: 2px; + } + } + > .dropdown-menu { + left: 100%; + margin-top: 0; + top: -6px; + } + .dropup & > .dropdown-menu { + bottom: -5px; + top: auto; + } + .open &.active > .dropdown-menu { + display: block; + } +} + +// Kebab dropmenu +.dropdown-kebab-pf { + .btn-link { + color: $gray-darker; + font-size: ($font-size-base + 4); + line-height: 1; + padding: 4px ($grid-gutter-width/4); + margin-left: ($grid-gutter-width/(-4)); + margin-right: ($grid-gutter-width/(-4)); + &:active, + &:focus, + &:hover { + color: $link-color; + } + } + .dropdown-menu { + left: -15px; + margin-top: 11px; + &.dropdown-menu-right { + left: auto; + right: -15px; + &:after, + &:before { + left: auto; + right: 6px; + } + } + &:after, + &:before { + border-bottom-color: $dropdown-border; + border-bottom-style: solid; + border-bottom-width: 10px; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + content: ""; + display: inline-block; + left: 6px; + position: absolute; + top: -11px; + } + &:after { + border-bottom-color: $dropdown-bg; + top: -10px; + } + } + &.dropup .dropdown-menu { + margin-bottom: 11px; + margin-top: 0; + &:after, + &:before { + border-bottom: none; + border-top-color: $dropdown-border; + border-top-style: solid; + border-top-width: 10px; + bottom: -11px; + top: auto; + } + &:after { + border-top-color: $dropdown-bg; + bottom: -10px; + } + } +} diff --git a/src/sass/converted/patternfly/_experimental-features.scss b/src/sass/converted/patternfly/_experimental-features.scss new file mode 100644 index 0000000000..3ffb39a01c --- /dev/null +++ b/src/sass/converted/patternfly/_experimental-features.scss @@ -0,0 +1,48 @@ +.experimental-pf > * { + border: 2px solid $color-pf-light-green-400; +} + +.experimental-pf-bar { + background-color: $color-pf-light-green-400; + border: none; + text-align: center; + position: relative; +} + +.experimental-pf-more-info { + background-color: $color-pf-light-green-400; + border: 0; + color: $color-pf-black; + display: block; + width: 100%; + padding-top: 10px; + padding-bottom: 10px; + position: static; + @media (min-width: $screen-md-min) { + padding: 0 10px; + position: absolute; + right: 0; + top: 0; + width: auto; + } +} + +.experimental-pf-text { + @media (min-width: $screen-md-min) { + padding-left: 150px; + padding-right: 150px; + } + + a { + color: $color-pf-black; + text-decoration: underline; + &:hover { + color: $color-pf-black; + cursor: pointer; + } + } +} + +.btn-experimental-pf { + @include button-variant($btn-default-color, $color-pf-light-green-400, $color-pf-light-green-300, $color-pf-light-green-400, $color-pf-light-green-400); +} diff --git a/src/sass/converted/patternfly/_fonts.scss b/src/sass/converted/patternfly/_fonts.scss new file mode 100644 index 0000000000..ade3d93280 --- /dev/null +++ b/src/sass/converted/patternfly/_fonts.scss @@ -0,0 +1,124 @@ +// +// Fonts +// -------------------------------------------------- + +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + src: url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Light-webfont.eot"), "#{$font-path}OpenSans-Light-webfont.eot")); /* IE9 Compat Modes */ + src: local("Open Sans Light"), local("OpenSans-Light"), + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Light-webfont.eot?#iefix"), "#{$font-path}OpenSans-Light-webfont.eot?#iefix")) format("embedded-opentype"), /* IE6-IE8 */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Light-webfont.woff2"), "#{$font-path}OpenSans-Light-webfont.woff2")) format("woff2"), /* Super Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Light-webfont.woff"), "#{$font-path}OpenSans-Light-webfont.woff")) format("woff"), /* Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Light-webfont.ttf"), "#{$font-path}OpenSans-Light-webfont.ttf")) format("truetype"), /* Safari, Android, iOS */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Light-webfont.svg#OpenSans"), "#{$font-path}OpenSans-Light-webfont.svg#OpenSans")) format("svg"); /* Legacy iOS */ +} +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + src: url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Regular-webfont.eot"), "#{$font-path}OpenSans-Regular-webfont.eot")); /* IE9 Compat Modes */ + src: local("Open Sans"), local("OpenSans"), + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Regular-webfont.eot?#iefix"), "#{$font-path}OpenSans-Regular-webfont.eot?#iefix")) format("embedded-opentype"), /* IE6-IE8 */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Regular-webfont.woff2"), "#{$font-path}OpenSans-Regular-webfont.woff2")) format("woff2"), /* Super Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Regular-webfont.woff"), "#{$font-path}OpenSans-Regular-webfont.woff")) format("woff"), /* Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Regular-webfont.ttf"), "#{$font-path}OpenSans-Regular-webfont.ttf")) format("truetype"), /* Safari, Android, iOS */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Regular-webfont.svg#OpenSans"), "#{$font-path}OpenSans-Regular-webfont.svg#OpenSans")) format("svg"); /* Legacy iOS */ +} +@font-face { + font-family: "Open Sans"; + font-style: italic; + font-weight: 300; + src: url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-LightItalic-webfont.eot"), "#{$font-path}OpenSans-LightItalic-webfont.eot")); /* IE9 Compat Modes */ + src: local("Open Sans Light Italic"), local("OpenSansLight-Italic"), + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-LightItalic-webfont.eot?#iefix"), "#{$font-path}OpenSans-LightItalic-webfont.eot?#iefix")) format("embedded-opentype"), /* IE6-IE8 */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-LightItalic-webfont.woff2"), "#{$font-path}OpenSans-LightItalic-webfont.woff2")) format("woff2"), /* Super Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-LightItalic-webfont.woff"), "#{$font-path}OpenSans-LightItalic-webfont.woff")) format("woff"), /* Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-LightItalic-webfont.ttf"), "#{$font-path}OpenSans-LightItalic-webfont.ttf")) format("truetype"), /* Safari, Android, iOS */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-LightItalic-webfont.svg#OpenSans"), "#{$font-path}OpenSans-LightItalic-webfont.svg#OpenSans")) format("svg"); /* Legacy iOS */ +} +@font-face { + font-family: "Open Sans"; + font-style: italic; + font-weight: 400; + src: url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Italic-webfont.eot"), "#{$font-path}OpenSans-Italic-webfont.eot")); /* IE9 Compat Modes */ + src: local("Open Sans Italic"), local("OpenSans-Italic"), + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Italic-webfont.eot?#iefix"), "#{$font-path}OpenSans-Italic-webfont.eot?#iefix")) format("embedded-opentype"), /* IE6-IE8 */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Italic-webfont.woff2"), "#{$font-path}OpenSans-Italic-webfont.woff2")) format("woff2"), /* Super Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Italic-webfont.woff"), "#{$font-path}OpenSans-Italic-webfont.woff")) format("woff"), /* Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Italic-webfont.ttf"), "#{$font-path}OpenSans-Italic-webfont.ttf")) format("truetype"), /* Safari, Android, iOS */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Italic-webfont.svg#OpenSans"), "#{$font-path}OpenSans-Italic-webfont.svg#OpenSans")) format("svg"); /* Legacy iOS */ +} +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + src: url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Semibold-webfont.eot"), "#{$font-path}OpenSans-Semibold-webfont.eot")); /* IE9 Compat Modes */ + src: local("Open Sans Semibold"), local("OpenSans-Semibold-webfont"), + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Semibold-webfont.eot?#iefix"), "#{$font-path}OpenSans-Semibold-webfont.eot?#iefix")) format("embedded-opentype"), /* IE6-IE8 */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Semibold-webfont.woff2"), "#{$font-path}OpenSans-Semibold-webfont.woff2")) format("woff2"), /* Super Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Semibold-webfont.woff"), "#{$font-path}OpenSans-Semibold-webfont.woff")) format("woff"), /* Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Semibold-webfont.ttf"), "#{$font-path}OpenSans-Semibold-webfont.ttf")) format("truetype"), /* Safari, Android, iOS */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Semibold-webfont.svg#OpenSans"), "#{$font-path}OpenSans-Semibold-webfont.svg#OpenSans")) format("svg"); /* Legacy iOS */ +} +@font-face { + font-family: "Open Sans"; + font-style: italic; + font-weight: 600; + src: url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-SemiboldItalic-webfont.eot"), "#{$font-path}OpenSans-SemiboldItalic-webfont.eot")); /* IE9 Compat Modes */ + src: local("Open Sans Semibold Italic"), local("OpenSans-SemiboldItalic-webfont"), + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-SemiboldItalic-webfont.eot?#iefix"), "#{$font-path}OpenSans-SemiboldItalic-webfont.eot?#iefix")) format("embedded-opentype"), /* IE6-IE8 */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-SemiboldItalic-webfont.woff2"), "#{$font-path}OpenSans-SemiboldItalic-webfont.woff2")) format("woff2"), /* Super Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-SemiboldItalic-webfont.woff"), "#{$font-path}OpenSans-SemiboldItalic-webfont.woff")) format("woff"), /* Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-SemiboldItalic-webfont.ttf"), "#{$font-path}OpenSans-SemiboldItalic-webfont.ttf")) format("truetype"), /* Safari, Android, iOS */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-SemiboldItalic-webfont.svg#OpenSans"), "#{$font-path}OpenSans-SemiboldItalic-webfont.svg#OpenSans")) format("svg"); /* Legacy iOS */ +} +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + src: url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Bold-webfont.eot"), "#{$font-path}OpenSans-Bold-webfont.eot")); /* IE9 Compat Modes */ + src: local("Open Sans Bold"), local("OpenSans-Bold"), + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Bold-webfont.eot?#iefix"), "#{$font-path}OpenSans-Bold-webfont.eot?#iefix")) format("embedded-opentype"), /* IE6-IE8 */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Bold-webfont.woff2"), "#{$font-path}OpenSans-Bold-webfont.woff2")) format("woff2"), /* Super Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Bold-webfont.woff"), "#{$font-path}OpenSans-Bold-webfont.woff")) format("woff"), /* Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Bold-webfont.ttf"), "#{$font-path}OpenSans-Bold-webfont.ttf")) format("truetype"), /* Safari, Android, iOS */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-Bold-webfont.svg#OpenSans"), "#{$font-path}OpenSans-Bold-webfont.svg#OpenSans")) format("svg"); /* Legacy iOS */ +} +@font-face { + font-family: "Open Sans"; + font-style: italic; + font-weight: 700; + src: url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-BoldItalic-webfont.eot"), "#{$font-path}OpenSans-BoldItalic-webfont.eot")); /* IE9 Compat Modes */ + src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-BoldItalic-webfont.eot?#iefix"), "#{$font-path}OpenSans-BoldItalic-webfont.eot?#iefix")) format("embedded-opentype"), /* IE6-IE8 */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-BoldItalic-webfont.woff2"), "#{$font-path}OpenSans-BoldItalic-webfont.woff2")) format("woff2"), /* Super Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-BoldItalic-webfont.woff"), "#{$font-path}OpenSans-BoldItalic-webfont.woff")) format("woff"), /* Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-BoldItalic-webfont.ttf"), "#{$font-path}OpenSans-BoldItalic-webfont.ttf")) format("truetype"), /* Safari, Android, iOS */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-BoldItalic-webfont.svg#OpenSans"), "#{$font-path}OpenSans-BoldItalic-webfont.svg#OpenSans")) format("svg"); /* Legacy iOS */ +} +@font-face { + font-family: "Open Sans"; + font-style: italic; + font-weight: 800; + src: url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-ExtraBoldItalic-webfont.eot"), "#{$font-path}OpenSans-ExtraBoldItalic-webfont.eot")); /* IE9 Compat Modes */ + src: local("Open Sans Extrabold Italic"), local("OpenSans-ExtraboldItalic"), + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-ExtraBoldItalic-webfont.eot?#iefix"), "#{$font-path}OpenSans-ExtraBoldItalic-webfont.eot?#iefix")) format("embedded-opentype"), /* IE6-IE8 */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-ExtraBoldItalic-webfont.woff2"), "#{$font-path}OpenSans-ExtraBoldItalic-webfont.woff2")) format("woff2"), /* Super Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-ExtraBoldItalic-webfont.woff"), "#{$font-path}OpenSans-ExtraBoldItalic-webfont.woff")) format("woff"), /* Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-ExtraBoldItalic-webfont.ttf"), "#{$font-path}OpenSans-ExtraBoldItalic-webfont.ttf")) format("truetype"), /* Safari, Android, iOS */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-ExtraBoldItalic-webfont.svg#OpenSans"), "#{$font-path}OpenSans-ExtraBoldItalic-webfont.svg#OpenSans")) format("svg"); /* Legacy iOS */ +} +@font-face { + font-family: "Open Sans"; + font-style: normal; + font-weight: 800; + src: url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-ExtraBold-webfont.eot"), "#{$font-path}OpenSans-ExtraBold-webfont.eot")); /* IE9 Compat Modes */ + src: local("Open Sans Extrabold"), local("OpenSans-Extrabold"), + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-ExtraBold-webfont.eot?#iefix"), "#{$font-path}OpenSans-ExtraBold-webfont.eot?#iefix")) format("embedded-opentype"), /* IE6-IE8 */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-ExtraBold-webfont.woff2"), "#{$font-path}OpenSans-ExtraBold-webfont.woff2")) format("woff2"), /* Super Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-ExtraBold-webfont.woff"), "#{$font-path}OpenSans-ExtraBold-webfont.woff")) format("woff"), /* Modern Browsers */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-ExtraBold-webfont.ttf"), "#{$font-path}OpenSans-ExtraBold-webfont.ttf")) format("truetype"), /* Safari, Android, iOS */ + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}OpenSans-ExtraBold-webfont.svg#OpenSans"), "#{$font-path}OpenSans-ExtraBold-webfont.svg#OpenSans")) format("svg"); /* Legacy iOS */ +} diff --git a/src/sass/converted/patternfly/_footer.scss b/src/sass/converted/patternfly/_footer.scss new file mode 100644 index 0000000000..ad64082c8a --- /dev/null +++ b/src/sass/converted/patternfly/_footer.scss @@ -0,0 +1,19 @@ +// +// Footer +// -------------------------------------------------- + +.footer-pf-alt, .footer-pf { + background-color: $footer-pf-bg-color; + color: $gray-light; + font-size: $font-size-small; + line-height: 17px; // whole px unit to avoid height differences among browsers + padding-left: $footer-pf-padding-left; + padding-top: $footer-pf-padding-top; + .layout-pf-alt-fixed-with-footer &, .layout-pf-fixed-with-footer & { + bottom: 0; + left: 0; + position: fixed; + right: 0; + z-index: $zindex-navbar-fixed; + } +} diff --git a/src/sass/converted/patternfly/_forms.scss b/src/sass/converted/patternfly/_forms.scss new file mode 100644 index 0000000000..58519aed68 --- /dev/null +++ b/src/sass/converted/patternfly/_forms.scss @@ -0,0 +1,95 @@ +// +// Forms +// -------------------------------------------------- +.chars-remaining-pf span { + font-weight: 600; + padding-right: 5px; +} + +.chars-warn-remaining-pf { + color: $brand-danger; +} + +.fields-status-pf { + color: $color-pf-black-500; + margin-bottom: 15px; +} + +.form-control { + &[disabled], + &[readonly], + fieldset[disabled] & { + @include box-shadow(none); + color: $color-pf-black-500; + &:hover { + border-color: $input-border; + } + } + &:hover { + border-color: $input-border-hover; + .has-error & { + border-color: darken($state-danger-text, 10%); + } + .has-success & { + border-color: darken($state-success-text, 10%); + } + .has-warning & { + border-color: darken($state-warning-text, 10%); + } + } +} + +.has-error, .has-success, .has-warning { + .checkbox, + .checkbox-inline, + .control-label, + .radio, + .radio-inline, + &.checkbox label, + &.checkbox-inline label, + &.radio label, + &.radio-inline label { + color: $text-color; + } +} + +.help-block { + margin-bottom: 0px; +} + +.input-group .input-group-btn .btn { + @include box-shadow(none); +} + +label { + font-weight: 600; + &.required-pf:after { + color: $brand-danger; + content: "*"; + margin-left: 3px; + } +} + +span.required-pf { + color: $brand-danger; +} + +.fields-section-pf { + border-color: $color-pf-black-200; + border-style: solid; + border-width: 1px 0 0; + margin-top: 25px; + padding: 15px 0 0; +} +.fields-section-header-pf { + border: none; + font-size: $font-size-base; + margin: 0; + padding-right: $padding-large-horizontal; + width: auto; + .fa-angle-right { + cursor: pointer; + font-size: $font-size-large; + width: $font-size-large; + } +} diff --git a/src/sass/converted/patternfly/_icons.scss b/src/sass/converted/patternfly/_icons.scss new file mode 100644 index 0000000000..1ea751bbd9 --- /dev/null +++ b/src/sass/converted/patternfly/_icons.scss @@ -0,0 +1,344 @@ +// +// Icons +// -------------------------------------------------- +// Custom icons and selections from IcoMoon - Free (http://icomoon.io/#icons) + +@font-face { + font-family: "#{$icon-font-name-pf}"; + src:url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}#{$icon-font-name-pf}.eot"), "#{$font-path}#{$icon-font-name-pf}.eot")); + src:url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}#{$icon-font-name-pf}.eot?#iefix"), "#{$font-path}#{$icon-font-name-pf}.eot?#iefix")) format("embedded-opentype"), + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}#{$icon-font-name-pf}.ttf"), "#{$font-path}#{$icon-font-name-pf}.ttf")) format("truetype"), + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}#{$icon-font-name-pf}.woff"), "#{$font-path}#{$icon-font-name-pf}.woff")) format("woff"), + url(if($bootstrap-sass-asset-helper, twbs-font-path("#{$font-path}#{$icon-font-name-pf}.svg##{$icon-font-name-pf}"), "#{$font-path}#{$icon-font-name-pf}.svg##{$icon-font-name-pf}")) format("svg"); + font-weight: normal; + font-style: normal; +} + +[class^="#{$icon-prefix}-"], +[class*=" #{$icon-prefix}-"] { + display: inline-block; + font-family: "#{$icon-font-name-pf}"; + font-style: normal; + font-variant: normal; + font-weight: normal; + line-height: 1; + speak: none; + text-transform: none; + /* Better Font Rendering =========== */ + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +.#{$icon-prefix}-add-circle-o:before { + content: $pficon-var-add-circle-o; +} +.#{$icon-prefix}-applications:before { + content: $pficon-var-applications; +} +.#{$icon-prefix}-arrow:before { + content: $pficon-var-arrow; +} +.#{$icon-prefix}-asleep:before { + content: $pficon-var-asleep; +} +.#{$icon-prefix}-automation:before { + content: $pficon-var-automation; +} +.#{$icon-prefix}-build:before { + content: $pficon-var-build; +} +.#{$icon-prefix}-builder-image:before { + content: $pficon-var-builder-image; +} +.#{$icon-prefix}-bundle:before { + content: $pficon-var-bundle; +} +.#{$icon-prefix}-blueprint:before { + content: $pficon-var-blueprint; +} +.#{$icon-prefix}-chat:before { + content: $pficon-var-chat; +} +.#{$icon-prefix}-close:before { + content: $pficon-var-close; +} +.#{$icon-prefix}-cloud-security:before { + content: $pficon-var-cloud-security; +} +.#{$icon-prefix}-cloud-tenant:before { + content: $pficon-var-cloud-tenant; +} +.#{$icon-prefix}-cluster:before { + content: $pficon-var-cluster; +} +.#{$icon-prefix}-connected:before { + content: $pficon-var-connected; +} +.#{$icon-prefix}-container-node:before { + content: $pficon-var-container-node; +} +.#{$icon-prefix}-cpu:before { + content: $pficon-var-cpu; +} +.#{$icon-prefix}-degraded:before { + content: $pficon-var-degraded; +} +.#{$icon-prefix}-delete:before { + content: $pficon-var-delete; +} +.#{$icon-prefix}-disconnected:before { + content: $pficon-var-disconnected; +} +.#{$icon-prefix}-domain:before { + content: $pficon-var-domain; +} +.#{$icon-prefix}-edit:before { + content: $pficon-var-edit; +} +.#{$icon-prefix}-enterprise:before { + content: $pficon-var-enterprise; +} +.#{$icon-prefix}-equalizer:before { + content: $pficon-var-equalizer; +} +.#{$icon-prefix}-error-circle-o:before { + color: $brand-danger; + content: $pficon-var-error-circle-o; +} +.#{$icon-prefix}-export:before { + content: $pficon-var-export; +} +.#{$icon-prefix}-flag:before, +.#{$icon-prefix}-messages:before { // class name deprecated + content: $pficon-var-flag; +} +.#{$icon-prefix}-flavor:before { + content: $pficon-var-flavor; +} +.#{$icon-prefix}-filter:before { + content: $pficon-var-filter; +} +.#{$icon-prefix}-folder-close:before { + content: $pficon-var-folder-close; +} +.#{$icon-prefix}-folder-open:before { + content: $pficon-var-folder-open; +} +.#{$icon-prefix}-help:before { + content: $pficon-var-help; +} +.#{$icon-prefix}-history:before { + content: $pficon-var-history; +} +.#{$icon-prefix}-home:before { + content: $pficon-var-home; +} +.#{$icon-prefix}-image:before { + content: $pficon-var-image; +} +.#{$icon-prefix}-import:before { + content: $pficon-var-import; +} +.#{$icon-prefix}-in-progress:before { + content: $pficon-var-in-progress; +} +.#{$icon-prefix}-info:before { + content: $pficon-var-info; +} +.#{$icon-prefix}-infrastructure:before { + content: $pficon-var-infrastructure; +} +.#{$icon-prefix}-integration:before { + content: $pficon-var-integration; +} +.#{$icon-prefix}-key:before { + content: $pficon-var-key; +} +.#{$icon-prefix}-locked:before { + content: $pficon-var-locked; +} +.#{$icon-prefix}-maintenance:before { + content: $pficon-var-maintenance; +} +.#{$icon-prefix}-memory:before { + content: $pficon-var-memory; +} +.#{$icon-prefix}-middleware:before { + content: $pficon-var-middleware; +} +.#{$icon-prefix}-migration:before { + content: $pficon-var-migration; +} +.#{$icon-prefix}-monitoring:before { + content: $pficon-var-monitoring; +} +.#{$icon-prefix}-network:before { + content: $pficon-var-network; +} +.#{$icon-prefix}-on:before { + content: $pficon-var-on; +} +.#{$icon-prefix}-on-running:before { + content: $pficon-var-on-running; +} +.#{$icon-prefix}-optimize:before { + content: $pficon-var-optimize; +} +.#{$icon-prefix}-orders:before { + content: $pficon-var-orders; +} +.#{$icon-prefix}-off:before { + content: $pficon-var-off; +} +.#{$icon-prefix}-ok:before { + color: $brand-success; + content: $pficon-var-ok; +} +.#{$icon-prefix}-paused:before { + content: $pficon-var-paused; +} +.#{$icon-prefix}-pending:before { + content: $pficon-var-pending; +} +.#{$icon-prefix}-plugged:before { + content: $pficon-var-plugged; +} +.#{$icon-prefix}-port:before { + content: $pficon-var-port; +} +.#{$icon-prefix}-print:before { + content: $pficon-var-print; +} +.#{$icon-prefix}-process-automation:before { + content: $pficon-var-process-automation; +} +.#{$icon-prefix}-private:before { + content: $pficon-var-private; +} +.#{$icon-prefix}-project:before { + content: $pficon-var-project; +} +.#{$icon-prefix}-rebalance:before { + content: $pficon-var-rebalance; +} +.#{$icon-prefix}-rebooting:before { + content: $pficon-var-rebooting; +} +.#{$icon-prefix}-refresh:before, // class name deprecated +.#{$icon-prefix}-restart:before { + content: $pficon-var-restart; +} +.#{$icon-prefix}-regions:before { + content: $pficon-var-regions; +} +.#{$icon-prefix}-registry:before { + content: $pficon-var-registry; +} +.#{$icon-prefix}-remove:before { + content: $pficon-var-remove; +} +.#{$icon-prefix}-replicator:before { + content: $pficon-var-replicator; +} +.#{$icon-prefix}-repository:before { + content: $pficon-var-repository; +} +.#{$icon-prefix}-resource-pool:before { + content: $pficon-var-resource-pool; +} +.#{$icon-prefix}-resources-almost-empty:before { + content: $pficon-var-resources-almost-empty; +} +.#{$icon-prefix}-resources-almost-full:before { + content: $pficon-var-resources-almost-full; +} +.#{$icon-prefix}-resources-full:before { + content: $pficon-var-resources-full; +} +.#{$icon-prefix}-route:before { + content: $pficon-var-route; +} +.#{$icon-prefix}-running:before { + content: $pficon-var-running; +} +.#{$icon-prefix}-save:before { + content: $pficon-var-save; +} +.#{$icon-prefix}-screen:before { + content: $pficon-var-screen; +} +.#{$icon-prefix}-search:before { + content: $pficon-var-search; +} +.#{$icon-prefix}-security:before { + content: $pficon-var-security; +} +.#{$icon-prefix}-server:before { + content: $pficon-var-server; +} +.#{$icon-prefix}-server-group:before { + content: $pficon-var-server-group; +} +.#{$icon-prefix}-service:before { + content: $pficon-var-service; +} +.#{$icon-prefix}-services:before { + content: $pficon-var-services; +} +.#{$icon-prefix}-service-catalog:before { + content: $pficon-var-service-catalog; +} +.#{$icon-prefix}-settings:before { + content: $pficon-var-settings; +} +.#{$icon-prefix}-spinner:before { + content: $pficon-var-spinner; +} +.#{$icon-prefix}-spinner2:before { + content: $pficon-var-spinner2; +} +.#{$icon-prefix}-storage-domain:before { + content: $pficon-var-storage-domain; +} +.#{$icon-prefix}-tenant:before { + content: $pficon-var-tenant; +} +.#{$icon-prefix}-thumb-tack-o:before { + content: $pficon-var-thumb-tack-o; +} +.#{$icon-prefix}-topology:before { + content: $pficon-var-topology; +} +.#{$icon-prefix}-trend-down:before { + content: $pficon-var-trend-down; +} +.#{$icon-prefix}-trend-up:before { + content: $pficon-var-trend-up; +} +.#{$icon-prefix}-unknown:before { + content: $pficon-var-unknown; +} +.#{$icon-prefix}-user:before { + content: $pficon-var-user; +} +.#{$icon-prefix}-users:before { + content: $pficon-var-users; +} +.#{$icon-prefix}-unlocked:before { + content: $pficon-var-unlocked; +} +.#{$icon-prefix}-unplugged:before { + content: $pficon-var-unplugged; +} +.#{$icon-prefix}-virtual-machine:before { + content: $pficon-var-virtual-machine; +} +.#{$icon-prefix}-volume:before { + content: $pficon-var-volume; +} +.#{$icon-prefix}-warning-triangle-o:before { + color: $brand-warning; + content: $pficon-var-warning-triangle-o; +} +.#{$icon-prefix}-zone:before { + content: $pficon-var-zone; +} diff --git a/src/sass/converted/patternfly/_infotip.scss b/src/sass/converted/patternfly/_infotip.scss new file mode 100644 index 0000000000..e79d4191c0 --- /dev/null +++ b/src/sass/converted/patternfly/_infotip.scss @@ -0,0 +1,145 @@ +// +// Info Tip +// -------------------------------------------------- + +// Overwrites for navbar.less +.navbar-nav > li > .dropdown-menu.infotip { + border-top-width: 1px !important; + margin-top: $popover-arrow-width; +} + +// Overwrites for PatternFly - navbar.less +@media (max-width: $grid-float-breakpoint-max) { + .navbar-pf .navbar-nav .open .dropdown-menu.infotip { + background-color: $color-pf-white !important; + margin-top: 0; + } +} + +// Extends "dropdown-menu" +.infotip { + min-width: 235px; + padding: 0; + .list-group { + border-top: 0; + margin: 0; + padding: 8px 0; + .list-group-item { + border: none; + margin: 0 15px 0 34px; + padding: 5px 0; + > .i { + color: $gray-pf; + font-size: 13px; + left: -20px; + position: absolute; + top: 8px; + } + > a { + color: $gray-pf; + line-height: 13px; + } + > .close { + float: right; + } + } + } + .footer { + background-color: $color-pf-black-150; + padding: 6px 15px; + a:hover { + color: $link-color; + } + } +} + +// Arrows (Copy from popovers.less) +// +// .arrow is outer, .arrow:after is inner + +.infotip .arrow { + &, + &:after { + border-color: transparent; + border-style: solid; + display: block; + height: 0; + position: absolute; + width: 0; + } +} +.infotip .arrow { + border-width: $popover-arrow-outer-width; +} +.infotip .arrow:after { + border-width: $popover-arrow-width; + content: ""; +} + +.infotip { + &.bottom .arrow, + &.bottom-left .arrow, + &.bottom-right .arrow { + border-bottom-color: $popover-arrow-outer-color; + border-top-width: 0; + left: 50%; + margin-left: -$popover-arrow-outer-width; + top: -$popover-arrow-outer-width; + &:after { + border-top-width: 0; + border-bottom-color: $popover-arrow-color; + content: " "; + margin-left: -$popover-arrow-width; + top: 1px; + } + } + &.bottom-left .arrow { + left: 20%; + } + // Default: + &.bottom-right .arrow { + left: 80%; + } + &.top .arrow { + border-bottom-width: 0; + border-top-color: $popover-arrow-outer-color; + bottom: -$popover-arrow-outer-width; + left: 50%; + margin-left: -$popover-arrow-outer-width; + &:after { + border-bottom-width: 0; + border-top-color: $color-pf-black-150; + bottom: 1px; + content: " "; + margin-left: -$popover-arrow-width; + } + } + &.right .arrow { + border-left-width: 0; + border-right-color: $popover-arrow-outer-color; + left: -$popover-arrow-outer-width; + margin-top: -$popover-arrow-outer-width; + top: 50%; + &:after { + bottom: -$popover-arrow-width; + border-left-width: 0; + border-right-color: $popover-arrow-color; + content: " "; + left: 1px; + } + } + &.left .arrow { + border-left-color: $popover-arrow-outer-color; + border-right-width: 0; + margin-top: -$popover-arrow-outer-width; + right: -$popover-arrow-outer-width; + top: 50%; + &:after { + border-left-color: $popover-arrow-color; + border-right-width: 0; + bottom: -$popover-arrow-width; + content: " "; + right: 1px; + } + } +} diff --git a/src/sass/converted/patternfly/_labels.scss b/src/sass/converted/patternfly/_labels.scss new file mode 100644 index 0000000000..af6ff09cd7 --- /dev/null +++ b/src/sass/converted/patternfly/_labels.scss @@ -0,0 +1,17 @@ +// +// Labels +// -------------------------------------------------- + +.label { + border-radius: 0; + font-size: 100%; + font-weight: 600; + h1 &, + h2 &, + h3 &, + h4 &, + h5 &, + h6 & { + font-size: 75%; + } +} diff --git a/src/sass/converted/patternfly/_layouts.scss b/src/sass/converted/patternfly/_layouts.scss new file mode 100644 index 0000000000..36783c87bd --- /dev/null +++ b/src/sass/converted/patternfly/_layouts.scss @@ -0,0 +1,140 @@ +// +// Layouts +// -------------------------------------------------- +.layout-pf { + &, + & body { + min-height: 100%; + } + &.layout-pf-fixed { + &.transitions .container-pf-nav-pf-vertical { + transition: $flyout-transition-pf; + } + body { + padding-top: $navbar-pf-height; // make space for the navbar + } + .navbar-pf { + left: 0; + position: fixed; + top:0; + right: 0; + z-index: 1030; + } + .container-pf-nav-pf-vertical { + margin-left: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + margin-left: $nav-pf-vertical-badges-width; + } + &.collapsed-nav { + margin-left: $nav-pf-vertical-collapsed-width; + &.hidden-icons-pf { + margin-left: 0; + } + } + &.hidden-nav { + margin-left: 0; // remove space as left nav is hidden + } + &.hide-nav-pf { + margin-left: 0 !important; + } + &.collapsed-secondary-nav-pf, &.collapsed-tertiary-nav-pf { + margin-left: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + margin-left: $nav-pf-vertical-badges-width; + } + } + &.nav-pf-persistent-secondary.secondary-visible-pf { + @media (min-width: 1200px) { + margin-left: ($nav-pf-vertical-width + $nav-pf-vertical-width); + &.nav-pf-vertical-with-badges { + margin-left: ($nav-pf-vertical-badges-width + $nav-pf-vertical-badges-width); + } + &.hidden-nav { + margin-left: 0; // remove space as left nav is hidden + } + &.collapsed-secondary-nav-pf { + margin-left: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + margin-left: $nav-pf-vertical-badges-width; + } + } + &.collapsed-tertiary-nav-pf { + margin-left: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + margin-left: $nav-pf-vertical-badges-width; + } + } + &.collapsed-nav { + margin-left: ($nav-pf-vertical-collapsed-width + $nav-pf-vertical-width); + &.nav-pf-vertical-with-badges { + margin-left: ($nav-pf-vertical-collapsed-width + $nav-pf-vertical-badges-width); + } + &.collapsed-secondary-nav-pf { + margin-left: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + margin-left: $nav-pf-vertical-badges-width; + } + } + &.collapsed-tertiary-nav-pf { + margin-left: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + margin-left: $nav-pf-vertical-badges-width; + } + } + &.hidden-icons-pf { + margin-left: 0; + } + } + } + } + } + } + &.layout-pf-fixed-with-footer { + body { + padding-bottom: $footer-pf-height; + } + } +} +.layout-pf-alt { + &, + & body { + min-height: 100%; + } + &.layout-pf-alt-fixed { + &.layout-pf-alt-fixed-inner-scroll { + &, + & body { + height: 100%; + min-height: 0; + } + .container-pf-alt-nav-pf-vertical-alt { + height: 100%; + overflow: auto; + &.container-cards-pf { + margin-top: 0; + padding-top: ($grid-gutter-width/2); + } + } + } + &.transitions .container-pf-alt-nav-pf-vertical-alt { + transition: $flyout-transition-pf; + } + body { + padding-top: $navbar-pf-alt-height; // make space for the navbar + } + .container-pf-alt-nav-pf-vertical-alt { + margin-left: ($nav-pf-vertical-alt-width); + &.collapsed-nav { + margin-left: ($nav-pf-vertical-alt-collapsed-width); // adjust space for the collapsed left nav + } + &.hidden-nav { + margin-left: 0; // remove space as left nav is hidden + } + } + } + &.layout-pf-alt-fixed-with-footer { + body { + padding-bottom: $footer-pf-alt-height; + } + } +} diff --git a/src/sass/converted/patternfly/_links.scss b/src/sass/converted/patternfly/_links.scss new file mode 100644 index 0000000000..e53816090d --- /dev/null +++ b/src/sass/converted/patternfly/_links.scss @@ -0,0 +1,5 @@ +a.disabled { + color: $color-pf-black-500; + cursor: $cursor-disabled; + text-decoration: none; +} diff --git a/src/sass/converted/patternfly/_list-group.scss b/src/sass/converted/patternfly/_list-group.scss new file mode 100644 index 0000000000..a38bf56722 --- /dev/null +++ b/src/sass/converted/patternfly/_list-group.scss @@ -0,0 +1,18 @@ +// +// List groups +// -------------------------------------------------- + +.list-group { + border-top: 1px solid $list-group-top-border; + .list-group-item:first-child { + border-top: 0; + } +} +.list-group-item { + border-left: 0; + border-right: 0; +} + +.list-group-item-heading { + font-weight: 600; +} diff --git a/src/sass/converted/patternfly/_list-pf.scss b/src/sass/converted/patternfly/_list-pf.scss new file mode 100644 index 0000000000..9f5e511002 --- /dev/null +++ b/src/sass/converted/patternfly/_list-pf.scss @@ -0,0 +1,177 @@ +// +// PatternFly List +// -------------------------------------------------- + +.list-pf { + border-bottom: 1px solid $list-pf-border-color; +} + +.list-pf-item { + border-color: $list-pf-border-color; + border-left-color: $color-pf-white; + border-right-color: $color-pf-white; + border-style: solid; + border-width: 1px; + border-bottom: none; + &:hover { + background-color: $list-pf-hover-background-color; + } + &.active { + background-color: $list-pf-header-background-color; + border-color: $list-pf-active-border-color; + border-bottom-width: 1px; + border-bottom-style: solid; + } +} + +.list-pf-expansion { + background-color: $color-pf-white; +} + +.list-pf-container { + align-items: flex-start; + display: flex; + padding: $list-pf-padding; + .list-pf-expansion & { + border-top: 1px solid $list-pf-active-border-color; + } + // when wide enough, if the list is not stacked, then center items vertically + @media (min-width: $screen-md-min) { + .list-pf:not(.list-pf-stacked) & { + align-items: center; + } + } +} + +.list-pf-chevron { + min-width: 1.2em; // ensures that the width does not shift when the chevron is sideways +} + +.list-pf-chevron, +.list-pf-select { + margin-right: 10px; + //add the divider line if there is a chevron or a select + + .list-pf-content { + border-left: 1px solid $color-pf-black-300; + padding-left: ($grid-gutter-width/2); + } + .fa { + font-size: 22px; + } +} + +// add this class to manage flexed contents in the list item content +.list-pf-content-flex { + align-items: flex-start; + display:flex; + flex-grow: 1; + flex-wrap: nowrap; + justify-content: flex-start; + min-width: 0; + // when wide enough, if the list is not stacked, then center items vertically + @media (min-width: $screen-md-min) { + .list-pf:not(.list-pf-stacked) & { + align-items: center; + } + } +} + +.list-pf-left { + flex-grow: 0; + margin-left: 0; + margin-right: ($grid-gutter-width/2); +} +.list-pf-icon { + align-items: center; + display:flex; + justify-content: center; +} +.list-pf-icon-bordered { + border-radius: 50%; + border: 2px solid $list-view-accented-border; +} +.list-pf-icon-small { + font-size: 1.4em; + height: 30px; + line-height: 30px; + width: 30px; +} + + +.list-pf-content-wrapper { + align-items: center; + display:flex; + flex-grow: 1; + flex-wrap: wrap; + min-width: 0; + // when at larger breakpoints, don't stack the contents and add some space between the children + @media (min-width: $screen-md-min) { + flex-wrap: nowrap; + & > * + * { + margin-left: $grid-gutter-width; + } + } + // if the list is stacked, then align the contents to the top + .list-pf-stacked & { + align-items: flex-start; + } + +} + +.list-pf-main-content { + align-items: center; + display: flex; + flex-basis: $list-pf-main-content-width; + flex-grow: 1; + flex-shrink: 1; + flex-wrap: wrap; + min-width: 0; +} + +// at larger breakpoints, if the list is not stacked, then don't wrap the main contents and add some space between them +.list-pf:not(.list-pf-stacked) .list-pf-main-content { + @media (min-width: $screen-md-min) { + flex-wrap: nowrap; + width: auto; + & > * + * { + margin-left: $grid-gutter-width; + } + } +} + +// Title and description are break-word wrapped; add .text-overflow-pf to truncate and ellipse instead +.list-pf-title { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 100%; + font-weight: bold; + min-width: 0; + word-wrap: break-word; +} +.list-pf-description { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 100%; + min-width: 0; + word-wrap: break-word; +} + +.list-pf-additional-content { + display: flex; + flex-basis: ((100% - $list-pf-main-content-width) + 1%); // this adjusts the proportions but adding up to > 100% allows for proper wrapping + flex-grow: 1; + flex-shrink: 1; + flex-wrap: wrap; + justify-content: space-between; +} +.list-pf-actions { + display: flex; + align-items: flex-start; + flex-grow: 0; + margin-left: $grid-gutter-width; + //by default, space contents apart + & > * + * { + margin-left: ($grid-gutter-width / 4); + } + +} diff --git a/src/sass/converted/patternfly/_list-view-dnd.scss b/src/sass/converted/patternfly/_list-view-dnd.scss new file mode 100644 index 0000000000..96a2d8621e --- /dev/null +++ b/src/sass/converted/patternfly/_list-view-dnd.scss @@ -0,0 +1,53 @@ +// +// List View Drag and Drop +// See: https://github.com/marceljuenemann/angular-drag-and-drop-lists +// -------------------------------------------------- + +.list-view-pf-dnd { + // Override dnd styles + .dndDragging { + &.drag-original { + display: none; + // Show when dragging original list items + .list-view-pf-dnd-original-items { + display: block; + } + } + // Show dragable list items during move operation + .list-view-pf-dnd-drag-items { + display: inline-block; + } + // Hide original list items during dnd move operation + .list-view-pf-dnd-original-items { + display: none; + } + } + // Override dnd placeholder element for dragging list items to + .dndPlaceholder { + background-color: $color-pf-black-200; + padding: 20px 0; + } + // A handle decoration shown to left of each list items row + .list-group-item-header { + margin-left: -10px; + &:before { + background-image: linear-gradient(to bottom, $color-pf-blue-400 60%, $color-pf-white 0%); + background-position: left; + background-repeat: repeat-y; + background-size: 2px 5px; + border: 4px solid $color-pf-blue-400; + border-color: $color-pf-blue-500; + content: ""; + height: 55px; + left: 4px; + position: absolute; + top: 5px; + width: 10px; + } + } +} + +// Always hide dragable list items until shown during dnd move operation +.list-view-pf-dnd-drag-items { + display: none; +} diff --git a/src/sass/converted/patternfly/_list-view.scss b/src/sass/converted/patternfly/_list-view.scss new file mode 100644 index 0000000000..77234f582f --- /dev/null +++ b/src/sass/converted/patternfly/_list-view.scss @@ -0,0 +1,299 @@ +// +// List View +// -------------------------------------------------- + + +.list-view-pf { + .list-group-item { + align-items: flex-start; + background-clip: padding-box; + border-color: transparent #fff; + border-style: solid; + border-width: 1px; + @include clearfix(); //IE9 fallback + display: flex; + flex-wrap: wrap; + padding-bottom: 0; + padding-top: 0; + &.list-view-pf-expand-active { + background-color: $list-view-hover-bg; + box-shadow: 0 2px 6px rgba(3, 3, 3, .2); + z-index: 1; + } + &.active { + color: $list-group-link-color; + background-color: $list-view-active-bg; + background-clip: border-box; + border-color: $list-view-active-border transparent transparent; + z-index:auto; + } + &:hover { + background-color: $list-view-hover-bg; + border-left-color: transparent; + border-right-color: transparent; + } + &.list-view-pf-expand-active { + border: solid 1px $list-view-active-border; + &:first-child { + border-top-color: $list-view-active-border; + } + } + &:first-child { + border-top: 1px solid transparent; + } + @media (min-width: $screen-md-min) { + align-items: center; + } + } + .list-group-item-heading { + font-size: $font-size-h3; + small { + display: block; + font-size: ($font-size-base * .8); + font-weight: 400; + } + @media (min-width: $screen-md-min) { + flex: 1 0 unquote("calc(25% - 20px)"); + float: left; // IE9 fallback + font-size: $font-size-base; + margin: 0 ($grid-gutter-width/2) 0 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: unquote("calc(25% - 20px)"); // IE9 fallback + } + } + .list-group-item-text { + color: currentColor !important; // to overwrite color change when active. + margin-bottom: 10px; + @media (min-width: $screen-md-min) { + flex: 1 0 auto; // it covers whats left from the title + float: left; // IE9 fallback + margin: 0 $grid-gutter-width 0 0; + width: unquote("calc(75% - 40px)") // IE9 fallback + } + } +} +.list-view-pf-actions { + float: right; // IE9 fallback + margin-bottom: ($grid-gutter-width/2); + margin-left: ($grid-gutter-width/2); + margin-top: ($grid-gutter-width/2); + order: 2; + button, + > a, + .dropdown-kebab-pf { + margin-left: ($grid-gutter-width/4); + } + .list-view-pf-top-align & { + align-self: flex-start; + } +} +.list-view-pf-additional-info { + align-items: center; + display: flex; + flex-wrap: wrap; + @media (min-width: $screen-md-min) { + flex: 1 0 auto; // it covers whats left from summary + float: left; // IE9 fallback + width: 50%; // IE9 fallback + } +} +.list-view-pf-additional-info-item { + align-items: center; + display: inline-block; + display: flex; + margin-right: ($grid-gutter-width/2); + max-width:100%; + text-align: center; + &.list-view-pf-additional-info-item-stacked { + text-align: center; + flex-direction: column; + strong { + font-size: $font-size-h5; + line-height: 1em; + } + } + .pficon, .fa { + font-size: $font-size-h3; + margin-right: ($grid-gutter-width/4); + } + strong { + font-size: $font-size-h3; + font-weight: 600; + margin-right: 5px; + } + &:last-child { + margin-right: 0; + } +} +.list-view-pf-additional-info-item-donut-chart { width: 60px; } +.list-view-pf-body { + align-items: center; + display: table-cell; //IE9 fallback + flex: 1; + min-width: 0; + vertical-align: top; //IE9 fallback + width: 100%; // IE9 fallback, it extends the cell to size of the container + @media (min-width: $screen-md-min) { + align-items: center; + display: flex; + flex-direction: row; + } +} +.list-view-pf-checkbox { + border-right: 1px solid $list-view-divider; + float: left; //IE9 fallback + margin-bottom: ($grid-gutter-width/2); + margin-right: 15px; + margin-top: ($grid-gutter-width/2); + padding: 3px ($grid-gutter-width/4) 3px 0; + .list-view-pf-top-align & { + align-self: flex-start; + } +} +.list-view-pf-description { + flex: 1 0 50%; + .list-view-pf-stacked & { + display: block; + flex: none; // Fix FF + } + @media (min-width: $screen-md-min) { + align-items: center; + display: flex; + float: left; //IE9 fallback + width: 50%; //IE9 fallback + } +} +.list-view-pf-left { + display: table-cell; //IE9 fallback + padding-right: ($grid-gutter-width/2); + text-align: center; + vertical-align: top; //IE9 fallback + .list-view-pf-calendar { + font-size: $font-size-small; + line-height: 1em; + strong { + display: block; + font-size: ($font-size-h2 * 2); + font-weight: 300; + line-height: 1em; + } + } + .pficon, .fa { + border-radius: 50%; + font-size: 2em; + // -md is out of alpha order to get correct bg on -danger + &.list-view-pf-icon-md { + background-color: $alert-info-bg; + height: 50px; + line-height: 50px; + width: 50px; + } + &.list-view-pf-icon-danger { + background-color: $alert-danger-bg; + color: $alert-danger-border; + } + &.list-view-pf-icon-info { + color: $alert-info-border; + } + &.list-view-pf-icon-lg { + background-color: $alert-info-bg; + height: 60px; + line-height: 60px; + width: 60px; + } + &.list-view-pf-icon-sm { + border: 2px solid $list-view-accented-border; + font-size: 1.4em; + height: 30px; + line-height: 30px; + width: 30px; + &:before { + display: block; + line-height: 26px; + } + } + &.list-view-pf-icon-success { + background-color: $alert-success-bg; + color: $alert-success-border; + } + &.list-view-pf-icon-warning { + background-color: $alert-warning-bg; + color: $alert-warning-border; + } + } +} +.list-view-pf-main-info { + align-items: flex-start; + display: flex; + flex: 1; + min-width: 0; + padding-bottom: ($grid-gutter-width/2); + padding-top: ($grid-gutter-width/2); + @media (min-width: $screen-md-min) { + align-items: center; + .list-view-pf-top-align & { + align-items: flex-start; + } + } +} +.list-view-pf-stacked { + .list-group-item-heading { + float: none; // IE9 fallback + font-size: $font-size-h3; + line-height: 1.2em; + margin-bottom: 5px; + margin-right: $grid-gutter-width; + width: auto; // IE9 fallback + } + .list-group-item-text { + float: none; + width: auto; + } +} +.list-view-pf-view { + background: $list-group-top-border; + border: none; + margin-top: 30px; +} +.list-group-item-header { + box-sizing: content-box; + cursor: pointer; + margin: 0 -15px; + padding: 0 15px; //filling the width of the list item + width: 100%; +} +.list-view-pf-expand { + cursor: pointer; + float: left; //IE9 fallback + margin-bottom: ($grid-gutter-width/2); + margin-right: 2px; + margin-top: ($grid-gutter-width/2); + padding: 3px 0; + &.active, + &:hover { + color: $link-color; + } + .list-view-pf-additional-info-item & { + margin: 0; + padding: 0; + } + .fa-angle-right { + cursor: pointer; + font-size: ($font-size-large+3); + margin-right: 5px; + margin-top: 2px; + width: 10px; + } +} +.list-group-item-container { + background: #fff; + border-top: solid 1px $list-view-active-border; + box-sizing: content-box; + margin: -1px -15px 0; + order: 3; + padding: 10px 15px; + position: relative; + width: 100%; +} diff --git a/src/sass/converted/patternfly/_login.scss b/src/sass/converted/patternfly/_login.scss new file mode 100644 index 0000000000..fc4e56fa21 --- /dev/null +++ b/src/sass/converted/patternfly/_login.scss @@ -0,0 +1,96 @@ +// +// Login +// -------------------------------------------------- + +.login-pf { + height: 100%; + #brand { + position: relative; + top: -70px; + img { + display: block; + height: 18px; + margin: 0 auto; + max-width: 100%; + @media (min-width: $screen-sm-min) { + margin: 0; + text-align: left; + } + } + } + #badge { + display: block; + margin: 20px auto 70px; + position: relative; + text-align: center; + @media (min-width: $screen-sm-min) { + float: right; + margin-right: 64px; + margin-top: 50px; + } + } + body { + background: $login-bg-color url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-bg-login}"), "#{$img-path}#{$img-bg-login}")) repeat-x 50% 0; + background-size: auto; + @media (min-width: $screen-sm-min) { + background-size: 100% auto; + } + } + .container { + background-color: $login-container-bg-color-rgba; + clear: right; + color: $color-pf-white; + padding-bottom: 40px; + padding-top: 20px; + width: auto; + @media (min-width: $screen-sm-min) { + bottom: 13%; + padding-left: 80px; + position: absolute; + width: 100%; + } + .details { + p:first-child { + border-top: 1px solid rgba($color-pf-white, (30/100)); + padding-top: 25px; + margin-top: 25px; + } + @media (min-width: $screen-sm-min) { + p:first-child { + border-top: 0; + padding-top: 0; + margin-top: 0; + } + border-left: 1px solid rgba($color-pf-white, (30/100)); + padding-left: 40px; + } + p { + margin-bottom: 2px; + } + } + .form-horizontal { + .control-label { + font-size: ($font-size-base + 1); + font-weight: 400; + text-align: left; + } + .form-group:last-child { + &, + .help-block:last-child { + margin-bottom: 0; + } + } + } + .help-block { + color: $color-pf-white; + } + .login { + @media (min-width: $screen-sm-min) { + padding-right: 40px; + } + } + .submit { + text-align: right; + } + } +} diff --git a/src/sass/converted/patternfly/_mixins.scss b/src/sass/converted/patternfly/_mixins.scss new file mode 100644 index 0000000000..47ce58bf54 --- /dev/null +++ b/src/sass/converted/patternfly/_mixins.scss @@ -0,0 +1,81 @@ +// +// Patternfly Mixins +// -------------------------------------------------- +// PatternFly-specific mixins + +// Patternfly button variants. +@mixin button-variant($color, $background, $background-image-start, $background-image-stop, $border){ + background-color: $background; + @include gradient-vertical($background-image-start, $background-image-stop); + border-color: $border; + color: $color; + + &:hover, + &:focus, + &:active, + &.active, + .open .dropdown-toggle#{&} { + background-color: $background; + background-image: none; + border-color: $border; + color: $color; + } + &:active, + &.active, + .open .dropdown-toggle#{&} { + background-image: none; + &:hover, + &:focus, + &.focus { + background-color: darken($background, 5%); + border-color: darken($border, 7%); + } + } + &.disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &:active, + &.active { + background-color: $background; + border-color: $border; + } + } +} + +// SASS CONVERSION FIX. +// Allows inclusion of sr-only rules in nested media queries where @extends .sr-only +// will not work. +@mixin sr-only-pf(){ + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +@mixin tab-indicator($background: $gray-light-pf, $left: 15px, $right: 15px){ + &:before { + background: $background; + bottom: -1px; + content: ""; + display: block; + height: 2px; + left: $left; + position: absolute; + right: $right; + } +} + +// Ellipse overflow text +.text-overflow-pf { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; +} diff --git a/src/sass/converted/patternfly/_modals.scss b/src/sass/converted/patternfly/_modals.scss new file mode 100644 index 0000000000..c7c3b98e8c --- /dev/null +++ b/src/sass/converted/patternfly/_modals.scss @@ -0,0 +1,38 @@ +// +// Modals +// -------------------------------------------------- + +// Modal header +// Top section of the modal w/ title and dismiss +.modal-header { + background-color: $color-pf-black-150; + border-bottom: none; + padding: $modal-title-padding-vertical $modal-title-padding-horizontal; +} +// Close icon +.modal-header .close { + margin-top: 2px; +} + +// Title text within header +.modal-title { + font-size: 13px; + font-weight: 700; +} + +// Footer (for actions) +.modal-footer { + border-top: none; + margin-top: 15px; + padding: ($modal-inner-padding - 1) $modal-inner-padding $modal-inner-padding; + > .btn { + padding-left: 10px; + padding-right: 10px; + > .fa-angle-left { + margin-right: 5px; + } + > .fa-angle-right { + margin-left: 5px; + } + } +} diff --git a/src/sass/converted/patternfly/_nav-vertical-alt.scss b/src/sass/converted/patternfly/_nav-vertical-alt.scss new file mode 100644 index 0000000000..99f958ef93 --- /dev/null +++ b/src/sass/converted/patternfly/_nav-vertical-alt.scss @@ -0,0 +1,168 @@ +// +// Nav Vertical Alt +// -------------------------------------------------- + +.layout-pf-alt-fixed.transitions .nav-pf-vertical-alt { + transition: $flyout-transition-pf; + + &.collapsed .list-group-item .list-group-item-value { + transition: opacity 0ms 100ms, opacity 100ms linear; + } + + .list-group-item { + .badge { + transition: $flyout-transition-pf; + } + + .list-group-item-value { + transition: opacity 500ms ease-out; + transition-delay: 150ms; + } + } +} + +.nav-pf-vertical-alt { + background: $nav-pf-vertical-alt-bg-color; + + .ie9.layout-pf-alt-fixed & { + box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box + } + + .layout-pf-alt-fixed & { + border-right: 1px solid $nav-pf-vertical-alt-border-color; + bottom: 0; + overflow-x: hidden; + overflow-y: auto; + left: 0; + position: fixed; + top: $navbar-pf-alt-height; // move out of way of navbar-pf-alt + width: $nav-pf-vertical-alt-width; + z-index: $zindex-navbar-fixed; + + &.collapsed { + width: $nav-pf-vertical-alt-collapsed-width !important; + + .list-group-item { + .badge { + padding: 2px 3px; + right: 21px; + top: 36px; + } + + .list-group-item-value { + opacity: 0; + } + } + } + + &.hidden { + display: none; + + &.show-mobile-nav { + box-shadow: 0 0 3px rgba($color-pf-black, (15/100)); + display: block !important; + } + } + } + + .layout-pf-alt-fixed-with-footer & { + bottom: $footer-pf-alt-height; + } + + .list-group { + border-top: 0; + margin-bottom: 0; + } + + .list-group-item { + padding: 0; + + a { + color: $gray-dark; + display: block; + font-size: ($font-size-base + 2); + height: $nav-pf-vertical-alt-link-height; + padding: $nav-pf-vertical-alt-link-padding; + position: relative; + white-space: nowrap; + + &:focus { + color: $gray-dark; + text-decoration: none; + } + + &:hover { + color: $nav-pf-vertical-alt-active-color; + text-decoration: none; + } + } + + &.active { + background-color: $nav-pf-vertical-alt-bg-color; + border-color: $list-group-border; + + &:before { + background: $nav-pf-vertical-alt-active-color; + content: " "; + display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 5px; + } + + a { + color: $nav-pf-vertical-alt-active-color; + } + } + + .badge { + background: $gray-dark; + border: 1px solid $nav-pf-vertical-alt-bg-color; + border-radius: 3px; + color: $nav-pf-vertical-alt-badge-color; + font-weight: 700; + font-size: ($font-size-base - 3); + padding: 5px; + position: absolute; + right: 15px; + text-align: center; + top: 21px; + + &.notifications { + background: $notification-badge-color; + } + } + + .fa, + .glyphicon, + .pficon { + float: left; + font-size: 18px; + line-height: 30px; + margin-right: 10px; + text-align: center; + width: 18px; + } + + .list-group-item-value { + display: inline-block; + line-height: 30px; + opacity: 1; + overflow: hidden; + text-overflow: ellipsis; + width: 140px; + } + + } + + .list-group-item-separator { + border-top-width: 5px; + } + + .sidebar-pf & { + margin-left: (-($grid-gutter-width / 2)); + margin-right: (-($grid-gutter-width / 2)); + } +} diff --git a/src/sass/converted/patternfly/_navbar-alt.scss b/src/sass/converted/patternfly/_navbar-alt.scss new file mode 100644 index 0000000000..bc1a90fdda --- /dev/null +++ b/src/sass/converted/patternfly/_navbar-alt.scss @@ -0,0 +1,141 @@ +// +// Navbar Alt +// -------------------------------------------------- + +.navbar-pf-alt { + background-color: $navbar-pf-alt-bg-color; + background-image: $navbar-pf-alt-bg-img; + background-repeat: $navbar-pf-alt-bg-repeat; + background-size: $navbar-pf-alt-bg-size; + border: none; + border-radius: 0; + border-top: $navbar-pf-alt-border-width $navbar-pf-alt-border-style $navbar-pf-alt-border-color; + margin-bottom: 0; + + .infotip.bottom-right .arrow { + left: 90%; + } + + .layout-pf-alt-fixed & { + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: $zindex-navbar-fixed; + } + + .nav { + &.navbar-nav > li > .dropdown-menu.infotip { + margin-top: 0; + } + + .nav-item-iconic { + cursor: pointer; + line-height: 1; + max-height: ($navbar-pf-alt-height - $navbar-pf-alt-border-width); // to keep Firefox from oversizing icons + padding: $navbar-pf-alt-nav-item-iconic-padding; + position: relative; + + &:hover, + &:focus { + background-color: transparent; + + .caret, + .fa, + .glyphicon, + .pficon { + color: $navbar-pf-alt-active-color; + } + } + + .badge { + background-color: $notification-badge-color; + border-radius: 20px; + color: $navbar-pf-alt-active-color; + cursor: pointer; + font-size: ($font-size-base - 3); + font-weight: 700; + margin: 0 0 -11px -12px; + min-width: 0; + padding: 2px 4px; + } + + .caret, + .fa, + .pficon { + color: $navbar-pf-alt-color; + font-size: ($font-size-base + 4); + } + + .caret { + font-size: $font-size-base; + width: auto; + } + + } + + .open > .nav-item-iconic { + &, + &:hover, + &:focus { + background: transparent; + + .caret, + .fa, + .pficon { + color: $navbar-pf-alt-active-color; + } + } + } + } + + .navbar-brand { + color: $navbar-pf-alt-navbar-brand-color; + height: auto; + margin: $navbar-pf-alt-navbar-brand-margin; + min-height: $navbar-pf-alt-navbar-brand-min-height; + padding: $navbar-pf-alt-navbar-brand-padding; + + .navbar-brand-name { + display: inline; + margin-left: $navbar-pf-alt-navbar-brand-name-margin; + margin-right: $navbar-pf-alt-navbar-brand-name-margin; + // hide once screen gets too small + @media (max-width: $navbar-pf-alt-navbar-brand-name-breakpoint) { + display: none; + } + } + + .navbar-brand-icon { + display: inline; + margin-left: $navbar-pf-alt-navbar-brand-icon-margin; + margin-right: $navbar-pf-alt-navbar-brand-icon-margin; + } + } + + .navbar-iconic { + margin-right: 0; + } + + .navbar-toggle { + border: 0; + display: block; + float: left; + margin: $navbar-pf-alt-navbar-toggle-margin; + + &:hover, + &:focus { + .icon-bar { + background: $navbar-pf-alt-navbar-toggle-icon-bar-hover-bg; + } + } + + + .navbar-brand { + margin-left: 0; + } + + .icon-bar { + background: $navbar-pf-alt-color; + } + } +} diff --git a/src/sass/converted/patternfly/_navbar-vertical.scss b/src/sass/converted/patternfly/_navbar-vertical.scss new file mode 100644 index 0000000000..e616ca3507 --- /dev/null +++ b/src/sass/converted/patternfly/_navbar-vertical.scss @@ -0,0 +1,145 @@ +// +// Navigation Bar for use with vertical navigation +// -------------------------------------------------- + +.navbar-pf-vertical { + background-color: $navbar-pf-vertical-bg-color; + border: none; + border-radius: 0; + border-top: $navbar-pf-vertical-border-width $navbar-pf-vertical-border-style $navbar-pf-vertical-border-color; + margin-bottom: 0; + + .infotip.bottom-right .arrow { + left: 90%; + } + + .layout-pf-fixed & { + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: $zindex-navbar-fixed; + } + + .nav { + &.navbar-nav > li > .dropdown-menu.infotip { + margin-top: 0; + } + + .nav-item-iconic { + color: $navbar-pf-vertical-color; + cursor: pointer; + line-height: 1; + max-height: ($navbar-pf-vertical-height - $navbar-pf-vertical-border-width); // to keep Firefox from oversizing icons + padding: $navbar-pf-vertical-nav-item-iconic-padding; + position: relative; + + &:hover, + &:focus { + color: $navbar-pf-vertical-active-color; + background-color: transparent; + + .caret, + .fa, + .glyphicon, + .pficon { + color: $navbar-pf-vertical-active-color; + } + } + + .badge { + background-color: $notification-badge-color; + border-radius: 20px; + color: $navbar-pf-vertical-active-color; + cursor: pointer; + font-size: ($font-size-base - 3); + font-weight: 700; + left: 20px; + margin: 0; + padding: 2px 4px; + position: absolute; + min-width: 10px; + min-height: 10px; + top: 18px; + &.badge-pf-bordered { + border: 1px solid $navbar-pf-vertical-bg-color; + } + } + + .caret, + .fa, + .pficon { + color: $navbar-pf-vertical-color; + font-size: ($font-size-base + 4); + } + + .caret { + font-size: $font-size-base; + width: auto; + } + + } + + .open > .nav-item-iconic { + &, + &:hover, + &:focus { + background: transparent; + + .caret, + .fa, + .pficon { + color: $navbar-pf-vertical-active-color; + } + } + } + } + + .navbar-brand { + color: $navbar-pf-vertical-navbar-brand-color; + height: auto; + margin: $navbar-pf-vertical-navbar-brand-margin; + min-height: $navbar-pf-vertical-navbar-brand-min-height; + padding: $navbar-pf-vertical-navbar-brand-padding; + + .navbar-brand-name { + display: inline-block; + margin: $navbar-pf-vertical-navbar-brand-name-margin; + // hide once screen gets too small + @media (max-width: $navbar-pf-vertical-navbar-brand-name-breakpoint) { + display: none; + } + } + + .navbar-brand-icon { + display: inline-block; + margin: $navbar-pf-vertical-navbar-brand-icon-margin; + } + } + + .navbar-iconic { + margin-right: 0; + } + + .navbar-toggle { + border: 0; + display: block; + float: left; + margin: $navbar-pf-vertical-navbar-toggle-margin; + + &:hover, + &:focus { + .icon-bar { + background: $navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg; + } + } + + + .navbar-brand { + margin-left: 0; + } + + .icon-bar { + background: $navbar-pf-vertical-color; + } + } +} diff --git a/src/sass/converted/patternfly/_navbar.scss b/src/sass/converted/patternfly/_navbar.scss new file mode 100644 index 0000000000..9bf2075928 --- /dev/null +++ b/src/sass/converted/patternfly/_navbar.scss @@ -0,0 +1,543 @@ +// +// Navbar +// -------------------------------------------------- + +.navbar-pf { + background: $navbar-pf-bg-color; + border: 0; + border-radius: 0; + border-top: 3px solid $navbar-pf-border-color; + margin-bottom: 0; + min-height: 0; + .navbar-brand { + color: $navbar-pf-active-color; + height: auto; + padding: 12px 0; + margin: 0 0 0 20px; + img { + display: block; + } + } + .navbar-collapse { + border-top: 0; + @include box-shadow(none); + padding: 0; + } + .navbar-header { + border-bottom: 1px solid $navbar-pf-navbar-header-border-color; + float: none; + } + .navbar-nav { + margin: 0; + > .active > a, + > .active > a:hover, + > .active > a:focus { + background-color: $navbar-pf-navbar-nav-active-bg-color; + color: $navbar-pf-active-color; + } + > li > a { + color: $navbar-pf-color; + line-height: 1; + padding: 10px 20px; + text-shadow: none; + &:hover, + &:focus { + color: $navbar-pf-active-color; + } + } + > .open { + > a { + &, + &:hover, + &:focus { + background-color: $navbar-pf-navbar-nav-active-bg-color; + color: $navbar-pf-active-color; + } + } + } + .badge { + background-color: $notification-badge-color; + border-radius: 20px; + color: $navbar-pf-vertical-active-color; + cursor: pointer; + font-size: ($font-size-base - 3); + font-weight: 700; + left: 26px; + margin: 0; + padding: 2px 4px; + position: absolute; + min-width: 10px; + min-height: 10px; + top: 6px; + @media(min-width: $screen-sm-min) { + left: auto; + right: 6px; + top: 3px; + } + &.badge-pf-bordered { + border: 1px solid $navbar-pf-bg-color; + } +} + + @media (max-width: $grid-float-breakpoint-max) { + .active .dropdown-menu, + .active .navbar-persistent, + .open .dropdown-menu { + background-color: $navbar-pf-navbar-nav-active-active-bg-color !important; + margin-left: 0; + padding-bottom: 0; + padding-top: 0; + > .active > a, + .dropdown-submenu.open > a { + &, + &:hover, + &:focus { + background-color: $navbar-pf-navbar-nav-active-active-open-bg-color !important; + color: $navbar-pf-active-color; + } + } + > li > a { + background-color: transparent; + border: 0; + color: $navbar-pf-color; + outline: none; + padding-left: 30px; + &:hover { + color: $navbar-pf-active-color; + } + } + .divider { + background-color: $navbar-pf-navbar-header-border-color; + margin: 0 1px; + } + .dropdown-header { + padding-bottom: 0; + padding-left: 30px; + } + .dropdown-submenu { + &.open .dropdown-toggle { + color: $navbar-pf-active-color; + } + &.pull-left { + float: none !important; + } + > a:after { + display: none; + } + .dropdown-header { + padding-left: 45px; + } + .dropdown-menu { + border: 0; + bottom: auto; + @include box-shadow(none); + display: block; + float: none; + margin: 0; + min-width: 0; + padding: 0; + position: relative; + left: auto; + right: auto; + top: auto; + > li > a { + padding: 5px 15px 5px 45px; + line-height: 20px; + } + .dropdown-menu > li > a { + padding-left: 60px; + } + } + } + } + .active .navbar-persistent { + .dropdown-submenu { + &.open .dropdown-menu { + display: block; + } + > a:after { + display: inline-block !important; + position: relative; + right: auto; + top: 1px; + } + .dropdown-menu { + display: none; + } + .dropdown-submenu > a:after { + display: none !important; + } + } + } + .context-bootstrap-select { // Also see bootstrap-select.less + .open > .dropdown-menu { + background-color: $color-pf-white !important; + > .active > a { + &, + &:active { + background-color: $dropdown-link-hover-bg !important; + border-color: $dropdown-link-hover-border-color !important; + color: $gray-dark !important; + small { + color: $gray-light !important; + } + } + } + > .disabled > a { + color: $gray-light !important; + } + > .selected > a { + &, + &:active { + background-color: $dropdown-link-active-bg !important; + border-color: $dropdown-link-active-border-color !important; + color: $color-pf-white !important; + small { + color: fade($color-pf-white, 50%) !important; + } + } + } + li { + > a.opt { + border-bottom: 1px solid transparent; + border-top: 1px solid transparent; + color: $gray-dark; + padding-left: 10px; + padding-right: 10px; + } + & a { + &:active small { + color: fade($color-pf-white, 50%) !important; + } + &:hover, + &:focus { + small { + color: $gray-light; + } + } + } + } + } + > .open > .dropdown-menu { + padding-bottom: 5px; + padding-top: 5px; + } + } + } + } + .navbar-persistent { + display: none; + } + .active > .navbar-persistent { + display: block; + } + .navbar-primary { + float: none; + .context { + border-bottom: 1px solid $navbar-pf-navbar-header-border-color; + &.context-bootstrap-select .bootstrap-select.btn-group { + &, + &[class*="span"] { + margin: 8px 20px 9px; + width: auto; // known bug: IE8 will make it as wide as the longest string + } + } + } + > li > .navbar-persistent > .dropdown-submenu > a { + position: relative; + &:after { + content: $fa-var-angle-down; + display: inline-block; + font-family: $icon-font-name-fa; + font-weight: normal; + @media (max-width: $grid-float-breakpoint-max) { + height: 10px; + margin-left: 4px; + vertical-align: baseline; + } + } + } + } + .navbar-toggle { + border: 0; + margin: 0; + padding: 10px 20px; + &:hover, + &:focus { + background-color: transparent; + outline: none; + .icon-bar { + @include box-shadow(0 0 3px $color-pf-white); + } + } + .icon-bar { + background-color: $navbar-pf-icon-bar-bg-color; + } + } + .navbar-utility { + border-bottom: 1px solid $navbar-pf-navbar-header-border-color; + li.dropdown > .dropdown-toggle { + padding-left: 36px; + position: relative; + .pficon-user { + left: 20px; + position: absolute; + top: 10px; + } + } + @media (max-width: $grid-float-breakpoint-max) { + > li + li { + border-top: 1px solid $navbar-pf-navbar-header-border-color; + } + } + } +} + +@media (min-width: $grid-float-breakpoint) { + .navbar-pf { + .navbar-brand { + padding: $navbar-pf-navbar-navbar-brand-padding; + } + .navbar-nav > li > a { + padding-bottom: 14px; + padding-top: 14px; + } + .navbar-persistent { + font-size: $font-size-large; + } + .navbar-primary { + font-size: $font-size-large; + @include gradient-vertical($navbar-pf-navbar-primary-bg-color-start, $navbar-pf-navbar-primary-bg-color-stop); + &.persistent-secondary { + .context { + .dropdown-menu { + top: auto; + } + } + .dropup .dropdown-menu { + bottom: -5px; + top: auto; + } + > li { + position: static; + &.active { + margin-bottom: 32px; + > .navbar-persistent { + display: block; + left: 0; + position: absolute; + } + } + > .navbar-persistent { + background: $navbar-pf-navbar-navbar-persistent-bg-color; + border-bottom: 1px solid $navbar-pf-navbar-navbar-persistent-border-color; + padding: 0; + width: 100%; + a { + text-decoration: none !important; + } + > li { + &.active { + &, + &:hover { + @include tab-indicator($background: $nav-tabs-active-link-hover-color, $left: 20px, $right: 20px); + } + > a, + > a:hover, + &:hover > a { + color: $link-color !important; + } + .active > a { + color: $navbar-pf-active-color; + } + } + &.dropdown-submenu { + &:hover > .dropdown-menu { + display: none; + } + &.open { + > .dropdown-menu { + display: block; + left: 20px; + margin-top: 1px; + top: 100%; + } + > .dropdown-toggle { + color: $gray-darker; + &:after { + border-top-color: $gray-darker; + } + } + } + > .dropdown-toggle { + padding-right: 35px !important; + &:after { + position: absolute; + right: 20px; + top: 10px; + } + } + } + &:hover, + &.open { + @include tab-indicator($left: 20px, $right: 20px); + > a { + color: $gray-darker; + &:after { + border-top-color: $gray-darker; + } + } + } + > a { + background-color: transparent; + display: block; + line-height: 1; + padding: 9px 20px; + &.dropdown-toggle { + padding-right: 35px; + &:after { + font-size: ($font-size-large + 1); + position: absolute; + right: 20px; + top: 9px; + } + } + &:hover { + color: $gray-darker; + } + } + a { + color: $gray-pf; + } + } + } + } + } + > li > a { + border-bottom: 1px solid transparent; + border-top: 1px solid transparent; + position: relative; + margin: -1px 0 0; + &:hover { + background-color: $navbar-pf-navbar-primary-hover-bg-color-stop; + border-top-color: $navbar-pf-navbar-primary-hover-border-color; + color: $navbar-pf-color; + @include gradient-vertical($navbar-pf-navbar-primary-hover-bg-color-start, $navbar-pf-navbar-primary-hover-bg-color-stop); + } + } + > .active > a, + > .active > a:hover, + > .active > a:focus, + > .open > a, + > .open > a:hover, + > .open > a:focus { + background-color: $navbar-pf-navbar-primary-active-bg-color-stop; + border-bottom-color: $navbar-pf-navbar-primary-active-bg-color-stop; + border-top-color: $navbar-pf-navbar-primary-active-border-color; + @include box-shadow(none); + color: $navbar-pf-active-color; + @include gradient-vertical($navbar-pf-navbar-primary-active-bg-color-start, $navbar-pf-navbar-primary-active-bg-color-stop); + } + li.context { + &.context-bootstrap-select .filter-option { + max-width: 160px; + text-overflow: ellipsis; + } + &.dropdown { + border-bottom: 0; + } + > a, + &.context-bootstrap-select { + background-color: $navbar-pf-navbar-primary-context-bg-color-stop; + border-bottom-color: $navbar-pf-navbar-primary-context-border-color; + border-right: 1px solid $navbar-pf-navbar-primary-context-border-color; + border-top-color: $navbar-pf-navbar-primary-context-border-top-color; + font-weight: 600; + @include gradient-vertical($navbar-pf-navbar-primary-context-bg-color-start, $navbar-pf-navbar-primary-context-bg-color-stop); + &:hover { + background-color: $navbar-pf-navbar-primary-context-hover-bg-color-stop; + border-bottom-color: $navbar-pf-navbar-primary-context-hover-border-color; + border-right-color: $navbar-pf-navbar-primary-context-hover-border-color; + border-top-color: $navbar-pf-navbar-primary-context-hover-border-top-color; + @include gradient-vertical($navbar-pf-navbar-primary-context-hover-bg-color-start, $navbar-pf-navbar-primary-context-hover-bg-color-stop); + } + } + &.open > a { + background-color: $navbar-pf-navbar-primary-context-active-bg-color-stop; + border-bottom-color: $navbar-pf-navbar-primary-context-active-border-color; + border-right-color: $navbar-pf-navbar-primary-context-active-border-right-color; + border-top-color: $navbar-pf-navbar-primary-context-active-border-top-color; + @include gradient-vertical($navbar-pf-navbar-primary-context-active-bg-color-start, $navbar-pf-navbar-primary-context-active-bg-color-stop); + } + } + } + .navbar-utility { + border-bottom: 0; + font-size: $font-size-small; + position: absolute; + right: 0; + top: 0; + > .active > a, + > .active > a:hover, + > .active > a:focus, + > .open > a, + > .open > a:hover, + > .open > a:focus { + background: $navbar-pf-navbar-utility-open-bg-color; + color: $navbar-pf-navbar-utility-color; + } + > li > a { + border-left: 1px solid $navbar-pf-navbar-utility-border-color; + color: $navbar-pf-navbar-utility-color !important; + padding: 7px 10px; + &:hover { + background: $navbar-pf-navbar-utility-hover-bg-color; + border-left-color: $navbar-pf-navbar-utility-hover-border-color; + } + } + > li.open > a { + border-left-color: $navbar-pf-navbar-utility-open-border-color; + color: $navbar-pf-active-color !important; + } + li.dropdown > .dropdown-toggle { + padding-left: 26px; + .pficon-user { + left: 10px; + top: 7px; + } + } + .open .dropdown-menu { + left: auto; + right: 0; + .dropdown-menu { + left: auto; + right: 100%; + } + } + } + .navbar-utility .open .dropdown-menu { + border-top-width: 0; + } + .open { + &.bootstrap-select .dropdown-menu, + .dropdown-submenu > .dropdown-menu { + border-top-width: 1px !important; + } + } + } +} +@media (max-width: 360px) { + .navbar-pf { + .navbar-brand { + margin-left: 10px; + width: 75%; + img { + height: auto; + max-width: 100%; + } + } + .navbar-toggle { + padding-left: 0; + } + } +} diff --git a/src/sass/converted/patternfly/_notifications-drawer.scss b/src/sass/converted/patternfly/_notifications-drawer.scss new file mode 100644 index 0000000000..45f01d63bb --- /dev/null +++ b/src/sass/converted/patternfly/_notifications-drawer.scss @@ -0,0 +1,250 @@ +// +// Notifications Drawer +// -------------------------------------------------- + + +.drawer-pf { + background-color: $color-pf-black-100; + border: 1px solid $card-pf-border-color; + @include box-shadow(0 6px 12px fade($color-pf-black, 17.5%)); + overflow-y: auto; + position: absolute; + right: 0; + width: 320px; + z-index: 2; + .panel { + border-bottom: none; + border-left: none; + border-right: none; + } + .panel-group .panel-heading + .panel-collapse .panel-body { + border-top: none; + border-bottom: 1px solid $card-pf-border-color; + padding: 0; + } + .panel-counter { + display: block; + font-style: italic; + line-height: 1.2; + padding-left: 18px; + padding-top: 5px; + } + .panel-heading { border-bottom: 1px solid $card-pf-border-color; } + .panel-group { + bottom: 0; + margin-bottom: 0; + position: absolute; + top: 25px; // Height of Notifications Drawer box. + width: 100%; + } + .panel-title a { + cursor: pointer; + display: block; + } + &.drawer-pf-expanded { + @media (max-width: $screen-xs-max) { + left:0; + width: 100%; + } + @media (min-width: $screen-xs-max) { + left: 270px; + } // if the drawer is expanded and the screen is reduced this ensures it switches to full width on smaller screens. + width: inherit; + .drawer-pf-toggle-expand:before { + content: "\f101"; + } + } + .blank-slate-pf { + border: 0; + margin-bottom: 0; + padding: 30px; + + .blank-slate-pf-icon { + font-size: 3em; + line-height: 1em; + } + + h1 { + font-size: 1em; + margin-bottom: 0; + margin-top: 15px; + } + } +} +.drawer-pf-close, .drawer-pf-toggle-expand { + color: $gray-darker; + cursor: pointer; + line-height: inherit; + padding: 2px 10px; + position: absolute; + &:hover, + &:focus { + color: $color-pf-blue-400; + text-decoration: none; + } +} +.drawer-pf-toggle-expand { + left: 0; + &:before { + content: "\f100"; + font-family: "FontAwesome"; + } + &:hover { + color: $link-color; + } +} +.drawer-pf-close { + right: 0; +} + + +.drawer-pf-action { + display: flex; + border-bottom: 1px solid $card-pf-border-color; + + .btn-link { + color: $link-color; + padding: 10px 0; + .pficon, .fa { + margin-right: 3px; + } + .pficon-close { + position: relative; + top: 1px; + } + + &:hover { color: $link-hover-color; } + } +} + +.drawer-pf-action-link { + border-left: solid 1px $color-pf-black-300; + flex: 1 1 0%; + margin: 10px 0; + text-align: center; + + &:first-of-type { + border-left-width: 0; + } + + .btn-link { + padding: 0; + } +} + +.drawer-pf-loading { + color: $gray-pf; + font-size: ($font-size-base + 2); + padding: 20px 15px; +} + +.drawer-pf-notification { + border-bottom: 1px solid $card-pf-border-color; + padding: 15px; + .date { + border-right: 1px solid #aaa; + display: inline-block; + line-height: 1; + margin-right: 5px; + padding-right: 9px; + } + > .dropdown-kebab-pf { + margin-top: -3px; + } + + .pficon { + font-size: $font-size-large; + margin-top: 3px; + } + &:last-of-type { + border-bottom: none; + } + &:hover { background-color: $color-pf-blue-50; } + &.unread .drawer-pf-notification-message { font-weight: bold; } + &.expanded-notification { + .date { + border-right: none; + padding-right: 0; + } + } +} + +.drawer-pf-notification-content { + cursor: default; +} + +.drawer-pf-notification-info, +.drawer-pf-notification-message { + display: block; + padding-left: 27px; + padding-right: 19px; + .expanded-notification & { + display: inline-block; + } +} + +.drawer-pf-notifications-non-clickable .drawer-pf-notification:hover { + background-color: $color-pf-white; +} + +.drawer-pf-title { + background-color: $color-pf-black-100; + border-bottom: 1px solid $card-pf-border-color; + position: absolute; + width: 100%; + h3 { + font-size: $font-size-base; + margin: 0; + padding: 6px 15px; + } +} + +.drawer-pf-notification.expanded-notification { + .drawer-pf-notification-content { + display: flex; + @media (max-width: $screen-sm-max) { + flex-direction: column; + } + .drawer-pf-notification-message { + flex: 1 1; + } + } +} + +/* Exclusive styles to work with Vertical Navigation */ +.navbar-pf-vertical { + .drawer-pf { + height: unquote("calc(100vh - #{$drawer-pf-top-vertical} - 20px)");//to create a 20px offset bottom + top: $drawer-pf-top-vertical; //menu height; + @media (max-width: $screen-xs-max) { + width:100%; + height: calc(unquote("100vh - #{$drawer-pf-top-vertical}")); + } + + } + .nav .drawer-pf-trigger { + .drawer-pf-trigger-icon { + border-left: 1px solid $navbar-pf-navbar-utility-border-color; + border-right: 1px solid $navbar-pf-navbar-utility-border-color; + padding-left: 15px; + padding-right: 15px; + } + &.open .drawer-pf-trigger-icon { + background-color: $navbar-pf-navbar-utility-hover-bg-color; + } + } +} + +/* Exclusive styles to work with Horizontal Navigation */ +.navbar-pf { + .drawer-pf { + height: unquote("calc(100vh - #{$drawer-pf-top-horizontal} - 20px)"); + top: $drawer-pf-top-horizontal; + @media (max-width: $screen-xs-max) { + width:100%; + height: calc(unquote("100vh - #{$drawer-pf-top-horizontal} - 32px")); + top:calc(unquote("#{$drawer-pf-top-horizontal} + 8px")); + } + } + .drawer-pf-trigger-icon { cursor: pointer; } +} diff --git a/src/sass/converted/patternfly/_pager.scss b/src/sass/converted/patternfly/_pager.scss new file mode 100644 index 0000000000..20979a4f66 --- /dev/null +++ b/src/sass/converted/patternfly/_pager.scss @@ -0,0 +1,68 @@ +// +// Pager +// -------------------------------------------------- + +.pager { + li { + > a, + > span { + @include button-variant($btn-default-color, $btn-default-bg, $btn-default-bg-img-start, $btn-default-bg-img-stop, $btn-default-border); + color: $gray-pf; + font-weight: 600; + line-height: 22px; + padding: 2px 14px; + > .i { + font-size: 18px; + vertical-align: top; + margin: 2px 0; + } + } + a:active { + background-image: none; + @include box-shadow(inset 0 3px 5px fade($color-pf-black, 12.5%)); + outline: 0; + } + } + .disabled { + > a, + > a:hover, + > a:focus, + > a:active, + > span { + background: $pagination-bg; + @include box-shadow(none); + color: $pager-disabled-color; + cursor: default; + } + } + .next { + > a, + > span { + > .i { + margin-left: 5px; + } + } + } + .previous { + > a, + > span { + > .i { + margin-right: 5px; + } + } + } +} + +.pager-sm { + li { + > a, + > span { + font-weight: 400; + line-height: 16px; + padding: 1px 10px; + > .i { + font-size: 12px; + } + } + } +} diff --git a/src/sass/converted/patternfly/_pagination.scss b/src/sass/converted/patternfly/_pagination.scss new file mode 100644 index 0000000000..51682d9563 --- /dev/null +++ b/src/sass/converted/patternfly/_pagination.scss @@ -0,0 +1,114 @@ +// +// Pagination +// -------------------------------------------------- + +.pagination { + > li { + > a, + > span { + @include button-variant($btn-default-color, $btn-default-bg, $btn-default-bg-img-start, $btn-default-bg-img-stop, $btn-default-border); + cursor: default; + font-weight: 600; + padding: $padding-base-vertical $padding-large-horizontal; + > .i { + font-size: 15px; + vertical-align: top; + margin: 2px 0; + } + } + } + > li > a, + > li > span { + &:active { + @include box-shadow(inset 0 2px 8px rgba($color-pf-black, (20/100))); + } + } + > .active > a, + > .active > span { + &, + &:hover, + &:focus { + background-color: $btn-default-bg; + border-color: $pagination-border; + @include box-shadow(inset 0 2px 8px rgba($color-pf-black, (20/100))); + color: $btn-default-color; + @include gradient-vertical($btn-default-bg-img-start, $btn-default-bg-img-stop); + } + } + > .disabled { + > span, + > span:hover, + > span:focus, + > a, + > a:hover, + > a:focus { + @include box-shadow(none); + cursor: default; + @include gradient-vertical($btn-default-bg-img-start, $btn-default-bg-img-stop); + } + } +} + +.pagination-sm { + @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); + > li { + > a, + > span { + font-weight: 400; + > .i { + font-size: 12px; + margin-top: 2px; + } + } + } +} + +.content-view-pf-pagination { + background-color: $table-bg-accent; + border: 1px solid $table-border-color; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + &.table-view-pf-pagination { + border-top: none; + } + .form-group { + align-items: baseline; + display: flex; + flex-grow: 1; + float: left; //IE9 fallback + @supports (display: flex) { + float: none; + } + margin: 5px; + &:last-child { + justify-content: flex-end; // if pagination controls wrap, pagination buttons stay on the right + float: right; //IE9 fallback + @supports (display: flex) { + float: none; + } + } + .pagination-pf-pagesize.bootstrap-select.btn-group { + display: flex; + margin-right: 5px; + width: auto; + } + } + .pagination-pf-page { + margin-left: 10px; + margin-right: 5px; + padding: 0 2px 2px; + text-align: right; + width: 2.5em; + } + .pagination { + display: flex; + margin: 0 0 0 10px; + a { + float: none; + @supports (display: flex) { + display: block; + } + } + } +} diff --git a/src/sass/converted/patternfly/_panels.scss b/src/sass/converted/patternfly/_panels.scss new file mode 100644 index 0000000000..668b617e3b --- /dev/null +++ b/src/sass/converted/patternfly/_panels.scss @@ -0,0 +1,134 @@ +// +// Panels +// -------------------------------------------------- + +.panel-title { + font-weight: 700; +} + +// +// Collapsable panels (aka, accordion) +// -------------------------------------------------- + +.panel-group { + .panel { + color: $gray-pf; + + .panel { + margin-top: -1px; + } + } + .panel-default { + border-color: $panel-default-border-color; + border-top-color: $panel-default-border-color; + .panel-heading { + @include gradient-vertical($btn-default-bg-img-start, $btn-default-bg-img-stop); + + .panel-collapse .panel-body { + border-top: 1px solid $panel-inner-border; + } + } + } + + .panel-info { + border-color: $panel-info-border; + .panel-heading { + background-color: $panel-group-pf-info-heading-bg; + } + + .panel-default { + border-top-color: $panel-info-border; + } + } + .panel-primary { + border-color: $panel-primary-border; + .panel-heading { + background-color: $panel-group-pf-primary-heading-bg; + } + + .panel-default { + border-top-color: $panel-primary-border; + } + + .panel-info { + border-top-color: $panel-primary-border; + } + } + .panel-success { + border-color: $panel-success-border; + .panel-heading { + background-color: $panel-group-pf-success-heading-bg; + } + + .panel-default { + border-top-color: $panel-success-border; + } + + .panel-info { + border-top-color: $panel-success-border; + } + + .panel-primary { + border-top-color: $panel-success-border; + } + } + .panel-warning { + border-color: $panel-warning-border; + .panel-heading { + background-color: $panel-group-pf-warning-heading-bg; + } + + .panel-default { + border-top-color: $panel-warning-border; + } + + .panel-info { + border-top-color: $panel-warning-border; + } + + .panel-primary { + border-top-color: $panel-warning-border; + } + + .panel-success { + border-top-color: $panel-warning-border; + } + } + .panel-danger { + border-color: $panel-danger-border; + .panel-heading { + background-color: $panel-group-pf-danger-heading-bg; + } + + .panel-default { + border-top-color: $panel-danger-border; + } + + .panel-info { + border-top-color: $panel-danger-border; + } + + .panel-primary { + border-top-color: $panel-danger-border; + } + + .panel-success { + border-top-color: $panel-danger-border; + } + + .panel-warning { + border-top-color: $panel-danger-border; + } + } + .panel-title { + font-weight: 500; + line-height: 1; + > a { + color: $gray-pf; + font-weight: $btn-font-weight; + &:before { + content: "\f107"; + display: inline-block; + font-family: $icon-font-name-fa; + font-size: 13px; + margin-right: 5px; + text-align: center; + vertical-align: 0; + width: 8px; + } + &:focus { + outline: none; + text-decoration: none; + } + &:hover { + text-decoration: none; + } + &.collapsed:before { + content: "\f105"; + } + } + } +} diff --git a/src/sass/converted/patternfly/_popovers.scss b/src/sass/converted/patternfly/_popovers.scss new file mode 100644 index 0000000000..81da07a474 --- /dev/null +++ b/src/sass/converted/patternfly/_popovers.scss @@ -0,0 +1,32 @@ +// +// Popovers +// -------------------------------------------------- + +.popover { + @include box-shadow(0 2px 2px rgba($color-pf-black, (8/100))); + padding: 0; +} + +.popover-content { + color: $gray-pf; + line-height: 18px; + padding: 10px 14px; +} + +.popover-title { + border-bottom: none; + border-radius: 0; + color: $gray-pf; + font-size: ($font-size-base + 1); + font-weight: 700; + min-height: 34px; + .close { + height: 22px; + position: absolute; + right: 8px; + top: 6px; + } + &.closable { + padding-right: 30px; + } +} diff --git a/src/sass/converted/patternfly/_progress-bars.scss b/src/sass/converted/patternfly/_progress-bars.scss new file mode 100644 index 0000000000..c2c2ad7e02 --- /dev/null +++ b/src/sass/converted/patternfly/_progress-bars.scss @@ -0,0 +1,121 @@ +// +// Progress Bar +// -------------------------------------------------- + +@keyframes progress-bar-stripes { + from { background-position: 0 0; } + to { background-position: 40px 0; } +} + +.progress { + @include box-shadow(inset 0 0 1px rgba($color-pf-black, (25/100))); + &.progress-label-left, + &.progress-label-top-right { + overflow: visible; + position: relative; + } + &.progress-label-left { + margin-left: 40px; + } + &.progress-sm { + height: $progress-sm; + margin-bottom: $progress-sm; + } + &.progress-xs { + height: $progress-xs; + margin-bottom: $progress-xs; + } + td > &:first-child:last-child { + margin-bottom: 0; + margin-top: 3px; + } +} + +.progress-bar { + box-shadow: none; + .progress-label-left & span, + .progress-label-right & span, + .progress-label-top-right & span { + color: $text-color; + position: absolute; + text-align: right; + } + .progress-label-left & span { + font-size: $font-size-large; + left: -40px; + top: 0; + width: 35px; + } + .progress-label-right & span, + .progress-label-top-right & span { + font-size: $font-size-small; + overflow: hidden; + right: 0; + text-overflow: ellipsis; + white-space: nowrap; + strong { + font-weight: 600; + } + } + .progress-label-right & span { + max-width: $progress-description-label-width; + top: 0; + } + .progress-label-top-right & span { + max-width: 47%; + top: (-($line-height-computed * 1.5)); // -30px + } + .progress-label-left.progress-sm & span, + .progress-label-top-right.progress-sm & span { + font-size: $font-size-base; + } + .progress-sm & { + line-height: $progress-sm; + } + .progress-xs & { + line-height: $progress-xs; + } +} + +.progress-bar-remaining { + background: transparent; +} + +.progress-container { + position: relative; + &.progress-description-left { + padding-left :($progress-description-label-width + 5); + } + &.progress-label-right { + padding-right :($progress-description-label-width + 5); + } +} + +.progress-description { + margin-bottom: ($line-height-computed / 2); // 10px + max-width: 52%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + .count { + font-size: ($font-size-base * 1.667); // 20px + font-weight: 300; + line-height: 1; + margin-right: 5px; + } + .fa, + .pficon { + font-size: 14px; + margin-right: 3px; + } + .progress-description-left & { + left: 0; + margin-bottom: 0; + max-width: $progress-description-label-width; + position: absolute; + top: 0; + } + .tooltip { + white-space: normal; + } +} diff --git a/src/sass/converted/patternfly/_search.scss b/src/sass/converted/patternfly/_search.scss new file mode 100644 index 0000000000..96c9010cc6 --- /dev/null +++ b/src/sass/converted/patternfly/_search.scss @@ -0,0 +1,64 @@ +// +// Search +// -------------------------------------------------- + +.search-pf { + &.has-button { + border-collapse: separate; + display: table; + .form-group { + display: table-cell; + width: 100%; + .btn { + @include box-shadow(none); + float: left; + margin-left: -1px; + &.btn-lg { + font-size: ($font-size-large + .5); // to make button height consistent across browsers! + } + &.btn-sm { + font-size: ($font-size-small - .3); // to make button height consistent across browsers! + } + } + .form-control { + float: left; + } + } + } + .has-clear { + .clear { + background: rgba($color-pf-white, (0/100)); // to make the whole button clickable in IE9+ + border: 0; + height: ($input-height-base - 1); + line-height: 1; + padding: 0; + position: absolute; + right: 1px; + top: 1px; + width: 28px; + &:focus { + outline: none; + } + } + .form-control { + padding-right: 30px; + &::-ms-clear { + display: none; + } + } + .input-lg + .clear { + height: ($input-height-large - 2); + width: 28px; + } + .input-sm + .clear { + height: ($input-height-small - 2); + width: 28px; + span { + font-size: ($font-size-base - 2); + } + } + .search-pf-input-group { + position: relative; + } + } +} diff --git a/src/sass/converted/patternfly/_sidebar.scss b/src/sass/converted/patternfly/_sidebar.scss new file mode 100644 index 0000000000..d2b32a9149 --- /dev/null +++ b/src/sass/converted/patternfly/_sidebar.scss @@ -0,0 +1,176 @@ +// +// Sidebar +// -------------------------------------------------- + +.sidebar-header { + border-bottom: 1px solid darken($page-header-border-color, 2%); + padding-bottom: (($line-height-computed / 2) + 1); + margin: (($line-height-computed * 2) + 10) 0 $line-height-computed; + .actions { + margin-top: -2px; + } +} + +.sidebar-pf { + .sidebar-header + .list-group { + border-top: 0; + margin-top: (-$grid-gutter-width / 2 / 2); + .list-group-item { + background: transparent; + border-color: darken($page-header-border-color, 2%); + padding-left: 0; + } + .list-group-item-heading { + font-size: $font-size-base; + } + } + .nav-category { + h2 { + color: $dropdown-header-color; + font-size: $font-size-base; + font-weight: 400; + line-height: ($line-height-computed + 1); + margin: 0; + padding: 8px 0; + } + + .nav-category { + margin-top: ($grid-gutter-width / 4); + } + } + .nav-pills > li { + &.active > a { + background: $dropdown-link-active-bg !important; + border-color: $dropdown-link-active-border-color !important; + color: $color-pf-white; + @media (min-width: $grid-float-breakpoint) { + &:after { + content: $fa-var-angle-right; + font-family: $icon-font-name-fa; + display: block; + position: absolute; + right: ($grid-gutter-width / 2 / 2); + top: 1px; + } + } + .fa { + color: $color-pf-white; + } + } + > a { + border-bottom: 1px solid transparent; + border-radius: 0; + border-top: 1px solid transparent; + color: $text-color; + font-size: ($font-size-base + 1); + line-height: ($line-height-computed + 1); + padding: 1px ($grid-gutter-width / 2); + &:hover { + background: $dropdown-link-hover-bg; + border-color: $dropdown-link-hover-border-color; + } + .fa { + color: lighten($gray-pf, 12%); + font-size: ($font-size-base + 3); + margin-right: ($grid-gutter-width / 4); + text-align: center; + vertical-align: middle; + width: ($font-size-base + 3); + } + } + } + .nav-stacked { + margin-left: (-($grid-gutter-width / 2)); + margin-right: (-($grid-gutter-width / 2)); + li + li { + margin-top: 0; + } + } + .panel { + background: transparent; + } + .panel-body { + padding: 6px ($grid-gutter-width / 2); + .nav-pills > li > a { + padding-left: ($grid-gutter-width / 2 + 17); + } + } + .panel-heading { + padding: 9px ($grid-gutter-width / 2); + } + .panel-title { + font-size: $font-size-base; + > a { + &:before { + display: inline-block; + margin-left: 1px; + margin-right: 4px; + width: 9px; + } + &.collapsed:before { + margin-left: 3px; + margin-right: 2px; + } + } + } +} + +@media (min-width: $grid-float-breakpoint-max) { + .sidebar-header-bleed-left { + margin-left: (-($grid-gutter-width / 2)); + > h2 { + margin-left: ($grid-gutter-width / 2); + } + } + .sidebar-header-bleed-right { + margin-right: (-($grid-gutter-width / 2)); + .actions { + margin-right: ($grid-gutter-width / 2); + } + > h2 { + margin-right: ($grid-gutter-width / 2); + } + + .list-group { + margin-right: (-($grid-gutter-width / 2)); + } + } + .sidebar-pf { + .panel-group .panel-default, + .treeview { + border-left: 0; + border-right: 0; + margin-left: (-($grid-gutter-width / 2)); + margin-right: (-($grid-gutter-width / 2)); + } + .treeview { + margin-top: 5px; + .list-group-item { + padding-left: ($grid-gutter-width / 2); + padding-right: ($grid-gutter-width / 2); + &.node-selected:after { + content: $fa-var-angle-right; + font-family: $icon-font-name-fa; + display: block; + position: absolute; + right: ($grid-gutter-width/2 / 2); + top: 1px; + } + } + } + } +} + +@media (min-width: $grid-float-breakpoint) { + .sidebar-pf { + background: $sidebar-pf-bg; + &.sidebar-pf-left { + border-right: 1px solid $sidebar-pf-border-color; + } + &.sidebar-pf-right { + border-left: 1px solid $sidebar-pf-border-color; + } + > .nav-category, + > .nav-stacked { + margin-top: 5px; + } + } +} diff --git a/src/sass/converted/patternfly/_skip-to-content.scss b/src/sass/converted/patternfly/_skip-to-content.scss new file mode 100644 index 0000000000..64904a473d --- /dev/null +++ b/src/sass/converted/patternfly/_skip-to-content.scss @@ -0,0 +1,12 @@ +// +// Skip to content +// -------------------------------------------------- +.skiplink-pf { + position: absolute; + top: $skiplink-pf-top; + left: -300%; /* moves off screen */ + z-index: $zindex-modal; +} +.skiplink-pf:focus { + left: $skiplink-pf-left; +} diff --git a/src/sass/converted/patternfly/_spinner.scss b/src/sass/converted/patternfly/_spinner.scss new file mode 100644 index 0000000000..7c3115f847 --- /dev/null +++ b/src/sass/converted/patternfly/_spinner.scss @@ -0,0 +1,72 @@ +// +// Spinner +// -------------------------------------------------- + +@keyframes rotation { + from {transform: rotate(0deg);} + to {transform: rotate(359deg);} +} + +.spinner { + animation: rotation 600ms infinite linear; + border-bottom: 4px solid rgba($color-pf-black, (25/100)); + border-left: 4px solid rgba($color-pf-black, (25/100)); + border-right: 4px solid rgba($color-pf-black, (25/100)); + border-radius: 100%; + border-top: 4px solid rgba($color-pf-black, (75/100)); + height: ($font-size-base * 2); + margin: 0 auto; + position: relative; + width: ($font-size-base * 2); + &.spinner-inline { + display: inline-block; + margin-right: 3px; + } + &.spinner-lg { + border-width: 5px; + height: ($font-size-base * 2.5); + width: ($font-size-base * 2.5); + } + &.spinner-sm { + border-width: 3px; + height: ($font-size-base * 1.5); + width: ($font-size-base * 1.5); + } + &.spinner-xs { + border-width: 2px; + height: $font-size-base; + width: $font-size-base; + } + &.spinner-inverse { + border-bottom-color: rgba($color-pf-white, (25/100)); + border-left-color: rgba($color-pf-white, (25/100)); + border-right-color: rgba($color-pf-white, (25/100)); + border-top-color: rgba($color-pf-white, (75/100)); + } +} + +.ie9 .spinner { + background: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-spinner}"), "#{$img-path}#{$img-spinner}")) no-repeat; + border: 0; + &.spinner-inverse { + background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-spinner-inverse}"), "#{$img-path}#{$img-spinner-inverse}")); + } + &.spinner-inverse-lg { + background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-spinner-inverse-lg}"), "#{$img-path}#{$img-spinner-inverse-lg}")); + } + &.spinner-inverse-sm { + background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-spinner-inverse-sm}"), "#{$img-path}#{$img-spinner-inverse-sm}")); + } + &.spinner-inverse-xs { + background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-spinner-inverse-xs}"), "#{$img-path}#{$img-spinner-inverse-xs}")); + } + &.spinner-lg { + background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-spinner-lg}"), "#{$img-path}#{$img-spinner-lg}")); + } + &.spinner-sm { + background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-spinner-sm}"), "#{$img-path}#{$img-spinner-sm}")); + } + &.spinner-xs { + background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$img-path}#{$img-spinner-xs}"), "#{$img-path}#{$img-spinner-xs}")); + } +} diff --git a/src/sass/converted/patternfly/_syntax-highlighting.scss b/src/sass/converted/patternfly/_syntax-highlighting.scss new file mode 100644 index 0000000000..6a8639e272 --- /dev/null +++ b/src/sass/converted/patternfly/_syntax-highlighting.scss @@ -0,0 +1,36 @@ +// +// Syntax Highlighting for google-code-prettify +// -------------------------------------------------- + +.prettyprint { + .atn, + .com, + .fun, + .var { + color: $syntax-3; + } + + .atv, + .str { + color: $syntax-1; + } + + .clo, + .dec, + .kwd, + .opn, + .pln, + .pun { + color: $syntax-2; + } + + .lit, + .tag, + .typ { + color: $syntax-4; + } + + ol.linenums { + margin-bottom: 0; + } +} diff --git a/src/sass/converted/patternfly/_table-view.scss b/src/sass/converted/patternfly/_table-view.scss new file mode 100644 index 0000000000..789abea5b3 --- /dev/null +++ b/src/sass/converted/patternfly/_table-view.scss @@ -0,0 +1,188 @@ +// +// Table View +// -------------------------------------------------- + +// Keep dataTable class for legacy apps +table.dataTable { + height: 100%; + margin-bottom: 0; + max-width: none !important; + tbody { + > tr { + > td { + // Styling for inline actions + &.table-view-pf-actions { + padding: 0; + vertical-align: middle; + } + } + &:hover { + // Styling when hovering anywhere else on a row + > td.table-view-pf-actions { + background-color: $table-bg-accent; + border-bottom-color: $table-border-color; + } + } + } + > tr.selected { + color: $color-pf-white; + background-color: $color-pf-blue-400; + > td { + border-bottom-color: $color-pf-blue-500; + &.table-view-pf-actions { + background-color: $table-bg-accent; + border-bottom-color: $table-border-color; + } + } + &:hover { + > td { + background-color: inherit; + border-bottom-color: $color-pf-blue-500; + &.table-view-pf-actions { + background-color: $table-bg-accent; + border-bottom-color: $table-border-color; + } + } + } + } + } + thead { + .sorting, + .sorting_asc, + .sorting_desc, + .sorting_asc_disabled, + .sorting_desc_disabled { + cursor: pointer; + } + .sorting_asc, + .sorting_desc { + color: $link-color !important; + position: relative; + &:after { + content: $fa-var-angle-down; + font-family: $icon-font-name-fa; + font-size: ($font-size-base - 2); + font-weight: normal; + height: ($font-size-base - 3); + left: 7px; + line-height: $font-size-base; + position: relative; + top: 2px; + vertical-align: baseline; + width: $font-size-base; + } + &:before { + background: $link-color; + content: ""; + height: 2px; + position: absolute; + left: 0; + top: 0; + width: 100%; + } + } + .sorting_asc:after { + content: $fa-var-angle-up; + top: -3px; + } + } + th:active { + outline: none; + } +} + +// Empty table +.table-view-pf-empty { + &.blank-slate-pf { + background-color: $table-bg-accent; + border: 1px solid $table-border-color; + border-radius: 0; + margin-top: -1px; + } +} + +// Embedded toolbar +.table-view-pf-toolbar { + &.toolbar-pf { + background-color: $table-bg-accent; + border-bottom: none; + border-left: 1px solid $table-border-color; + border-right: 1px solid $table-border-color; + border-top: 1px solid $table-border-color; + box-shadow: none; + margin-left: 0px; + margin-right: 0px; + .toolbar-pf-results { + border-top: 1px solid $table-border-color; + min-height: 40px; + line-height: 40px; + } + } +} + +// External Toolbar +.table-view-pf-toolbar-external { + &.toolbar-pf { + border-bottom: none; + border-top: none; + box-shadow: none; + .toolbar-pf-results { + border-top: 1px solid $table-border-color; + min-height: 40px; + line-height: 40px; + } + } +} + +.table-view-pf-colvis-menu { + > li { + padding: 5px 10px; + &:hover { + background-color: #def3ff; + } + > input { + margin-top: 0; + margin-right: 10px; + vertical-align: middle; + } + > label { + margin-bottom: 0; + } + } + +} + +// Inline action button and kebab +// Sets button height to 100% of td height in firefox and chrome, but not in IE when wrapping occurs. +// Button height must be set dynamically in IE to be equal to td height. +.table-view-pf-actions { + background-color: $btn-default-bg; // included just in case there are gaps between the edges of the buttons and the table cell + height: 100%; + .btn, + .dropdown-toggle { + border: none; + box-shadow: none; + height: 100%; + width: 100%; + } + .dropdown, + .table-view-pf-btn { + height: 100%; + } + .dropdown-menu.dropdown-menu-right { + right: -5px; + } + &:last-child { + width: 24px; + } +} + +// Selection column +.table-view-pf-select { + width: 33px; +} + +// Results area containing selected row text +.table-view-pf-select-results { + text-align: right; +} diff --git a/src/sass/converted/patternfly/_tables.scss b/src/sass/converted/patternfly/_tables.scss new file mode 100644 index 0000000000..6ff191c3fa --- /dev/null +++ b/src/sass/converted/patternfly/_tables.scss @@ -0,0 +1,90 @@ +// +// Tables +// -------------------------------------------------- + +.table { + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: $table-cell-padding-top $table-cell-padding $table-cell-padding-bottom; + > a:hover { + text-decoration: none; + } + } + > th { + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + } + } + } + > thead { + background-clip: padding-box; + background-color: $color-pf-black-150; + @include gradient-vertical($start-color: $color-pf-black-100, $end-color: $color-pf-black-200, $start-percent: 0%, $end-percent: 100%); + } +} + +.table-bordered { + border: 1px solid $table-border-color; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + border: 1px solid $table-border-color; + } + } + } + > thead > tr { + > th, + > td { + border-bottom-width: 1px; + } + } +} + +.table-striped { + > tbody > tr { + &:nth-of-type(even) { + background-color: $table-bg-accent; + } + &:nth-of-type(odd) { + background-color: transparent; + } + } +} + +.table-hover { + > tbody > tr:hover { + > td, + > th { + background-color: $table-bg-hover; + border-bottom-color: $table-border-hover; + } + } +} + +.table-treegrid { + span.indent { + margin-left: 10px; + margin-right: 10px; + } + span.icon { + display: inline-block; + font-size: 13px; + margin-right: 5px; + min-width: 10px; + text-align: center; + } + span.expand-icon, span.collapse-icon { + cursor: pointer; + } + > tbody > tr.odd { + background-color: $table-bg-accent; + } +} diff --git a/src/sass/converted/patternfly/_tabs.scss b/src/sass/converted/patternfly/_tabs.scss new file mode 100644 index 0000000000..c4b8f9ecf6 --- /dev/null +++ b/src/sass/converted/patternfly/_tabs.scss @@ -0,0 +1,118 @@ +// +// Tabs +// -------------------------------------------------- + +.nav-tabs { + font-size: $font-size-large; + > li { + > a { + color: $nav-tabs-color; + margin-right: -1px; + padding-bottom: 5px; + padding-top: 5px; + &:active, + &:focus, + &:hover { + background: transparent; + border-color: $nav-tabs-border-color; + color: $gray-darker; + } + } + > .dropdown-menu { + border-top: 0; + border-color: $nav-tabs-border-color; + &.pull-right { + right: -1px; + } + } + } + + .nav-tabs-pf { + font-size: $font-size-base; + > li:first-child > a { + padding-left: 15px; + &:before { + left: 15px !important; + } + } + } + .open > a { + &, + &:hover, + &:focus { + background-color: transparent; + border-color: $nav-tabs-border-color; + } + } +} + +.nav-tabs-pf { + &.nav-justified { + @media (min-width: $grid-float-breakpoint) { + border-bottom: 1px solid $nav-tabs-justified-link-border-color; + } + > li { + &:first-child > a { + padding-left: 15px; + } + > a { + border-bottom: 0; + &:before { + left: 0 !important; + right: 0 !important; + } + } + } + } + > li { + margin-bottom: 0; + &.active > a { + @include tab-indicator($background: $nav-tabs-active-link-hover-color); + &, + &:active, + &:focus, + &:hover { + background-color: transparent; + border: 0 !important; + color: $link-color; + &:before { + background: $nav-tabs-active-link-hover-color; + } + } + } + &:first-child { + > a { + padding-left: 0; + &:before { + left: 0 !important; + } + } + } + > a { + border: 0; + line-height: 1; + margin-right: 0; + padding-bottom: 10px; + padding-top: 10px; + &:active, + &:focus, + &:hover { + @include tab-indicator() + } + } + > .dropdown-menu { + left: 15px; + margin-top: 1px; + &.pull-right { + left: auto; + right: 15px; + } + } + } + .open > a { + &, + &:hover, + &:focus { + background-color: transparent; + } + } +} diff --git a/src/sass/converted/patternfly/_time-picker.scss b/src/sass/converted/patternfly/_time-picker.scss new file mode 100644 index 0000000000..be6621d2e4 --- /dev/null +++ b/src/sass/converted/patternfly/_time-picker.scss @@ -0,0 +1,81 @@ +// +// Time Picker +// -------------------------------------------------- +.bootstrap-datetimepicker-widget { + a[data-action] { + border: 0; + box-shadow: none; + color: $gray-dark; + display: block; + padding-bottom: 4px; + padding-top: 4px; + &:hover { color: $link-color; } + } + &.dropdown-menu { + left: 0!important; + padding: 0; + width: unquote("calc(100% - 25px)"); + &:before, &:after { + content: none; + } + &.top { + margin-bottom: -1px; + } + &.bottom { + margin-top: -1px; + } + } + .timepicker-hour { + width: 100%; + &:after { + content: ":"; + float: right; + } + } +} +.timepicker-hours, +.timepicker-minutes { + table td { + font-weight: bold; + line-height: 30px; + height: 30px; + &:hover { color: $link-color; } + } + .table-condensed > tbody > tr > td { padding: 0; } +} +.time-picker-pf { + .input-group-addon { + .fa, + .pficon { width: 12px; } + &:not(.active) { box-shadow: none; } + } +} +.timepicker-picker { + table td { + span, + a span { + height: 24px; + line-height: 24px; + margin: 0; + width: 100%; + } + } + .table-condensed > tbody > tr > td { + height: 25px; + line-height: 18px; + padding: 0; + } + button[data-action] { // provisional until the button is removed + padding-bottom: 0; + padding-top: 0; + } + .separator { display: none; } + tr:nth-child(2) td { + background-color: $dropdown-link-hover-bg; + border-color: $dropdown-link-hover-border-color; + border-style: solid; + border-width: 1px; + border-left: 0; + border-right: 0; + } +} diff --git a/src/sass/converted/patternfly/_toast.scss b/src/sass/converted/patternfly/_toast.scss new file mode 100644 index 0000000000..35ef5dd3c9 --- /dev/null +++ b/src/sass/converted/patternfly/_toast.scss @@ -0,0 +1,75 @@ +// +// Toast notifications +// -------------------------------------------------- + +.toast-pf { + background-color: $color-pf-white; + border-color: $color-pf-black-400; + box-shadow: 0 2px 6px rgba($color-pf-black, (20/100)); + padding-left: 68px; //15px space between the icon and the text + margin-bottom: 5px; + &.alert-danger > .pficon { background-color: $alert-danger-border; } + &.alert-info > .pficon { background-color: $alert-info-border; } + &.alert-success > .pficon { background-color: $alert-success-border; } + &.alert-warning > .pficon { background-color: $alert-warning-border; } + .dropdown-kebab-pf { margin-left: 10px; } + > .pficon { + background-color: $gray-pf; + bottom: -1px; + box-shadow: 2px 0 5px -2px rgba($color-pf-black, (20/100)); + left: -1px; + padding-top: 10px; + text-align: center; + top: -1px; + width: 53px; + &:before { color: rgba($color-pf-white, (74/100)); } + } + .toast-pf-action { + margin-left: 15px; + } + .dropdown-kebab-pf .btn-link { + padding-top: 0; + padding-bottom: 0; + vertical-align: text-bottom; + } + /* Medium devices (desktops, 992px and up) */ + @media (min-width: $screen-md-min) { + display: inline-block; + } +} +// Sets max width on toast notifications +.toast-pf-max-width { + @media (min-width: $screen-md-min) { + max-width: 31.1%; // sets the size to 4 cols; + } +} +// To position the notification on the top right corner, used in context on cards layout +.toast-pf-top-right { + left: ($grid-gutter-width / 2); + position: absolute; + right: ($grid-gutter-width / 2); + top: 12px; + z-index: 1055; // More than $zindex-modal + /* Medium devices (desktops, 992px and up) */ + @media (min-width: $screen-md-min) { + left: auto; + } +} + +.toast-notifications-list-pf { + margin-left: ($grid-gutter-width / 2); + position: fixed; + right: ($grid-gutter-width / 2); + top: $toast-notification-top; + z-index: 1055; + .toast-pf { + clear: both; + float: right; + } + @media (min-width: $screen-sm-min) { + max-width: calc(50%); + } + @media (min-width: $screen-md-min) { + max-width: calc(33.1% ); // sets the size to 4 cols; + } +} diff --git a/src/sass/converted/patternfly/_toolbar.scss b/src/sass/converted/patternfly/_toolbar.scss new file mode 100644 index 0000000000..10c47b2eec --- /dev/null +++ b/src/sass/converted/patternfly/_toolbar.scss @@ -0,0 +1,191 @@ +// +// Toolbar (Filter and view options) +// -------------------------------------------------- + +.toolbar-pf { + background: $color-pf-white; + border-bottom: 1px solid $sidebar-pf-border-color; + box-shadow: 0 1px 0px fade($color-pf-black, 4.5%); + padding-top: ($grid-gutter-width/4); + .form-group { + margin-bottom: ($grid-gutter-width/4); + @media (min-width: $grid-float-breakpoint) { + border-right: 1px solid $sidebar-pf-border-color; + float: left; + margin-bottom: 0; + padding-left: ($grid-gutter-width/2); + padding-right: ($grid-gutter-width/2); + } + &:last-child { + border-right: 0; + margin-bottom: 0; + padding-right: 0; + } + .btn, + .btn-group { + + .btn, + + .btn-group { margin-left: 5px; } + + .btn-link, + + .dropdown { margin-left: 10px; } + } + .btn-link { + color: $gray-darker; + font-size: ($font-size-base + 4); + line-height: 1; + padding: 4px 0; + &:active, + &:focus, + &:hover { color: $link-color; } + } + .dropdown-kebab-pf .btn-link { + padding: 4px ($grid-gutter-width/4); + margin-left: ($grid-gutter-width/(-4)); + margin-right: ($grid-gutter-width/(-4)); + } + } +} +.toolbar-pf-actions { + display: table; + margin-bottom: 10px; + width: 100%; + @media (min-width: $grid-float-breakpoint) { + .toolbar-pf-filter { + padding-left: 0; + width: 25%; + } + } +} +.toolbar-pf-view-selector { + font-size: ($font-size-base + 4); + .btn-link.active { + color: $link-color; + cursor: default; + } +} +.toolbar-pf-action-right { + float: right; + @media (max-width: $grid-float-breakpoint) { + float: none; + } +} +.toolbar-pf-find { + font-size: ($font-size-base + 2); + position: relative; +} +.find-pf-dropdown-container { + background: $color-pf-white; + border: solid 1px $color-pf-black-400; + display: none; + right: -20px; + padding: 5px; + position: absolute; + top: 35px; + width: 300px; + z-index: 10000; + @media (max-width: $grid-float-breakpoint) { + left: 30px; + top: -5px; + width: calc(100% - 30px); + } + &:before, + &:after { + content: ""; + position: absolute; + } + &:before { + border-bottom:11px solid $color-pf-black-400; + border-left:11px solid transparent; + border-right:11px solid transparent; + right: 35px; + .toolbar-pf-find:last-child & { + right: 15px; + } + top: -12px; + @media (max-width: $grid-float-breakpoint) { + border-bottom:11px solid transparent; + border-right:11px solid $color-pf-black-400; + border-top:11px solid transparent; + left: -22px; + right: initial; + top: 8px; + } + } + &:after { + border-bottom:10px solid $color-pf-white; + border-left:10px solid transparent; + border-right:10px solid transparent; + right: 36px; + .toolbar-pf-find:last-child & { + right: 16px; + } + top: -10px; + @media (max-width: $grid-float-breakpoint) { + border-bottom:10px solid transparent; + border-right:10px solid $color-pf-white; + border-top:10px solid transparent; + left: -20px; + right: initial; + top: 9px; + } + } + input { + height: 30px; + padding: 5px 117px 5px 5px; // 112px (components) + 5px (offset) + width: 100%; + } + .find-pf-buttons { + position: absolute; + right: 10px; + top: 5px; + .btn { + border: none; + cursor: pointer; + margin-left: 0 !important; + padding: 0; + width: 18px; + .fa-angle-up, + .fa-angle-down { + font-weight: bold; + font-size: ($font-size-base + 6); + } + .pficon-close { font-size: ($font-size-base + 2); } + } + span { + height: 30px; + line-height: 30px; + vertical-align: middle; + } + .find-pf-nums { + color: $color-pf-black-500; + margin-right: 3px; + } + } +} + +.toolbar-pf-results { + border-top: 1px solid $sidebar-pf-border-color; + margin-top: ($grid-gutter-width/4); + h5, + p, + ul { + display: inline-block; + line-height: ($grid-gutter-width/1.5); + margin-bottom: 0; + margin-top: 0; + @media (min-width: $screen-sm-min) { + line-height: $grid-gutter-width; + } + } + h5 { + font-weight: 700; + margin-right: 20px; + } + .label { + font-size: ($font-size-base - 1); + a { + color: $color-pf-white; + display: inline-block; + margin-left: 5px; + } + } +} diff --git a/src/sass/converted/patternfly/_tooltip.scss b/src/sass/converted/patternfly/_tooltip.scss new file mode 100644 index 0000000000..4d1a4c7aaf --- /dev/null +++ b/src/sass/converted/patternfly/_tooltip.scss @@ -0,0 +1,15 @@ +// +// Tooltips +// -------------------------------------------------- + +// Base class +.tooltip { + font-size: $tooltip-font-size; + line-height: 1.4; +} + +// Wrapper for the tooltip content +.tooltip-inner { + padding: 7px 12px; + text-align: left; +} diff --git a/src/sass/converted/patternfly/_type.scss b/src/sass/converted/patternfly/_type.scss new file mode 100644 index 0000000000..2b81040696 --- /dev/null +++ b/src/sass/converted/patternfly/_type.scss @@ -0,0 +1,29 @@ +// +// Typography +// -------------------------------------------------- + +h1, +.h1, +h2, +.h2 { + font-weight: 300; +} + +.page-header .actions { + margin-top: 8px; + a > .pficon { + margin-right: 4px; + } +} + +@media (min-width: $grid-float-breakpoint-max) { + .page-header-bleed-left { + margin-left: (-($grid-gutter-width / 2)); + } + .page-header-bleed-right { + margin-right: ((-$grid-gutter-width / 2)); + .actions { + margin-right: ($grid-gutter-width / 2); + } + } +} diff --git a/src/sass/converted/patternfly/_variables.scss b/src/sass/converted/patternfly/_variables.scss new file mode 100644 index 0000000000..8ecd994df6 --- /dev/null +++ b/src/sass/converted/patternfly/_variables.scss @@ -0,0 +1,518 @@ +// +// Variables +// -------------------------------------------------- +// Bootstrap overrides and PatternFly-specific variables + +// Sass compass/sprockets asset helper flag +// ---------------------- +$pf-sass-asset-helper: false !default; + +// PatternFly-specific +// ------------------- +@import 'color-variables'; + +$applauncher-pf-dropdown-menu-border-width: 1px !default; +$applauncher-pf-dropdown-menu-padding: 9px !default; +$applauncher-pf-dropdown-menu-width: 220px !default; +$applauncher-pf-dropdown-toggle-padding: 7px 10px !default; +$applauncher-pf-icon-padding-right: 4px !default; +$applauncher-pf-menu-link-border-color: $color-pf-white !default; +$applauncher-pf-menu-link-border-color-hover: $color-pf-black-400 !default; +$applauncher-pf-menu-link-border-width: 1px !default; +$applauncher-pf-menu-link-color: $color-pf-black-300 !default; +$applauncher-pf-menu-link-color-disabled: $color-pf-black-500 !default; +$applauncher-pf-menu-link-color-hover: $color-pf-blue-400 !default; +$applauncher-pf-menu-link-padding: 7px 10px !default; +$applauncher-pf-menu-link-padding-block-list: 15px 10px !default; +$applauncher-pf-menu-link-background-color-hover: $color-pf-black-150 !default; +$applauncher-pf-menu-link-shadow: $color-pf-black-300 !default; +$applauncher-pf-menu-link-icon-font-size: 2em !default; +$applauncher-pf-menu-link-icon-width: ((9 * $applauncher-pf-menu-link-icon-font-size) / 14) !default; //Numbers to imitate fa-fw class +$bootstrap-switch-handle-default-bg-color: $color-pf-black-100 !default; +$bootstrap-treeview-highlight-color: $color-pf-blue-300 !default; +$btn-default-bg-img-start: $color-pf-black-100 !default; +$btn-default-bg-img-stop: $color-pf-black-200 !default; +$btn-xs-font-weight: 400 !default; +$card-pf-accented-border-top-color: $color-pf-blue-300 !default; +$card-pf-aggregate-status-title-icon-color: $color-pf-black-900 !default; +$card-pf-bg-color: $color-pf-white !default; +$card-pf-border-color: $color-pf-black-300 !default; +$card-pf-border-top-color: transparent !default; +$card-pf-container-bg-color: $color-pf-black-150 !default; +$card-pf-footer-bg-color: $color-pf-black-100 !default; +$card-pf-selected-border-color: $color-pf-blue-300 !default; +$donut-font-size-big: 30px !default; +$drawer-pf-top-vertical: 58px !default; +$drawer-pf-top-horizontal: 26px !default; +$dropdown-divider-margin: 4px 1px !default; +$dropdown-link-active-border-color: $color-pf-blue !default; +$dropdown-link-hover-border-color: $color-pf-blue-100 !default; +$dropdown-link-focus-color: $color-pf-white !default; +$flyout-transition-pf: all 200ms cubic-bezier(.35, 0, .25, 1) !default; +$font-family-monospace: Menlo, Monaco, Consolas, monospace !default; +$font-path: if($pf-sass-asset-helper, "", "../fonts/") !default; +$footer-pf-bg-color: $color-pf-black !default; +$footer-pf-padding-left: 25px !default; +$footer-pf-padding-top: 10px !default; +$footer-pf-height: 37px !default; +$gray-light-pf: $color-pf-black-400 !default; +$gray-pf: $color-pf-black-700 !default; +$icon-font-name-fa: "FontAwesome" !default; +$icon-font-name-pf: "PatternFlyIcons-webfont" !default; +$icon-prefix: pficon !default; +$img-bg-login: "bg-login.jpg" !default; +$img-path: if($pf-sass-asset-helper, "", "../img/") !default; +$img-spinner: "spinner.gif" !default; +$img-spinner-inverse: "spinner-inverse.gif" !default; +$img-spinner-inverse-lg: "spinner-inverse-lg.gif" !default; +$img-spinner-inverse-sm: "spinner-inverse-sm.gif" !default; +$img-spinner-inverse-xs: "spinner-inverse-xs.gif" !default; +$img-spinner-lg: "spinner-lg.gif" !default; +$img-spinner-sm: "spinner-sm.gif" !default; +$img-spinner-xs: "spinner-xs.gif" !default; +$input-border-hover: $color-pf-blue-200 !default; +$input-border-focus: $color-pf-blue-400 !default; +$list-pf-border-color: $color-pf-black-200 !default; +$list-pf-active-border-color: $color-pf-black-400 !default; +$list-pf-header-background-color: $color-pf-black-200 !default; +$list-pf-hover-background-color: $color-pf-blue-25 !default; +$list-pf-main-content-width: 70% !default; // sets the proportional width of the main content vs the additional content +$list-pf-padding: 20px !default; +$list-view-accented-border: $color-pf-blue-300 !default; +$list-view-active-bg: $color-pf-blue-50 !default; +$list-view-active-border: $color-pf-black-400 !default; +$list-view-divider: $color-pf-black-300 !default; +$list-view-hover-bg: $color-pf-blue-25 !default; +$list-group-top-border: $color-pf-black-200 !default; +$login-bg-color: $color-pf-black !default; +$login-container-bg-color-rgba: fade($color-pf-white, 5.5%) !default; +$modal-about-pf-bg-img: "bg-modal-about-pf.png" !default; +$modal-title-padding-horizontal: 18px !default; +$modal-title-padding-vertical: 10px !default; +$navbar-pf-active-color: $color-pf-black-150 !default; +$navbar-pf-alt-active-color: $color-pf-white !default; +$navbar-pf-alt-bg-color: $color-pf-black !default; +$navbar-pf-alt-bg-img: "bg-navbar-pf-alt.svg" !default; +$navbar-pf-bg-color: $color-pf-black !default; +$navbar-pf-border-color: $color-pf-blue-300 !default; +$navbar-pf-color: $color-pf-black-300 !default; +$navbar-pf-height: 60px !default; +$navbar-pf-icon-bar-bg-color: $color-pf-white !default; +$navbar-pf-navbar-navbar-brand-min-width: 270px !default; +$navbar-pf-navbar-navbar-brand-padding: 8px 0 7px !default; +$navbar-pf-navbar-navbar-persistent-bg-color: $color-pf-black-150 !default; +$navbar-pf-navbar-navbar-persistent-border-color: $color-pf-black-300 !default; +$navbar-pf-vertical-active-color: $color-pf-white !default; +$navbar-pf-vertical-bg-color: #1d1d1d !default; +$navbar-pf-vertical-bg-repeat: no-repeat !default; +$navbar-pf-vertical-bg-size: auto 100% !default; +$navbar-pf-vertical-border-color: $color-pf-blue-300 !default; +$navbar-pf-vertical-border-style: solid !default; +$navbar-pf-vertical-border-width: 2px !default; +$navbar-pf-vertical-color: $color-pf-black-300 !default; +$navbar-pf-vertical-height: 60px !default; +$navbar-pf-vertical-icon-bar-bg-color: $color-pf-white !default; +$navbar-pf-vertical-navbar-brand-color: $color-pf-white !default; +$navbar-pf-vertical-navbar-brand-icon-margin: 0 15px 0 0 !default; +$navbar-pf-vertical-navbar-brand-margin: 0 0 0 25px !default; +$navbar-pf-vertical-navbar-brand-min-height: 35px !default; +$navbar-pf-vertical-navbar-brand-name-breakpoint: 480px !default; +$navbar-pf-vertical-navbar-brand-name-margin: 0 15px 0 0 !default; +$navbar-pf-vertical-navbar-brand-padding: 11px 0 12px !default; +$navbar-pf-vertical-navbar-toggle-margin: 13px 15px !default; +$navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg: $color-pf-white !default; +$navbar-pf-vertical-nav-item-iconic-padding: 21px 12px !default; +$nav-pf-container-transition-period: 250ms !default; +$nav-pf-menu-transition-period: 100ms !default; +$nav-pf-vertical-active-color: $color-pf-white !default; +$nav-pf-vertical-active-before-color: $color-pf-blue-300 !default; +$nav-pf-vertical-active-bg-color: $color-pf-black-800 !default; +$nav-pf-vertical-active-border-color: $color-pf-black-900 !default; +$nav-pf-vertical-active-font-weight: 600 !default; +$nav-pf-vertical-active-icon-color: $color-pf-blue-300 !default; +$nav-pf-vertical-badge-color: $color-pf-white !default; +$nav-pf-vertical-badge-bg-color: $color-pf-black-900 !default; +$nav-pf-vertical-bg-color: $color-pf-black-900 !default; +$nav-pf-vertical-border-color: $color-pf-black-900 !default; +$nav-pf-vertical-collapsed-width: 75px !default; +$nav-pf-vertical-color: $color-pf-black-300 !default; +$nav-pf-vertical-font-weight: 400 !default; +$nav-pf-vertical-icon-color: $color-pf-black-600 !default; +$nav-pf-vertical-icon-width: 24px !default; +$nav-pf-vertical-item-border-color: $color-pf-black !default; +$nav-pf-vertical-link-height: 63px !default; +$nav-pf-vertical-link-padding: 17px 20px 17px 25px !default; +$nav-pf-vertical-secondary-active-color: $color-pf-white !default; +$nav-pf-vertical-secondary-active-bg-color: $color-pf-black-700 !default; +$nav-pf-vertical-secondary-active-icon-color: $color-pf-blue-300 !default; +$nav-pf-vertical-secondary-badge-color: $color-pf-white !default; +$nav-pf-vertical-secondary-badge-bg-color: $color-pf-black-900 !default; +$nav-pf-vertical-secondary-border-color: $color-pf-blue-300 !default; +$nav-pf-vertical-secondary-color: $color-pf-white !default; +$nav-pf-vertical-secondary-header-margin: 18px 20px 10px 20px !default; +$nav-pf-vertical-secondary-indicator-color: $color-pf-black-600 !default; +$nav-pf-vertical-secondary-indicator-padding: 14px 0 !default; +$nav-pf-vertical-secondary-item-color: $color-pf-black-300 !default; +$nav-pf-vertical-secondary-item-padding: 0 0 5px 0 !default; +$nav-pf-vertical-secondary-link-height: 63px !default; +$nav-pf-vertical-secondary-link-padding: 4px 0 2px 0 !default; +$nav-pf-vertical-secondary-list-header-margin: 30px 20px 10px 20px !default; +$nav-pf-vertical-tertiary-active-color: $color-pf-white !default; +$nav-pf-vertical-tertiary-active-bg-color: $color-pf-black-800 !default; +$nav-pf-vertical-tertiary-indicator-padding: 0 !default; +$nav-pf-vertical-tertiary-bg-color: $color-pf-black-700 !default; +$nav-pf-vertical-tertiary-color: #fff !default; +$nav-pf-vertical-tertiary-header-margin: 18px 20px 10px 20px !default; +$nav-pf-vertical-tertiary-list-header-margin: 30px 20px 10px 20px !default; +$nav-pf-vertical-tertiary-item-padding: 0 0 5px 0 !default; +$nav-pf-vertical-tertiary-item-color: $color-pf-black-300 !default; +$nav-pf-vertical-tertiary-link-margin: 0 20px 0 20px !default; +$nav-pf-vertical-tertiary-link-padding: 4px 0 2px 0 !default; +$nav-pf-vertical-tertiary-badge-color: $color-pf-white !default; +$nav-pf-vertical-tertiary-badge-bg-color: $color-pf-black-900 !default; +$nav-pf-vertical-width: 200px !default; +$toast-notification-top: 80px !default; +$pagination-padding-small-vertical: 0 !default; +$panel-default-border-color: $color-pf-black-400 !default; +$pficon-var-add-circle-o: "\e61b" !default; +$pficon-var-applications: "\e936" !default; +$pficon-var-arrow: "\e929" !default; +$pficon-var-asleep: "\e925" !default; +$pficon-var-automation: "\e937" !default; +$pficon-var-blueprint: "\e915" !default; +$pficon-var-build: "\e902" !default; +$pficon-var-builder-image: "\e800" !default; +$pficon-var-bundle: "\e918" !default; +$pficon-var-chat: "\e928" !default; +$pficon-var-close: "\e60b" !default; +$pficon-var-cloud-security: "\e903" !default; +$pficon-var-cloud-tenant: "\e904" !default; +$pficon-var-cluster: "\e620" !default; +$pficon-var-connected: "\e938" !default; +$pficon-var-container-node: "\e621" !default; +$pficon-var-cpu: "\e927" !default; +$pficon-var-degraded: "\e91b" !default; +$pficon-var-delete: "\e611" !default; +$pficon-var-disconnected: "\e93c" !default; +$pficon-var-domain: "\e919" !default; +$pficon-var-edit: "\e60a" !default; +$pficon-var-enterprise: "\e906" !default; +$pficon-var-equalizer: "\e610" !default; +$pficon-var-error-circle-o: "\e926" !default; +$pficon-var-export: "\e616" !default; +$pficon-var-flag: "\e603" !default; +$pficon-var-flavor: "\e907" !default; +$pficon-var-filter: "\e943" !default; +$pficon-var-folder-close: "\e607" !default; +$pficon-var-folder-open: "\e606" !default; +$pficon-var-help: "\e605" !default; +$pficon-var-history: "\e617" !default; +$pficon-var-home: "\e618" !default; +$pficon-var-image: "\e61f" !default; +$pficon-var-import: "\e615" !default; +$pficon-var-info: "\e92b" !default; +$pficon-var-infrastructure: "\e93d" !default; +$pficon-var-integration: "\e948" !default; +$pficon-var-in-progress: "\e92c" !default; +$pficon-var-key: "\e924" !default; +$pficon-var-kubernetes: "\e627" !default; +$pficon-var-locked: "\e923" !default; +$pficon-var-maintenance: "\e92d" !default; +$pficon-var-memory: "\e908" !default; +$pficon-var-messages: "\e603" !default; +$pficon-var-middleware: "\e917" !default; +$pficon-var-migration: "\e92e" !default; +$pficon-var-monitoring: "\e944" !default; +$pficon-var-network: "\e909" !default; +$pficon-var-off: "\e92f" !default; +$pficon-var-ok: "\e602" !default; +$pficon-var-on: "\e931" !default; +$pficon-var-on-running: "\e930" !default; +$pficon-var-openshift: "\e626" !default; +$pficon-var-optimize: "\e93e" !default; +$pficon-var-orders: "\e93f" !default; +$pficon-var-paused: "\e932" !default; +$pficon-var-pending: "\e933" !default; +$pficon-var-plugged: "\e940" !default; +$pficon-var-port: "\e945" !default; +$pficon-var-private: "\e914" !default; +$pficon-var-print: "\e612" !default; +$pficon-var-process-automation: "\e949" !default; +$pficon-var-project: "\e905" !default; +$pficon-var-rebalance: "\e91c" !default; +$pficon-var-rebooting: "\e934" !default; +$pficon-var-regions: "\e90a" !default; +$pficon-var-registry: "\e623" !default; +$pficon-var-remove: "\e611" !default; +$pficon-var-replicator: "\e624" !default; +$pficon-var-repository: "\e90b" !default; +$pficon-var-resource-pool: "\e90c" !default; +$pficon-var-resources-almost-empty: "\e91d" !default; +$pficon-var-resources-almost-full: "\e912" !default; +$pficon-var-resources-full: "\e92a" !default; +$pficon-var-restart: "\e617" !default; +$pficon-var-route: "\e625" !default; +$pficon-var-running: "\e614" !default; +$pficon-var-save: "\e601" !default; +$pficon-var-screen: "\e600" !default; +$pficon-var-search: "\e921" !default; +$pficon-var-security: "\e946" !default; +$pficon-var-server: "\e90d" !default; +$pficon-var-server-group: "\e91a" !default; +$pficon-var-service: "\e61e" !default; +$pficon-var-service-catalog: "\e941" !default; +$pficon-var-services: "\e947" !default; +$pficon-var-settings: "\e610" !default; +$pficon-var-spinner: "\e614" !default; +$pficon-var-spinner2: "\e613" !default; +$pficon-var-storage-domain: "\e90e" !default; +$pficon-var-tenant: "\e916" !default; +$pficon-var-thumb-tack-o: "\e920" !default; +$pficon-var-topology: "\e608" !default; +$pficon-var-trend-down: "\e900" !default; +$pficon-var-trend-up: "\e901" !default; +$pficon-var-unlocked: "\e922" !default; +$pficon-var-unplugged: "\e942" !default; +$pficon-var-unknown: "\e935" !default; +$pficon-var-user: "\e91e" !default; +$pficon-var-users: "\e91f" !default; +$pficon-var-virtual-machine: "\e90f" !default; +$pficon-var-volume: "\e910" !default; +$pficon-var-warning-triangle-o: "\e913" !default; +$pficon-var-zone: "\e911" !default; +$progress-description-label-width: 85px !default; +$sidebar-pf-bg: $color-pf-black-100 !default; +$sidebar-pf-border-color: $color-pf-black-300 !default; +$skiplink-pf-top: 12px !default; +$skiplink-pf-left: 10px !default; +$table-border-hover: $color-pf-blue-200 !default; +$table-cell-padding-bottom: 3px !default; +$table-cell-padding-top: 2px !default; +// Reference variables declared in block above +$bootstrap-switch-bg-color-start: $btn-default-bg-img-start !default; +$bootstrap-switch-bg-color-stop: $btn-default-bg-img-stop !default; +$fa-font-path: $font-path !default; +$navbar-pf-navbar-header-border-color: lighten($navbar-pf-bg-color, 15%) !default; +$navbar-pf-navbar-nav-active-active-bg-color: lighten($navbar-pf-bg-color, 8%) !default; +$navbar-pf-navbar-nav-active-active-open-bg-color: lighten($navbar-pf-bg-color, 11%) !default; +$navbar-pf-navbar-nav-active-bg-color: lighten($navbar-pf-bg-color, 12.5%) !default; +$navbar-pf-navbar-primary-bg-color-start: lighten($navbar-pf-bg-color, 10%) !default; // #474C50 +$navbar-pf-navbar-primary-bg-color-stop: $navbar-pf-bg-color !default; // #383F43 +$navbar-pf-navbar-utility-border-color: lighten($navbar-pf-bg-color, 15.5%) !default; +$navbar-pf-navbar-utility-color: $navbar-pf-color !default; +$navbar-pf-navbar-utility-hover-bg-color: lighten($navbar-pf-bg-color, 12.5%) !default; +$nav-pf-vertical-secondary-bg-color: $nav-pf-vertical-active-bg-color !default; +$nav-tabs-color: $gray-pf !default; +// Reference variables declared in block above +$navbar-pf-navbar-primary-context-bg-color-start: lighten($navbar-pf-navbar-primary-bg-color-start, 8.5%) !default; +$navbar-pf-navbar-primary-context-bg-color-stop: lighten($navbar-pf-navbar-primary-bg-color-stop, 11%) !default; +$navbar-pf-navbar-primary-hover-bg-color-start: lighten($navbar-pf-navbar-primary-bg-color-start, 10%) !default; +$navbar-pf-navbar-primary-hover-bg-color-stop: lighten($navbar-pf-navbar-primary-bg-color-stop, 10%) !default; +$navbar-pf-navbar-primary-hover-border-color: lighten($navbar-pf-navbar-header-border-color, 20%) !default; +$navbar-pf-navbar-primary-context-border-color: lighten($navbar-pf-navbar-header-border-color, 8%) !default; +$navbar-pf-navbar-primary-context-border-top-color: lighten($navbar-pf-navbar-header-border-color, 7%) !default; +$navbar-pf-navbar-utility-hover-border-color: lighten($navbar-pf-navbar-utility-border-color, 5%) !default; +$navbar-pf-navbar-utility-open-bg-color: lighten($navbar-pf-navbar-utility-hover-bg-color, 7.5%) !default; +$navbar-pf-navbar-utility-open-border-color: lighten($navbar-pf-navbar-utility-hover-border-color, 5%) !default; +// Reference variables declared in block above +$navbar-pf-navbar-primary-active-bg-color-start: lighten($navbar-pf-navbar-primary-hover-bg-color-start, 5%) !default; +$navbar-pf-navbar-primary-active-bg-color-stop: lighten($navbar-pf-navbar-primary-hover-bg-color-stop, 7.5%) !default; +$navbar-pf-navbar-primary-active-border-color: lighten($navbar-pf-navbar-primary-hover-border-color, 5%) !default; +$navbar-pf-navbar-primary-context-hover-bg-color-start: lighten($navbar-pf-navbar-primary-context-bg-color-start, 5%) !default; +$navbar-pf-navbar-primary-context-hover-bg-color-stop: lighten($navbar-pf-navbar-primary-context-bg-color-stop, 7.5%) !default; +$navbar-pf-navbar-primary-context-hover-border-color: lighten($navbar-pf-navbar-primary-context-border-color, 5%) !default; +$navbar-pf-navbar-primary-context-hover-border-top-color: lighten($navbar-pf-navbar-primary-context-border-top-color, 6%) !default; +// Reference variables declared in block above +$navbar-pf-navbar-primary-context-active-bg-color-start: lighten($navbar-pf-navbar-primary-context-hover-bg-color-start, 5%) !default; +$navbar-pf-navbar-primary-context-active-bg-color-stop: lighten($navbar-pf-navbar-primary-context-hover-bg-color-stop, 7.5%) !default; +$navbar-pf-navbar-primary-context-active-border-color: lighten($navbar-pf-navbar-primary-context-hover-border-color, 5%) !default; +$navbar-pf-navbar-primary-context-active-border-top-color: lighten($navbar-pf-navbar-primary-context-hover-border-top-color, 6%) !default; +// References variable declared in block above +$navbar-pf-navbar-primary-context-active-border-right-color: $navbar-pf-navbar-primary-context-active-border-color !default; +$slider-line-height: 16px !default; +$slider-horizontal-width: 100% !default; +$slider-primary-top: $color-pf-black-100 !default; +$slider-primary-bottom: $color-pf-black-200 !default; +$slider-secondary-top: $color-pf-blue-400 !default; +$slider-secondary-bottom: $color-pf-blue-300 !default; + +// Alternate navigation layout - Kept for backwards compatibility +// -------------------------------------------------------------- +$footer-pf-alt-bg-color: $footer-pf-bg-color !default; +$footer-pf-alt-padding-left: $footer-pf-padding-left !default; +$footer-pf-alt-padding-top: $footer-pf-padding-top !default; +$footer-pf-alt-height: $footer-pf-height !default; +$img-path-alt: $img-path !default; +$nav-pf-vertical-alt-active-color: $color-pf-blue-300 !default; +$nav-pf-vertical-alt-bg-color: $color-pf-white !default; +$nav-pf-vertical-alt-badge-color: $color-pf-white !default; +$nav-pf-vertical-alt-border-color: $sidebar-pf-border-color !default; +$nav-pf-vertical-alt-collapsed-width: 75px !default; +$nav-pf-vertical-alt-link-height: 63px !default; +$nav-pf-vertical-alt-link-padding: 17px 20px 17px 25px !default; +$nav-pf-vertical-alt-width: 250px !default; +$navbar-pf-alt-bg-repeat: $navbar-pf-vertical-bg-repeat !default; +$navbar-pf-alt-bg-size: $navbar-pf-vertical-bg-size !default; +$navbar-pf-alt-border-color: $navbar-pf-vertical-border-color !default; +$navbar-pf-alt-border-style: $navbar-pf-vertical-border-style !default; +$navbar-pf-alt-border-width: $navbar-pf-vertical-border-width !default; +$navbar-pf-alt-color: $navbar-pf-vertical-color !default; +$navbar-pf-alt-height: $navbar-pf-vertical-height !default; +$navbar-pf-alt-nav-item-iconic-padding: $navbar-pf-vertical-nav-item-iconic-padding !default; +$navbar-pf-alt-navbar-brand-color: $navbar-pf-vertical-navbar-brand-color !default; +$navbar-pf-alt-navbar-brand-icon-margin: $navbar-pf-vertical-navbar-brand-icon-margin !default; +$navbar-pf-alt-navbar-brand-margin: $navbar-pf-vertical-navbar-brand-margin !default; +$navbar-pf-alt-navbar-brand-min-height: $navbar-pf-vertical-navbar-brand-min-height !default; +$navbar-pf-alt-navbar-brand-name-breakpoint: $navbar-pf-vertical-navbar-brand-name-breakpoint !default; +$navbar-pf-alt-navbar-brand-name-margin: $navbar-pf-vertical-navbar-brand-name-margin !default; +$navbar-pf-alt-navbar-brand-padding: $navbar-pf-vertical-navbar-brand-padding !default; +$navbar-pf-alt-navbar-toggle-margin: $navbar-pf-vertical-navbar-toggle-margin !default; +$navbar-pf-alt-navbar-toggle-icon-bar-hover-bg: $navbar-pf-vertical-navbar-toggle-icon-bar-hover-bg !default; + +// Bootstrap overrides +// ------------------- +$alert-info-border: $color-pf-black-500 !default; +$alert-link-font-weight: 500 !default; +$alert-padding: 11px !default; +$body-bg: $color-pf-white !default; +$border-radius-base: 1px !default; +$brand-danger: $color-pf-red !default; +$brand-info: $color-pf-blue-500 !default; +$brand-primary: $color-pf-blue-300 !default; +$brand-success: $color-pf-green !default; +$brand-warning: $color-pf-orange !default; +$breadcrumb-bg: transparent !default; +$breadcrumb-separator: "\f105" !default; +$bs-datetimepicker-timepicker-font-size: 1em !default; +$bs-datetimepicker-btn-hover-bg: transparent !default; +$btn-danger-bg: $color-pf-red-200 !default; +$btn-danger-border: $color-pf-red-300 !default; +$btn-default-border: $color-pf-black-400 !default; +$btn-font-weight: 600 !default; +$btn-primary-bg: $color-pf-blue !default; +$btn-primary-border: $color-pf-blue-500 !default; +$caret-width-base: 0 !default; +$code-bg: $color-pf-blue-50 !default; +$dropdown-border: $color-pf-black-400 !default; +$dropdown-divider-bg: $color-pf-black-200 !default; +$dropdown-link-active-color: $color-pf-white !default; +$dropdown-link-hover-bg: $color-pf-blue-50 !default; +$font-family-base: "Open Sans", Helvetica, Arial, sans-serif !default; +$font-size-base: 12px !default; +$gray-dark: lighten($color-pf-black, 20%) !default; // #333 +$gray-darker: lighten($color-pf-black, 13.5%) !default; // #222 +$gray-light: lighten($color-pf-black, 60%) !default; // #999 +$gray-lighter: lighten($color-pf-black, 93.5%) !default; // #eee +$grid-gutter-width: 40px !default; +$icon-font-path: if($pf-sass-asset-helper, "", "../fonts/") !default; +$input-bg-disabled: $color-pf-black-150 !default; +$input-border: $color-pf-black-400 !default; +$line-height-base: 1.66666667 !default; // 20/12 +$link-color: $color-pf-blue !default; +$list-group-border: $color-pf-black-150 !default; +$list-group-border-radius: 0 !default; +$list-group-hover-bg: $color-pf-blue-50 !default; +$link-hover-color: $color-pf-blue-500 !default; +$nav-tabs-border-color: $color-pf-black-200 !default; +$nav-tabs-link-hover-border-color: transparent !default; +$padding-large-horizontal: 10px !default; +$padding-base-horizontal: 6px !default; +$padding-base-vertical: 2px !default; +$padding-large-vertical: 6px !default; +$pager-border-radius: 0 !default; +$pager-disabled-color: $color-pf-black-500 !default; +$pagination-bg: $color-pf-black-150 !default; +$pagination-border: $color-pf-black-400 !default; +$pagination-hover-bg: $color-pf-black-200 !default; +$panel-inner-border: $color-pf-black-300 !default; +$popover-arrow-color: $color-pf-white !default; +$popover-arrow-outer-color: $color-pf-black-400 !default; +$popover-border-color: $color-pf-black-400 !default; +$popover-max-width: 220px !default; +$popover-title-bg: $color-pf-black-150 !default; +$pre-bg: $color-pf-black-100 !default; +$progress-bg: $color-pf-black-200 !default; +$table-bg-accent: $color-pf-black-150 !default; +$table-bg-hover: $color-pf-blue-50 !default; +$table-border-color: $color-pf-black-300 !default; +$table-cell-padding: 10px !default; +$tooltip-arrow-width: 8px !default; +$tooltip-bg: $color-pf-black-800 !default; +$tooltip-max-width: 220px !default; +// Reference variables declared in block above +$alert-danger-bg: lighten($color-pf-red-100, 55%) !default; +$alert-danger-border: $brand-danger !default; +$alert-danger-text: $gray-dark !default; +$alert-info-bg: $color-pf-black-150 !default; +$alert-info-text: $gray-dark !default; +$alert-success-bg: lighten($color-pf-green-100, 8%) !default; +$alert-success-border: $brand-success !default; +$alert-success-text: $gray-dark !default; +$alert-warning-bg: lighten($color-pf-orange-100, 8%) !default; +$alert-warning-border: $brand-warning !default; +$alert-warning-text: $gray-dark !default; +$badge-border-radius: $border-radius-base !default; +$border-radius-large: $border-radius-base !default; +$border-radius-small: $border-radius-base !default; +$breadcrumb-active-color: $gray-pf !default; +$breadcrumb-color: $gray-pf !default; +$btn-default-bg: $gray-lighter !default; +$btn-default-color: $gray-pf !default; +$caret-width-large: $caret-width-base !default; +$code-color: $color-pf-blue-600 !default; +$dropdown-fallback-border: $dropdown-border !default; +$dropdown-link-active-bg: $link-color !default; +$dropdown-link-hover-color: $gray-pf !default; +$font-size-h1: ceil(($font-size-base * 2)) !default; // ~24px +$font-size-h2: ceil(($font-size-base * 1.8333)) !default; // ~22px +$font-size-h3: ceil(($font-size-base * 1.3333)) !default; // ~16px +$font-size-h5: ceil(($font-size-base * 1.0833)) !default; // ~13px +$font-size-large: ceil(($font-size-base * 1.1666)) !default; // ~14px +$font-size-small: ceil(($font-size-base * .9166)) !default; // ~11px +$input-color: $gray-dark !default; +$nav-tabs-active-link-hover-color: $link-color !default; +$nav-tabs-justified-link-border-color: $nav-tabs-border-color !default; +$nav-pf-vertical-badges-width: ($nav-pf-vertical-width + 50px) !default; +$padding-small-horizontal: $padding-base-horizontal !default; +$padding-small-vertical: $padding-base-vertical !default; +$panel-group-pf-danger-heading-bg: $alert-danger-bg !default; +$panel-group-pf-primary-heading-bg: lighten($brand-primary, 38%) !default; +$panel-group-pf-success-heading-bg: $alert-success-bg !default; +$panel-group-pf-warning-heading-bg: $alert-warning-bg !default; +$panel-group-pf-info-heading-bg: lighten(desaturate(adjust-hue($brand-info, 13), 45), 60%) !default; +$panel-danger-border: $brand-danger !default; +$panel-danger-heading-bg: $brand-danger !default; +$panel-info-border: $brand-info !default; +$panel-info-heading-bg: $brand-info !default; +$panel-primary-border: $brand-primary !default; +$panel-primary-text: $body-bg !default; +$panel-success-border: $brand-success !default; +$panel-success-heading-bg: $brand-success !default; +$panel-warning-border: $brand-warning !default; +$panel-warning-heading-bg: $brand-warning !default; +$state-warning-text: $brand-warning !default; +$state-danger-text: $brand-danger !default; +// Reference variable declared in block above +$panel-danger-text: $panel-primary-text !default; +$panel-info-text: $panel-primary-text !default; +$panel-success-text: $panel-primary-text !default; +$panel-warning-text: $panel-primary-text !default; + +// PatternFly-specific variables based on Bootstrap overides +// --------------------------------------------------------- +$bootstrap-switch-bg-color: $btn-default-bg !default; +$btn-danger-bg-img-start: $brand-danger !default; +$btn-danger-bg-img-stop: $btn-danger-bg !default; +$btn-primary-bg-img-start: $brand-primary !default; +$btn-primary-bg-img-stop: $btn-primary-bg !default; +$dropdown-link-focus-bg: $link-color !default; +$line-height-computed: floor(($font-size-base * $line-height-base)) !default; +$nav-pf-vertical-icon-size: ($font-size-base + 8) !default; +$notification-badge-color: $color-pf-blue-400 !default; +$progress-sm: ($line-height-computed - 6) !default; +$progress-xs: ($line-height-computed - 14) !default; +$syntax-1: $btn-danger-bg !default; +$syntax-2: $gray-dark !default; +$syntax-3: $brand-success !default; +$syntax-4: $brand-info !default; +$tooltip-font-size: $font-size-base !default; diff --git a/src/sass/converted/patternfly/_vertical-nav.scss b/src/sass/converted/patternfly/_vertical-nav.scss new file mode 100644 index 0000000000..b5d8d7e110 --- /dev/null +++ b/src/sass/converted/patternfly/_vertical-nav.scss @@ -0,0 +1,950 @@ +// +// Vertical navigation +// -------------------------------------------------- +// +// Basic Required Layout for Vertical Navigation +// +// .navbar navbar-pf-vertical +// .navbar-header +// .collapse navbar-collapse <-- necessary for collapsing vertical nav and mobile +// .nav-pf-vertical [.nav-pf-vertical-callapsible-menus] [.nav-pf-persistent-secondary] [.hidden-icons-pf] +// .list-group +// .list-group-item [.active] [.secondary-nav-item-pf] +// a +// [primary icon] <-- Not shown if .hidden-icons-pf above +// .list-group-item-value +// .nav-pf-secondary-nav <-- if .secondary-nav-item-pf above +// .nav-item-pf-header +// .secondary-collapse-toggle-pf data-toggle="collapse-secondary-nav" +// .list-group +// .list-group-item [.active] [tertiary-nav-item-pf] +// a +// .list-group-item-value +// .nav-pf-tertiary-nav <-- if .tertiary-nav-item-pf above +// .nav-item-pf-header +// .tertiary-collapse-toggle-pf data-toggle="collapse-tertiary-nav" +// .list-group +// .list-group-item [.active] [tertiary-nav-item-pf] +// a +// .list-group-item-value +// +// .container-pf-nav-pf-vertical [.nav-pf-persistent-secondary] [.hidden-icons-pf] +// + +.nav-pf-vertical { + background: $nav-pf-vertical-bg-color; + border-right: 1px solid $nav-pf-vertical-border-color; + bottom: 0; + left: 0; + overflow-x: hidden; + overflow-y: auto; + position: fixed; + top: $navbar-pf-height; + width: $nav-pf-vertical-width; + z-index: $zindex-navbar-fixed; + .layout-pf-fixed-with-footer & { + bottom: $footer-pf-height; + } + .ie9.layout-pf-fixed & { + box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box + } + &.hidden.show-mobile-nav { // Mobile mode open + box-shadow: 0 0 3px rgba($color-pf-black, (15/100)); + display: block !important; + } + &.hide-nav-pf { // Used to hide navigation initially to avoid startup flicker + visibility: hidden !important; + } + .list-group { + border-top: 0; + margin-bottom: 0; + } + .list-group-item { + background-color: transparent; + border-color: $nav-pf-vertical-item-border-color; + padding: 0; + > a { + background-color: transparent; + color: $nav-pf-vertical-color; + cursor: pointer; + display: block; + font-size: ($font-size-base + 2); + font-weight: $nav-pf-vertical-font-weight; + height: $nav-pf-vertical-link-height; + line-height: 26px; + padding: $nav-pf-vertical-link-padding; + position: relative; + white-space: nowrap; + width: $nav-pf-vertical-width; + // When flexbox is supported nav item names take up all available space + @supports (display: flex) { + display: flex; + padding-right: 0; + } + .fa, + .glyphicon, + .pficon { + color: $nav-pf-vertical-icon-color; + float: left; + font-size: ($font-size-base + 8); + line-height: 26px; + margin-right: 10px; + text-align: center; + width: $nav-pf-vertical-icon-width; + } + &:hover { + text-decoration: none; + } + } + &.active, + &:hover { + > a { + background-color: $nav-pf-vertical-active-bg-color; + color: $nav-pf-vertical-active-color; + font-weight: $nav-pf-vertical-active-font-weight; + .fa, + .glyphicon, + .pficon { + color: $nav-pf-vertical-active-icon-color; + } + } + } + &.active { + > a:before { + background: $nav-pf-vertical-active-before-color; + content: " "; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 3px; + } + &:hover { // to over-ride default list group setting + background-color: transparent; + border-color: $nav-pf-vertical-item-border-color; + } + } + .list-group-item-value { + display: block; + line-height: 25px; + max-width: 120px; + // If flexbox is supported, do not set max-width, take all space with just some right padding + @supports (display: flex) { + flex: 1; + max-width: none; + padding-right: 15px; + } + overflow: hidden; + text-overflow: ellipsis; + } + } + .list-group-item-separator { + border-top-color: $nav-pf-vertical-item-border-color; + border-top-width: 2px; + } + &.nav-pf-vertical-with-badges { + width: $nav-pf-vertical-badges-width; + .list-group-item > a { + width: $nav-pf-vertical-badges-width; + } + } + h5 { + color: $nav-pf-vertical-secondary-color; + cursor: default; + font-size: ($font-size-base + 1); + font-weight: 600; + margin: $nav-pf-vertical-secondary-list-header-margin; + } + &.hidden-icons-pf { + > .list-group > .list-group-item { // only the primary menu hides icons + > a { + .fa, + .glyphicon, + .pficon { + display: none; + } + } + } + &.collapsed { + display: none; + } + } + .badge-container-pf { + position: absolute; + right: 15px; + top: 20px; + // If flexbox is supported, use relative positioning to place to the right of the label + // and adjust the top position so that the secondary and tertiary nav items don't need to change + @supports (display: flex) { + padding-left: 0; + padding-right: 15px; + position: relative; + right: 0; + margin-top: -3px; + top: 5px; + } + .badge { + background: $nav-pf-vertical-badge-bg-color; + color: $nav-pf-vertical-badge-color; + float: left; + font-size: $font-size-base; + font-weight: 700; + line-height: $line-height-base; + margin: 0; + padding: 0 7px; + text-align: center; + .pficon, + .fa { + font-size: ($font-size-base + 2); + height: 20px; + line-height: $line-height-base; + margin-right: 3px; + margin-top: -1px; + } + } + } +} +.nav-pf-vertical-tooltip.tooltip { + margin-left: 15px; + .tooltip-inner { + background-color: $color-pf-white; + color: $color-pf-black-900; + } + .tooltip-arrow { + border-bottom-color: $color-pf-white; + left: calc(50% - 15px) !important; + } +} +.hover-secondary-nav-pf { + width: unquote("calc(#{$nav-pf-vertical-width} * 2)"); + &.nav-pf-vertical-with-badges { + width: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)"); + } +} +.hover-tertiary-nav-pf { + width: unquote("calc(#{$nav-pf-vertical-width} * 3)"); + &.nav-pf-vertical-with-badges { + width: unquote("calc(#{$nav-pf-vertical-badges-width} * 3)"); + } + .nav-pf-secondary-nav { + width: unquote("calc(#{$nav-pf-vertical-width} * 2)"); + .collapsed-tertiary-nav-pf { + width: $nav-pf-vertical-width; + } + } + .nav-pf-tertiary-nav { + left: unquote("calc(#{$nav-pf-vertical-width} * 2)"); + } + &.nav-pf-vertical-with-badges { + .nav-pf-secondary-nav { + width: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)"); + .collapsed-tertiary-nav-pf { + width: $nav-pf-vertical-badges-width; + } + } + .nav-pf-tertiary-nav { + left: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)"); + } + } +} +.nav-pf-vertical.collapsed { + width: $nav-pf-vertical-collapsed-width; + &.collapsed-secondary-nav-pf { // collapsed state with secondary menu pinned + width: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + width: $nav-pf-vertical-badges-width; + } + } + &.collapsed-tertiary-nav-pf { // collapsed state with tertiary menu pinned + width: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + width: $nav-pf-vertical-badges-width; + } + } + &.hover-secondary-nav-pf { + width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width})"); + &.nav-pf-vertical-with-badges { + width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width})"); + } + } + &.hover-tertiary-nav-pf { + width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))"); + &.nav-pf-vertical-with-badges { + width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-badges-width} * 2))"); + } + } +} +.show-mobile-nav { + &.show-mobile-secondary { + width: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + width: $nav-pf-vertical-badges-width; + } + } + &.show-mobile-tertiary { + width: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + width: $nav-pf-vertical-badges-width; + } + } + .mobile-nav-item-pf, + .mobile-secondary-item-pf { + .nav-pf-secondary-nav { + left: 0; + opacity: 1; + visibility: visible; + z-index: ($zindex-navbar-fixed + 4); + } + > .nav-pf-tertiary-nav { + left: 0; + opacity: 1; + visibility: visible; + z-index: ($zindex-navbar-fixed + 8); + } + } + .nav-pf-secondary-nav { + left: 0; + .secondary-nav-item-pf:hover & { + opacity: 0; + visibility: hidden; + } + } + .tertiary-nav-item-pf:hover { + .nav-pf-tertiary-nav { + opacity: 0; + visibility: hidden; + } + } + .tertiary-nav-item-pf.mobile-nav-item-pf:hover { + .nav-pf-tertiary-nav { + opacity: 1; + visibility: visible; + } + } +} +.secondary-nav-item-pf { + > a { + cursor: default; + &:after { + color: $nav-pf-vertical-secondary-indicator-color; + content: $fa-var-angle-right; + display: block; + font-family: "FontAwesome"; + font-size: ($font-size-base * 2); + line-height: 30px; + padding: $nav-pf-vertical-secondary-indicator-padding; + position: absolute; + right: 20px; + top: 0; + } + .list-group-item-value { + // If flex box is supported add some padding to account for the submenu indicator + @supports (display: flex) { + padding-right: 35px; + } + } + } + &.active, + &:hover { + > a { + width: unquote("calc(#{$nav-pf-vertical-width} + 1px)"); + z-index: ($zindex-navbar-fixed + 1); + &:after { + right: 21px; + } + .collapsed-secondary-nav-pf & { + z-index: 0; + } + .collapsed-tertiary-nav-pf & { + z-index: 0; + } + } + } + .nav-pf-vertical-with-badges & { + &.active, + &:hover { + > a { + width: unquote("calc(#{$nav-pf-vertical-badges-width} + 1px)"); + } + } + } +} +.nav-pf-vertical.collapsed-secondary-nav-pf { + width: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + width: $nav-pf-vertical-badges-width; + } + .secondary-nav-item-pf { // Keep sub-menu indicators below collapsed menu + &.active, + &.hover { + > a { + z-index: $zindex-navbar-fixed; + } + } + } + &.hover-tertiary-nav-pf { + width: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + width: $nav-pf-vertical-badges-width; + } + } + .nav-pf-secondary-nav { + left: 0; + } + .nav-pf-tertiary-nav { + left: $nav-pf-vertical-width; + } + &.nav-pf-vertical-with-badges { + .nav-pf-tertiary-nav { + left: $nav-pf-vertical-badges-width; + } + } +} +.nav-pf-vertical.collapsed-tertiary-nav-pf { + width: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + width: $nav-pf-vertical-badges-width; + } + .nav-pf-secondary-nav { + width: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + width: $nav-pf-vertical-badges-width; + } + } + .secondary-nav-item-pf, // Keep sub-menu indicators below collapsed menu + .tertiary-nav-item-pf { + &.active, + &.hover { + > a { + z-index: 0; + } + } + } +} +.nav-pf-vertical.nav-pf-persistent-secondary.secondary-visible-pf { // Persistent secondary nav settings + @media (min-width: $screen-lg-min) { // secondary menu only persistent at lg screen + width: unquote("calc(#{$nav-pf-vertical-width} * 2)"); + &.nav-pf-vertical-with-badges { + width: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)"); + } + &.collapsed-secondary-nav-pf { + width: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + width: $nav-pf-vertical-badges-width; + } + &.hover-tertiary-nav-pf { + width: unquote("calc(#{$nav-pf-vertical-width} * 2)"); + &.nav-pf-vertical-with-badges { + width: unquote("calc(#{$nav-pf-vertical-badges-width} * 2)"); + } + } + } + &.collapsed-tertiary-nav-pf { + width: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + width: $nav-pf-vertical-badges-width; + } + } + &.collapsed { + width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width})"); + &.collapsed-secondary-nav-pf { + width: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + width: $nav-pf-vertical-badges-width; + } + } + &.collapsed-tertiary-nav-pf { + width: $nav-pf-vertical-width; + &.nav-pf-vertical-with-badges { + width: $nav-pf-vertical-badges-width; + } + } + &.hover-tertiary-nav-pf { + width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))"); + &.nav-pf-vertical-with-badges { + width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-badges-width} * 2))"); + } + } + } + &.hover-tertiary-nav-pf { + width: unquote("calc(#{$nav-pf-vertical-width} * 3)"); + &.nav-pf-vertical-with-badges { + width: unquote("calc(#{$nav-pf-vertical-badges-width} * 3)"); + } + } + .secondary-nav-item-pf.active { + .nav-pf-secondary-nav { + visibility: visible; + opacity: 1; + } + } + } +} +.nav-item-pf-header { + color: $nav-pf-vertical-secondary-color; + font-size: ($font-size-base + 4); + margin: $nav-pf-vertical-secondary-header-margin; + > a { + cursor: pointer; + margin-right: 7px; + &:hover, + &:focus { + color: $link-color; + text-decoration: none; + } + } +} +.nav-pf-vertical.collapsed { // Collapsed Primary Menu state + width: $nav-pf-vertical-collapsed-width; + .list-group-item { // Show only the icons + > a { + width: $nav-pf-vertical-collapsed-width; + > .list-group-item-value { + display: none; + } + > .badge-container-pf { + display: none; + } + } + &.secondary-nav-item-pf { // Adjust widths + &.active > a, + > a { + width: $nav-pf-vertical-collapsed-width; + &:after { + right: 10px; + } + } + &.active, + &:hover { + > a { + width: ($nav-pf-vertical-collapsed-width + 2); + &:after { + right: 11px; + } + } + } + } + } +} +.nav-pf-secondary-nav { + background: $nav-pf-vertical-secondary-bg-color; + border: 1px solid $nav-pf-vertical-border-color; + border-bottom: none; + border-top: none; + bottom: 0; + display: block; + left: $nav-pf-vertical-width; + opacity: 0; + overflow-x: hidden; + overflow-y: auto; + position: fixed; + top: $navbar-pf-height; + visibility: hidden; + width: $nav-pf-vertical-width; + z-index: $zindex-navbar-fixed; + .secondary-nav-item-pf.active & { // Show secondary menu if active and either is collapsed + .collapsed-secondary-nav-pf & { + left: 0; + opacity: 1; + visibility: visible; + z-index: ($zindex-navbar-fixed + 2); + } + .collapsed-tertiary-nav-pf & { + left: 0; + opacity: 1; + visibility: visible; + } + } + .secondary-nav-item-pf.is-hover & { // Show secondary menu if hovering + .hover-secondary-nav-pf & { + opacity: 1; + visibility: visible; + } + } + .ie9.layout-pf-fixed & { + box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box + } + .layout-pf-fixed-with-footer & { + bottom: $footer-pf-height; + } + .list-group-item { + border: none; + padding: $nav-pf-vertical-secondary-item-padding; + width: $nav-pf-vertical-width; + > a { + background-color: $nav-pf-vertical-secondary-bg-color; + color: $nav-pf-vertical-secondary-item-color; + font-size: $font-size-base; + font-weight: inherit; + height: inherit; + padding: $nav-pf-vertical-secondary-link-padding; + margin-left: 20px; + width: unquote("calc(#{$nav-pf-vertical-width} - 20px)"); + + &:hover { + .list-group-item-value { + text-decoration: underline; + } + } + } + &.active > a:before { + display: none; + } + &.active, + &:hover { + > a { + background-color: $nav-pf-vertical-secondary-active-bg-color; + color: $nav-pf-vertical-secondary-active-color; + } + } + .badge-container-pf { + top: 5px; + .badge { + background: $nav-pf-vertical-secondary-badge-bg-color; + color: $nav-pf-vertical-badge-color; + } + } + .list-group-item-value { + padding-left: 5px; + } + &.tertiary-nav-item-pf { // Secondary menu items with tertiary sub menus + > a { + cursor: default; + &:after { + color: $nav-pf-vertical-secondary-indicator-color; + content: $fa-var-angle-right; + display: block; + font-family: "FontAwesome"; + font-size: 20px; + line-height: 20px; + padding: $nav-pf-vertical-tertiary-indicator-padding; + position: absolute; + right: 20px; + top: 4px; + } + // If flex box is supported add some padding to account for the submenu indicator + .list-group-item-value { + @supports (display: flex) { + padding-right: 35px; + } + } + } + &.active, + &:hover { + > a { + width: unquote("calc(#{$nav-pf-vertical-width} - 19px)"); + z-index: ($zindex-navbar-fixed + 3); + &:after { + right: 21px; + } + } + } + } + } + .nav-pf-vertical-with-badges & { + left: $nav-pf-vertical-badges-width; + width: $nav-pf-vertical-badges-width; + .list-group-item { + width: $nav-pf-vertical-badges-width; + > a { + width: unquote("calc(#{$nav-pf-vertical-badges-width} - 20px)"); + } + &.tertiary-nav-item-pf { // Secondary menu items with tertiary sub menus + &.active, + &:hover { + > a { + width: unquote("calc(#{$nav-pf-vertical-badges-width} - 19px)"); + } + } + } + } + } +} +.nav-pf-tertiary-nav { + background: $nav-pf-vertical-tertiary-bg-color; + border: 1px solid $nav-pf-vertical-border-color; + border-bottom: none; + border-top: none; + bottom: 0; + display: block; + left: unquote("calc(#{$nav-pf-vertical-width} * 2)"); + opacity: 0; + overflow-x: hidden; + overflow-y: auto; + position: fixed; + top: $navbar-pf-height; + visibility: hidden; + width: $nav-pf-vertical-width; + z-index: $zindex-navbar-fixed; + .nav-pf-vertical-with-badges & { + left: $nav-pf-vertical-badges-width; + width: $nav-pf-vertical-badges-width; + .show-mobile-nav { + left: 0; + } + } + .tertiary-nav-item-pf.active & { // Show tertiary menu if active and collapsed + .collapsed-tertiary-nav-pf & { + left: 0; + opacity: 1; + visibility: visible; + z-index: ($zindex-navbar-fixed + 3); + } + } + .tertiary-nav-item-pf.is-hover & { // Show tertiary menu if hovering + .hover-tertiary-nav-pf & { + opacity: 1; + visibility: visible; + .collapsed.collapsed-tertiary-nav-pf & { + left: 0; + } + } + } + .ie9.layout-pf-fixed & { + box-sizing: content-box; // IE9 incorrectly sizes the width if using padding-box + } + .layout-pf-fixed-with-footer & { + bottom: $footer-pf-height; + } + .nav-item-pf-header { + color: $nav-pf-vertical-tertiary-color; + margin: $nav-pf-vertical-tertiary-header-margin; + } + h5 { + color: $nav-pf-vertical-tertiary-color; + margin: $nav-pf-vertical-tertiary-list-header-margin; + } + .list-group-item { + border: none; + padding: $nav-pf-vertical-tertiary-item-padding; + > a { + background-color: transparent; + color: $nav-pf-vertical-tertiary-item-color; + font-size: $font-size-base; + font-weight: inherit; + height: inherit; + margin: $nav-pf-vertical-tertiary-link-margin; + padding: $nav-pf-vertical-tertiary-link-padding; + } + &.active > a:before { + display: none; + } + &.active, + &:hover { + > a { + background-color: $nav-pf-vertical-tertiary-active-bg-color; + color: $nav-pf-vertical-tertiary-active-color; + } + } + .badge-container-pf { + top: 5px; + .badge { + background: $nav-pf-vertical-tertiary-badge-bg-color; + color: $nav-pf-vertical-tertiary-badge-color; + } + } + .list-group-item-value { + padding-left: 5px; + } + } +} +.collapsed { + .nav-pf-secondary-nav { // Adjust left placement + left: $nav-pf-vertical-collapsed-width; + .list-group-item { + > a { + width: unquote("calc(#{$nav-pf-vertical-width} - 20px)"); + > .list-group-item-value { // Continue to show labels for secondary menu items + display: inline-block; + } + > .badge-container-pf { + display: inline-block; + } + } + } + } + .nav-pf-tertiary-nav { // Adjust left placement + left: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width})"); + .list-group-item { + > a { + width: unquote("calc(#{$nav-pf-vertical-width} - 20px)"); + > .list-group-item-value { // Continue to show labels for tertiary menu items + display: inline-block; + } + > .badge-container-pf { + display: inline-block; + } + } + } + } + &.collapsed-secondary-nav-pf, + &.collapsed-tertiary-nav-pf { + width: $nav-pf-vertical-width; + .secondary-nav-item-pf { + &:hover { + > a { + z-index: $zindex-navbar-fixed; + } + } + } + .nav-pf-secondary-nav { + left: 0; + } + } + &.collapsed-secondary-nav-pf { + .nav-pf-tertiary-nav { + left: $nav-pf-vertical-width; + } + } + &.collapsed-tertiary-nav-pf { + .nav-pf-tertiary-nav { + left: 0; + } + } + &.hover-secondary-nav-pf { + width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-width})"); + + &.collapsed-secondary-nav-pf, + &.collapsed-tertiary-nav-pf { + width: $nav-pf-vertical-width; + } + } + &.hover-tertiary-nav-pf { + width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))"); + &.collapsed-secondary-nav-pf { + width: unquote("calc(#{$nav-pf-vertical-width} * 2)"); + } + &.collapsed-tertiary-nav-pf { + width: $nav-pf-vertical-width; + } + } + &.nav-pf-vertical-with-badges { + .nav-pf-secondary-nav { + .list-group-item { + > a { + width: unquote("calc(#{$nav-pf-vertical-badges-width} - 20px)"); + } + } + } + .nav-pf-tertiary-nav { + left: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width})"); + .list-group-item { + > a { + width: unquote("calc(#{$nav-pf-vertical-badges-width} - 20px)"); + } + } + } + &.collapsed-secondary-nav-pf, + &.collapsed-tertiary-nav-pf { + width: $nav-pf-vertical-badges-width; + } + &.collapsed-secondary-nav-pf { + .nav-pf-tertiary-nav { + left: $nav-pf-vertical-badges-width; + } + } + &.hover-secondary-nav-pf { + width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + #{$nav-pf-vertical-badges-width})"); + &.collapsed-secondary-nav-pf, + &.collapsed-tertiary-nav-pf { + width: $nav-pf-vertical-badges-width; + } + } + &.hover-tertiary-nav-pf { + width: unquote("calc(#{$nav-pf-vertical-collapsed-width} + (#{$nav-pf-vertical-width} * 2))"); + &.collapsed-secondary-nav-pf { + width: unquote("calc(#{$nav-pf-vertical-width} * 2)"); + } + &.collapsed-tertiary-nav-pf { + width: $nav-pf-vertical-width; + } + } + } +} +.secondary-collapse-toggle-pf { + display: none; + font-family: $icon-font-name-fa; + font-size: inherit; + opacity: 0; + pointer-events: none; + -webkit-font-smoothing: antialiased; + &:before { + content: $fa-var-arrow-circle-o-left; + } + &.collapsed { + &:before { + content: $fa-var-arrow-circle-o-right; + } + } +} +.tertiary-collapse-toggle-pf { + display: none; + font-family: $icon-font-name-fa; + font-size: inherit; + opacity: 0; + pointer-events: none; + -webkit-font-smoothing: antialiased; + &:before { + content: $fa-var-arrow-circle-o-left; + } + &.collapsed { + &:before { + content: $fa-var-arrow-circle-o-right; + } + } +} +.nav-pf-vertical-collapsible-menus { + .secondary-collapse-toggle-pf { + display: inline-block; + } + .secondary-nav-item-pf.active { + .secondary-collapse-toggle-pf { + opacity: 1; + pointer-events: all; + } + } + .tertiary-collapse-toggle-pf { + display: inline-block; + } + .tertiary-nav-item-pf.active { + .tertiary-collapse-toggle-pf { + opacity: 1; + pointer-events: all; + } + } +} +.show-mobile-nav { + .secondary-collapse-toggle-pf { + display: inline-block; + opacity: 1; + pointer-events: all; + &:before { + content: $fa-var-arrow-circle-o-left; + } + } + .tertiary-collapse-toggle-pf { + display: inline-block; + opacity: 1; + pointer-events: all; + &:before { + content: $fa-var-arrow-circle-o-left; + } + } +} +.force-hide-secondary-nav-pf { // Used to temporarily hide sub-menus on an unpin event + .nav-pf-secondary-nav { + display: none !important; + } + .nav-pf-tertiary-nav { + display: none !important; + } +} +.nav-pf-vertical.transitions { + transition: width $nav-pf-menu-transition-period; + .nav-pf-secondary-nav { + transition: visibility $nav-pf-menu-transition-period, opacity $nav-pf-menu-transition-period linear; + } + .nav-pf-tertiary-nav { + transition: visibility $nav-pf-menu-transition-period, opacity $nav-pf-menu-transition-period linear; + } +} diff --git a/src/sass/converted/patternfly/_wizard.scss b/src/sass/converted/patternfly/_wizard.scss new file mode 100644 index 0000000000..f1fd6c9a93 --- /dev/null +++ b/src/sass/converted/patternfly/_wizard.scss @@ -0,0 +1,423 @@ +// +// Wizard +// -------------------------------------------------- +.wizard-pf { + padding: 10px; + margin: 0 auto; + max-height: 900px; + width: auto; + .modal-content { + min-height:100%; + } +} + +// Wizard header +// Top section of the wizard w/ title and dismiss + +.wizard-pf-body { + background:$color-pf-white; + padding: 0; + position: static; +} +/* styles the sidebard containing the sub-steps */ +.wizard-pf-sidebar { + background: $color-pf-black-100; + border-right: 1px solid $color-pf-black-300; + display:none; + @media (min-width: $screen-sm-min) { + display:inherit; + flex:0 0 auto; + overflow-x: hidden; + overflow-y: auto; + .list-group { + border-top: 0; + margin-bottom: 0; + } + .list-group-item { + background-color: transparent; + border-color: $color-pf-black-200; + padding: 0; + > a { + color: $color-pf-black; + cursor: pointer; + display: block; + font-size: 14px; + font-weight: 700; + height: 50px; + outline: 0; + padding-top: 11px; + padding-left: 20px; + position: relative; + white-space: nowrap; + width: 14em; + &:hover { + text-decoration: none; + } + } + &.active { + background-color: $color-pf-black-200; + + //override default behavior + &:hover { + border-color: $color-pf-black-200; + } + > a { + color: $color-pf-blue-300; + cursor: default; + } + // line to left side showing active substep + > a:before { + content: " "; + background: $color-pf-blue-300; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 3px; + } + // caret to right showing active substep + > a:after { + color: $color-pf-blue-300; + content: "\f105"; // right caret + display: block; + font-family: FontAwesome; + font-size: 24px; + font-weight: 500; + line-height: 30px; + padding-top: 10px; + position: absolute; + right: 23px; + top: 0; + } + } + } + } +} +.wizard-pf-substep-number { + display:inline-block; + margin-right: 5px; + vertical-align: middle; + width: 25px; +} +.wizard-pf-substep-title { + display:inline-block; + margin-right: 5px; + text-align: left; + vertical-align: middle; +} +/* styles the steps indicator across the top of the wizard */ +.wizard-pf-steps { + border-bottom: solid 1px $color-pf-black-300; + @media (min-width: $screen-sm-min) { + text-align: center; + } +} + +.wizard-pf-steps-indicator { + background: $color-pf-black-200; + border-top: 1px solid $color-pf-black-300; + display: inline-block; + display: flex; + font-size: ceil(($font-size-base * 1.3333)); + list-style: none; + margin-bottom: 0; + padding: 15px 0; + @media (min-width: $screen-sm-min) { + background: $color-pf-white; + height: 120px; + padding: 38px 0 0; + justify-content: space-around; + } + + li { + counter-increment: section; + float:left; /* float for IE9 since it doesn't support flex. If items wrap, they overlap */ + flex-grow: 1; + flex-basis: 0; + line-height: 15px; + margin: 0; + padding: 0; + position: relative; + text-align: center; + &:not(.active) { + display: none; + @media (min-width: $screen-sm-min) { + display: block; + } + } + a { + align-items: center; + display: flex; + font-weight: 700; + @media (min-width: $screen-sm-min) { + font-weight: normal; + justify-content: center; + } + .wizard-pf-step-title { + margin-left: 10px; + @media(min-width: $screen-sm-min) { + margin-left: 0; + } + + &-substep { + font-weight: normal; + margin-left: 10px; + text-transform: capitalize; + &:before { + content:"\00BB"; + font-size: 20px; + margin-right: 10px; + } + &:not(.active) { + display: none; + } + } + } + } + /* draw the line between the circles */ + @media (min-width: $screen-sm-min) { + .wizard-pf-step-title-substep { + display: none; + } + &:before { + background-color: $color-pf-black-400; + content: ""; + height: 2px; + left: 0; + position: absolute; + right: 0; + top: 40px; // needed for IE9/10 calculate 50% of just the li, others calc 50% of the entire thing including the a:before + //otherwise, use top: calc(50% - 1px); + } + /* don't draw the line between the circles on the ends */ + &:first-child:before { + left: 50%; + right: 0; + } + &:last-child:before { + left: 0; + right: 50%; + } + &:only-of-type:before { + background-color: transparent; + } + } + a { + color: $color-pf-black; + cursor: pointer; + font-size: 16px; + margin-left:1em; + margin-right:1em; + text-decoration: none; + &:hover { + .wizard-pf-step-number { + background-color: $color-pf-black-400; + border-color: $color-pf-black-400; + color: $color-pf-white; + } + } + } +} + /* draw the step number in the circle */ + + .wizard-pf-step-number { + background-color: $color-pf-white; + border-radius: 50%; + border: solid 2px $color-pf-black-400; + color: $color-pf-black-400; + font-size: $font-size-base; + font-weight: 700; + height: 25px; + line-height: 22px; + @media (min-width: $screen-sm-min) { + left: unquote("calc(50% - 13px)"); + position: absolute; + top: 27px; + } + width: 25px; + } + .active .wizard-pf-step-number { + background-color: $color-pf-blue-300; + border-color: $color-pf-blue-300; + cursor: default; + color: $color-pf-white; + } + + .viewed-pf .wizard-pf-step-number { + color: $color-pf-black; + background-color: $color-pf-white; + border-color: $color-pf-blue-300; + } + +} + +/* styles the main content portion of the wizard */ +.wizard-pf-main { + height: 100%; + padding:1em; + vertical-align: top; + width:100%; + @media (min-width: $screen-sm-min) { + overflow: auto; + padding:3em; + flex:1 1 auto; + } + .blank-slate-pf { + background-color: transparent; + border: none; + left: 0; + right: 0; + } +} + +.wizard-pf-contents textarea { + resize: vertical; +} + +/* styles the content of a review page */ +.wizard-pf-review-steps { + list-style: none; + .list-group, .list-group-item { + border: none; + margin-bottom: 0; + } + > ul { + > li { + float: left; + line-height: 15px; + margin: 0; + padding-top: 0; + position: relative; + width: 100%; + > a { + color: #030303; + cursor: pointer; + font-size: 16px; + padding-left: 30px; + padding-right: 5px; + text-decoration: none; + transition: 250ms; + &:before { + content: "\f107"; + display: block; + font-family: FontAwesome; + font-size: 24px; + font-weight: 500; + left: 20px; + position: absolute; + top: 0; + } + &.collapsed { + &:before { + content: "\f105"; + } + } + } + } + } +} + +.wizard-pf-review-substeps { + padding-left: 22px; + > ul { + > li { + float: left; + line-height: 15px; + margin: 0; + position: relative; + width: 100%; + a { + color: #030303; + cursor: pointer; + font-size: 16px; + padding-left: 30px; + padding-right: 5px; + text-decoration: none; + transition: 250ms; + &:before { + content: "\f107"; + display: block; + font-family: FontAwesome; + font-size: 24px; + font-weight: 500; + left: 20px; + position: absolute; + top: 10px; + } + &.collapsed { + &:before { + content: "\f105"; + } + } + } + } + } +} + +.wizard-pf-review-content { + padding-top: 10px; + padding-left: 40px; + .wizard-pf-review-item { + padding: 5px 0; + &.sub-item { + margin-left: 10px; + } + .wizard-pf-review-item-label { + font-weight: 700; + padding-right: 10px; + } + .wizard-pf-review-item-field { + font-weight: 700; + margin: 5px 0; + padding-right: 10px; + &:first-of-type { + margin-top: 0; + } + &:last-of-type { + margin-bottom: 0; + } + &.sub-field { + margin-left: 10px; + } + } + } +} + +.wizard-pf-success-icon { + color: $color-pf-green-400; + font-size: ($font-size-base * 5.6); + line-height: ($font-size-base * 5.6); +} + +/* styles the footer */ +.wizard-pf-footer { + background:$color-pf-white; + border-top: 1px solid $color-pf-black-300; + margin-top: 0; + padding-bottom: 17px; + .btn-cancel { + margin-right:25px; + } +} + +.wizard-pf-row { + @media (min-width: $screen-sm-min) { + display: flex; + width:100%; + height: 900px; + max-height: 65vh; + } +} + +// Scale up the modal +@media (min-width: $screen-md-min) { + // increasing space around modal for larger viewports + .wizard-pf { + padding: 30px 0; + width: 900px; + } + // increasing width of sidebar for larger viewports + .wizard-pf-sidebar .list-group-item > a { + width: 18em; + } +} diff --git a/src/sass/static/_patternfly-compass.scss b/src/sass/static/_patternfly-compass.scss new file mode 100644 index 0000000000..698621628c --- /dev/null +++ b/src/sass/static/_patternfly-compass.scss @@ -0,0 +1,3 @@ +@import "bootstrap-compass"; +@import "font-awesome-compass"; +$pf-sass-asset-helper: true; diff --git a/src/sass/static/_patternfly-sprockets.scss b/src/sass/static/_patternfly-sprockets.scss new file mode 100644 index 0000000000..cd5a3429b1 --- /dev/null +++ b/src/sass/static/_patternfly-sprockets.scss @@ -0,0 +1,3 @@ +@import "bootstrap-sprockets"; +@import "font-awesome-sprockets"; +$pf-sass-asset-helper: true; diff --git a/src/sass/static/_patternfly.scss b/src/sass/static/_patternfly.scss new file mode 100644 index 0000000000..bc303deecc --- /dev/null +++ b/src/sass/static/_patternfly.scss @@ -0,0 +1,145 @@ +/* PatternFly */ + +// Patternfly variables +@import 'patternfly/variables'; + +// Bootstrap Core variables and mixins +@import "bootstrap/variables"; +@import "bootstrap/mixins"; + +// Bootstrap mixin overrides +@import 'patternfly/bootstrap-mixin-overrides'; + +// OpenSans +@import 'patternfly/fonts'; + +// Bootstrap Reset and dependencies +@import "bootstrap/normalize"; +@import "bootstrap/print"; +@import "bootstrap/glyphicons"; + +// Bootstrap Core CSS +@import "bootstrap/scaffolding"; +@import "bootstrap/type"; +@import "bootstrap/code"; +@import "bootstrap/grid"; +@import "bootstrap/tables"; +@import "bootstrap/forms"; +@import "bootstrap/buttons"; + +// Bootstrap Components +@import "bootstrap/component-animations"; +@import "bootstrap/dropdowns"; +@import "bootstrap/button-groups"; +@import "bootstrap/input-groups"; +@import "bootstrap/navs"; +@import "bootstrap/navbar"; +@import "bootstrap/breadcrumbs"; +@import "bootstrap/pagination"; +@import "bootstrap/pager"; +@import "bootstrap/labels"; +@import "bootstrap/badges"; +@import "bootstrap/jumbotron"; +@import "bootstrap/thumbnails"; +@import "bootstrap/alerts"; +@import "bootstrap/progress-bars"; +@import "bootstrap/media"; +@import "bootstrap/list-group"; +@import "bootstrap/panels"; +@import "bootstrap/responsive-embed"; +@import "bootstrap/wells"; +@import "bootstrap/close"; + +// Bootstrap Components w/ JavaScript +@import "bootstrap/modals"; +@import "bootstrap/tooltip"; +@import "bootstrap/popovers"; +@import "bootstrap/carousel"; + +// Bootstrap Utility classes +@import "bootstrap/utilities"; +@import "bootstrap/responsive-utilities"; + +// Font Awesome +@import 'font-awesome'; + +// Bootstrap-Combobox +@import 'patternfly/dependencies/bootstrap-combobox/combobox'; +// Bootstrap-Datepicker +@import 'patternfly/dependencies/bootstrap-datepicker/datepicker3'; +// Bootstrap-Select +@import 'patternfly/dependencies/bootstrap-select/bootstrap-select'; +// Bootstrap-Slider +@import 'patternfly/dependencies/bootstrap-slider/bootstrap-slider'; +// Bootstrap Switch +@import 'patternfly/dependencies/bootstrap-switch/bootstrap-switch'; +// Bootstrap Touchspin +@import "patternfly/dependencies/bootstrap-touchspin/jquery.bootstrap-touchspin"; +// C3 charts +@import "patternfly/dependencies/c3/c3"; +// Bootstrap-DateTimePicker +@import 'patternfly/dependencies/eonasdan-bootstrap-datetimepicker/bootstrap-datetimepicker-build'; + +// PatternFly +@import 'patternfly/mixins'; +@import "patternfly/alerts"; +@import "patternfly/badges"; +@import "patternfly/breadcrumbs"; +@import "patternfly/buttons"; +@import "patternfly/dropdowns"; +@import "patternfly/forms"; +@import "patternfly/labels"; +@import "patternfly/list-group"; +@import "patternfly/modals"; +@import "patternfly/pager"; +@import "patternfly/pagination"; +@import "patternfly/panels"; +@import "patternfly/popovers"; +@import "patternfly/progress-bars"; +@import "patternfly/tables"; +@import "patternfly/tabs"; +@import "patternfly/tooltip"; +@import "patternfly/type"; + +// PatternFly Additions +@import 'patternfly/about-modal'; +@import 'patternfly/application-launcher'; +@import 'patternfly/blank-slate'; +@import 'patternfly/bootstrap-combobox'; +@import 'patternfly/bootstrap-datepicker'; +@import 'patternfly/bootstrap-select'; +@import 'patternfly/bootstrap-slider'; +@import 'patternfly/bootstrap-switch'; +@import 'patternfly/bootstrap-touchspin'; +@import 'patternfly/bootstrap-treeview'; +@import 'patternfly/card-view'; +@import 'patternfly/cards'; +@import 'patternfly/charts'; +@import 'patternfly/close'; +@import 'patternfly/datatables'; +@import 'patternfly/experimental-features'; +@import 'patternfly/footer'; +@import 'patternfly/icons'; +@import 'patternfly/infotip'; +@import 'patternfly/layouts'; +@import 'patternfly/links'; +@import 'patternfly/list-pf'; +@import 'patternfly/list-view-dnd'; +@import 'patternfly/list-view'; +@import 'patternfly/login'; +@import 'patternfly/nav-vertical-alt'; +@import 'patternfly/navbar-alt'; +@import 'patternfly/navbar-vertical'; +@import 'patternfly/navbar'; +@import 'patternfly/notifications-drawer'; +@import 'patternfly/search'; +@import 'patternfly/sidebar'; +@import 'patternfly/skip-to-content'; +@import 'patternfly/spinner'; +@import 'patternfly/syntax-highlighting'; +@import 'patternfly/table-view'; +@import 'patternfly/time-picker'; +@import 'patternfly/toast'; +@import 'patternfly/toolbar'; +@import 'patternfly/vertical-nav'; +@import 'patternfly/wizard'; diff --git a/src/sass/static/patternfly/_application-launcher.scss b/src/sass/static/patternfly/_application-launcher.scss new file mode 100644 index 0000000000..6bddaecb7f --- /dev/null +++ b/src/sass/static/patternfly/_application-launcher.scss @@ -0,0 +1,213 @@ +// +// Application Launcher +// -------------------------------------------------- + +@mixin applauncher-pf(){ + display: inline-block; + overflow: visible; + + .applauncher-pf-title { + @include sr-only-pf(); + } + + .dropdown-toggle { + &.disabled { + cursor: not-allowed; + } + } + + &.open > .dropdown-menu { + display:flex; + flex-wrap:wrap; + } + + .applauncher-pf-item { + width: 100%; + } + + .applauncher-pf-link { + display:flex; + white-space: initial; + align-items: center; + } + + &-block-list { + .applauncher-pf-item { + @media (min-width: $screen-sm-min) { + flex:0 0 50%; + } + } + + .applauncher-pf-link { + flex-wrap: wrap; + @media (min-width: $screen-sm-min) { + flex-direction:column; + text-align: center; + padding:15px 0; + } + } + + .applauncher-pf-link-icon { + padding: 0; + } + }//block-list + + &:not(.applauncher-pf-block-list) { + + .applauncher-pf-link { + @media (min-width: $screen-sm-min) { + padding:$applauncher-pf-dropdown-menu-padding; + &-icon { + flex:1 0 0; + text-align: left; + } + &-title{flex:3;} + } + } + } + + .dropdown-menu { + padding: $applauncher-pf-dropdown-menu-padding; + min-width: $applauncher-pf-dropdown-menu-width; + } + + .applauncher-pf-link { + border-style: solid; + border-width: $applauncher-pf-menu-link-border-width; + border-color: transparent; + + &:hover { + background-color: $applauncher-pf-menu-link-background-color-hover; + border-color: $applauncher-pf-menu-link-border-color-hover; + color: $applauncher-pf-menu-link-color-hover; + text-decoration: none; + + @include box-shadow(0 0 2px 0 $applauncher-pf-menu-link-shadow); + } + } + + .applauncher-pf-link-icon { + font-size: 1.2em; + text-align: center; + width: $applauncher-pf-menu-link-icon-width; + + @media (min-width: $screen-sm-min) { + font-size: $applauncher-pf-menu-link-icon-font-size; + } + } + +}//@mixin applauncher-pf + +.applauncher-pf{ + @include applauncher-pf; +} + +.navbar-utility .applauncher-pf { + .dropdown-menu { + border-width: $applauncher-pf-menu-link-border-width !important; + @media (min-width: $screen-sm-min) { + margin-top: 3px; + right:0; + } + }//.dropdown-menu +} + +.navbar-pf, .navbar-pf-alt { + + .navbar-utility .applauncher-pf, .applauncher-pf { + + &.open > a, + &.open > a:focus { + background-color: $navbar-pf-navbar-nav-active-bg-color; + color: $navbar-pf-active-color; + + @media (min-width: $screen-sm-min) { + background-color: $navbar-pf-navbar-utility-open-bg-color; + border-color: $navbar-pf-navbar-utility-border-color; + color: $navbar-pf-navbar-utility-color; + } + } + + &.open { + .dropdown-menu > li > a { + @media (max-width: $grid-float-breakpoint-max) { + padding-left: 20px; + .applauncher-pf-link-icon { + padding-right: 20px; + } + } + } + } + + &.dropdown > .dropdown-toggle, + .dropdown-toggle { + background-color: inherit; + color: $applauncher-pf-menu-link-color; + text-align: left; + text-decoration: none; + border-width: 0; + display: block; + padding-left: 20px; + + &.disabled { + color: $applauncher-pf-menu-link-color-disabled !important; + } + + @media (min-width: $screen-sm-min) { + border-left: 1px solid $navbar-pf-navbar-utility-border-color; + padding: $applauncher-pf-dropdown-toggle-padding; + line-height: 1; + } + } + + .applauncher-pf-icon { + padding-right:$applauncher-pf-icon-padding-right; + + @media (min-width: $screen-sm-min) { + padding: 0; + } + } + + .applauncher-pf-title { + display: inline; + position: relative; + } + + + .applauncher-pf-link { + overflow: hidden; + width: 100%; + + &:hover { + background-color: transparent; + border-color: transparent; + @include box-shadow(none); + } + } + + .applauncher-pf-link-title { + overflow: hidden; + } + + @media (min-width: $screen-sm-min) { + //Apply mixin + @include applauncher-pf(); + } + } +}//.navbar-pf .navbar-pf-alt ovrerides + +.navbar-iconic { + + .navbar-utility .applauncher-pf, + .applauncher-pf { + + &.dropdown > .dropdown-toggle, + .dropdown-toggle { + + @media (min-width: $screen-sm-min) { + padding: 22px 10px; + line-height: inherit; + } + } + } +}