experimental-features.html
Home
/
themes /
src /
main /
node_modules /
rcue /
tests /
experimental-features.html
<!DOCTYPE html>
<!--[if IE 9]><html lang="en-us" class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-us">
<!--<![endif]-->
<head>
<title>Experimental Features - Red Hat® Common User Experience</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/img/favicon.ico">
<!-- iPad retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/img/apple-touch-icon-precomposed-152.png">
<!-- iPad retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/apple-touch-icon-precomposed-144.png">
<!-- iPad non-retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/img/apple-touch-icon-precomposed-76.png">
<!-- iPad non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/apple-touch-icon-precomposed-72.png">
<!-- iPhone 6 Plus icon -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/img/apple-touch-icon-precomposed-180.png">
<!-- iPhone retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/apple-touch-icon-precomposed-114.png">
<!-- iPhone non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/img/apple-touch-icon-precomposed-57.png">
<link rel="stylesheet" href="../dist/css/rcue.min.css" >
<link rel="stylesheet" href="../dist/css/rcue-additions.min.css" >
<link href="tests.css" rel="stylesheet" media="screen, print">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="../components/patternfly/dist/js/patternfly.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Experimental Features</h1>
</div>
<div class="alert alert-warning">
<span class="pficon pficon-warning-triangle-o"></span>
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
</div>
<hr>
<h2>Experimental Features Entry Screen</h2>
<div class="experimental-pf">
<div class="experimental-pf-bar">
<span id="experimentalBar" class="experimental-pf-text">
This feature is experimental.
<a id="acceptMessage">Got it!</a>
</span>
<button class="experimental-pf-more-info">
More info <i class="fa fa-flask"></i>
</button>
</div>
<div class="blank-slate-pf">
<div class="blank-slate-pf-icon">
<i class="fa fa-flask"></i>
</div>
<h1>Empty State Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Learn more about this <a href="#">on the documentation</a>.</p>
<div class="blank-slate-pf-main-action">
<form class="form-horizontal">
<div class="form-group">
<input type="checkbox" name="accept" id="accept">
<label for="accept" class="control-label">
I agree to the terms of this feature, as written above.
</label>
</div>
</form>
<button class="btn btn-lg btn-experimental-pf" id="activateButton" disabled>Activate All Experimental Features</button>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#acceptMessage").on("click", function() {
$("#experimentalBar").addClass("hide");
});
$("#accept").click(function() {
$("#activateButton").prop("disabled", !$(this).prop("checked"));
});
});
</script>
<hr>
<h2>Experimental Feature Identifier on a Component</h2>
<div class="experimental-pf">
<div class="experimental-pf-bar">
<button class="experimental-pf-more-info">
More info <i class="fa fa-flask"></i>
</button>
</div>
<div class="panel panel-default ">
<div class="panel-heading">
<h3 class="panel-title">lorem ipsum</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
</div>
</div><!-- /container -->
</body>
</html>