http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/chef/creating-blueprints.md ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/chef/creating-blueprints.md b/docs/guide/yaml/chef/creating-blueprints.md index b97f6d1..d584a4e 100644 --- a/docs/guide/yaml/chef/creating-blueprints.md +++ b/docs/guide/yaml/chef/creating-blueprints.md @@ -1,7 +1,7 @@ --- title: Creating Blueprints from Chef title_in_menu: Creating Blueprints from Chef -layout: guide-normal +layout: website-normal --- In a nutshell, a new Chef-based entity can be defined as a service by specifying
http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/chef/writing-chef.md ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/chef/writing-chef.md b/docs/guide/yaml/chef/writing-chef.md index 3fa9401..0593837 100644 --- a/docs/guide/yaml/chef/writing-chef.md +++ b/docs/guide/yaml/chef/writing-chef.md @@ -1,7 +1,7 @@ --- title: Writing Chef for Blueprints title_in_menu: Writing Chef for Blueprints -layout: guide-normal +layout: website-normal --- ## Making it Simpler http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/clusters-and-policies.md ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/clusters-and-policies.md b/docs/guide/yaml/clusters-and-policies.md index e41115b..fc65179 100644 --- a/docs/guide/yaml/clusters-and-policies.md +++ b/docs/guide/yaml/clusters-and-policies.md @@ -1,6 +1,6 @@ --- title: Clusters and Policies -layout: guide-normal +layout: website-normal toc: ../guide_toc.json categories: [use, guide, defining-applications] --- http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/clusters.md ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/clusters.md b/docs/guide/yaml/clusters.md index fc519a2..854254e 100644 --- a/docs/guide/yaml/clusters.md +++ b/docs/guide/yaml/clusters.md @@ -1,6 +1,6 @@ --- title: Clusters, Specs, and Composition -layout: guide-normal +layout: website-normal toc: ../guide_toc.json categories: [use, guide, defining-applications] --- http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/configuring-vms.md ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/configuring-vms.md b/docs/guide/yaml/configuring-vms.md index 280fa19..97fb9d0 100644 --- a/docs/guide/yaml/configuring-vms.md +++ b/docs/guide/yaml/configuring-vms.md @@ -1,6 +1,6 @@ --- title: Configuring VMs -layout: guide-normal +layout: website-normal toc: ../guide_toc.json categories: [use, guide, defining-applications] --- @@ -28,4 +28,4 @@ including: * `machineCreateAttempts` (for dodgy clouds, and they nearly all fail occasionally!) * and things like `imageId` and `userMetadata` and disk and networking options (e.g. `autoAssignFloatingIp` for private clouds) -For more information, see the javadoc on `JcloudsLocationConfig`. +For more information, see [Operations: Locations](../ops/locations/). http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/creating-yaml.md ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/creating-yaml.md b/docs/guide/yaml/creating-yaml.md index 012c67e..8c6b31f 100644 --- a/docs/guide/yaml/creating-yaml.md +++ b/docs/guide/yaml/creating-yaml.md @@ -1,6 +1,6 @@ --- title: The Basic Structure -layout: guide-normal +layout: website-normal toc: ../guide_toc.json categories: [use, guide, defining-applications] --- @@ -25,7 +25,7 @@ Here's a very simple YAML blueprint plan, to explain the structure: * The `name` is just for the benefit of us humans. * The `location` specifies where this should be deployed. - If you've [set up passwordless localhost SSH access](setting-locations.html#localhost) + If you've [set up passwordless localhost SSH access](../ops/locations/#localhost) you can use `localhost` as above, but if not, just wait ten seconds for the next example. * The `services` block takes a list of the typed services we want to deploy. @@ -52,17 +52,24 @@ TODO building up children entities ### More Information +Topics to explore next on the topic of YAML blueprints are: + +{% include list-children.html %} + Plenty of examples of blueprints exist in the Brooklyn codebase, -so a good starting point is to [`git clone`]({{ site.path.guide }}/dev/code/index.html) it +so another starting point is to [`git clone`]({{ site.path.guide }}/dev/code/index.html) it and search for `*.yaml` files therein. Brooklyn lived as a Java framework for many years before we felt confident to make a declarative front-end, so you can do pretty much anything you want to -by dropping to the JVM. For more information on this: +by dropping to the JVM. For more information on Java: + * start with a [Maven archetype]({{site.path.guide}}/java/archetype.html) * see all [Brooklyn Java guide]({{site.path.guide}}/java/) topics * look at test cases in the [codebase](https://github.com/apache/incubator-brooklyn) -<!-- TODO + +<!-- +TODO * review some [examples]({{site.path.guide}}/use/examples/index.html) --> http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/custom-entities.md ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/custom-entities.md b/docs/guide/yaml/custom-entities.md index 8e9638d..04f7763 100644 --- a/docs/guide/yaml/custom-entities.md +++ b/docs/guide/yaml/custom-entities.md @@ -1,6 +1,6 @@ --- title: Custom Entities -layout: guide-normal +layout: website-normal toc: ../guide_toc.json categories: [use, guide, defining-applications] --- http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/example_yaml/vanilla-bash-netcat-w-client.yaml ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/example_yaml/vanilla-bash-netcat-w-client.yaml b/docs/guide/yaml/example_yaml/vanilla-bash-netcat-w-client.yaml index 50051db..fbf0505 100644 --- a/docs/guide/yaml/example_yaml/vanilla-bash-netcat-w-client.yaml +++ b/docs/guide/yaml/example_yaml/vanilla-bash-netcat-w-client.yaml @@ -12,13 +12,15 @@ services: echo hello | nc -l 4321 >> server-input & echo $! > $PID_FILE - brooklyn.policies: - # restarter and - - policyType: brooklyn.policy.ha.ServiceFailureDetector + # a failure detector and a service restarter work together + brooklyn.enrichers: + - type: brooklyn.policy.ha.ServiceFailureDetector brooklyn.config: # wait 15s after service fails before propagating failure serviceFailedStabilizationDelay: 15s - - policyType: brooklyn.policy.ha.ServiceRestarter + + brooklyn.policies: + - type: brooklyn.policy.ha.ServiceRestarter brooklyn.config: # repeated failures in a time window can cause the restarter to abort, # propagating the failure; a time window of 0 will mean it always restarts! @@ -43,7 +45,9 @@ services: # set the hostname of the netcat instance as an env var for the scripts env: - TARGET_HOSTNAME: $brooklyn:component("netcat-server").attributeWhenReady("host.name") + TARGET_HOSTNAME: + $brooklyn:component("netcat-server"). + attributeWhenReady("host.name") # start/check/stop are no-op launch.command: "" http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/index.md ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/index.md b/docs/guide/yaml/index.md index 4073f70..c16dab2 100644 --- a/docs/guide/yaml/index.md +++ b/docs/guide/yaml/index.md @@ -9,7 +9,6 @@ children: - multiple-services.md - clusters-and-policies.md - custom-entities.md -- catalog-maintenance.md - chef/ - { path: yaml-reference.md, title: YAML Blueprint Reference } --- http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/multiple-services.md ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/multiple-services.md b/docs/guide/yaml/multiple-services.md index 17e1f04..0f443dd 100644 --- a/docs/guide/yaml/multiple-services.md +++ b/docs/guide/yaml/multiple-services.md @@ -1,10 +1,44 @@ --- title: Multiple Services and Dependency Injection -layout: guide-normal -toc: ../guide_toc.json -categories: [use, guide, defining-applications] +layout: website-normal --- +We've seen the configuration of machines and how to build up clusters. +Now let's return to our app-server example and explore how more interesting +services can be configured, composed, and combined. + + +### Service Configuration + +We'll begin by using more key-value pairs to configure the JBoss server to run a real app: + +{% highlight yaml %} +{% readj example_yaml/appserver-configured.yaml %} +{% endhighlight %} + +(As before, you'll need to add the `location` info; `localhost` will work for these and subsequent examples.) + +When this is deployed, you can see management information in the Brooklyn Web Console, +including a link to the deployed application (downloaded to the target machine from the `hello-world` URL), +running on port 8080. + +**Tip**: If port 8080 might be in use, you can specify `8080+` to take the first available port >= 8080; +the actual port will be reported as a sensor by Brooklyn. + +It's also worth indicating an alternate, more formal syntax. +Not all configuration on entities is supported at the top level of the service specification +(only those which are defined as "flags" in the underlying blueprint, +e.g. the `@SetFromFlag("war")` in the `WebAppServiceConstants` parent of `JBoss7Server`). +All configuration has a formal qualified name, and this can be supplied even where flags or config keys are not +explicitly defined, by placing it into a `brooklyn.config` section: + +{% highlight yaml %} +{% readj example_yaml/appserver-configured-in-config.yaml %} +{% endhighlight %} + + +### Multiple Services + If you explored the `hello-world-sql` application we just deployed, you'll have noticed it tries to access a database. And it fails, because we have not set one up. Let's do that now: @@ -45,7 +79,6 @@ At that point the URL is injected, first passing it through `formatString` to include the credentials for the database (which are defined in the database creation script). - ### An Aside: Substitutability Don't like JBoss? Is there something about Maria? http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/mutlitple-services.md ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/mutlitple-services.md b/docs/guide/yaml/mutlitple-services.md deleted file mode 100644 index b5dfe34..0000000 --- a/docs/guide/yaml/mutlitple-services.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Multiple Services and Dependency Injection -layout: guide-normal -toc: ../guide_toc.json -categories: [use, guide, defining-applications] ---- -We've seen the configuration of machines and how to build up clusters. -Now let's return to our app-server example and explore how more interesting -services can be configured, composed, and combined. - -Also note there are some good overview materials [here]({{site.path.guide}}//use/guide/defining-applications/basic-concepts.html) -covering clusters, sensors, effectors and more, -if you're the kind of person who likes to learn more about concepts before seeing them in action. - - -### Service Configuration - -We'll begin by using more key-value pairs to configure the JBoss server to run a real app: - -{% highlight yaml %} -{% readj example_yaml/appserver-configured.yaml %} -{% endhighlight %} - -(As before, you'll need to add the `location` info; `localhost` will work for these and subsequent examples.) - -When this is deployed, you can see management information in the Brooklyn Web Console, -including a link to the deployed application (downloaded to the target machine from the `hello-world` URL), -running on port 8080. - -**Top tip**: If port 8080 might be in use, you can specify `8080+` to take the first available port >= 8080; -the actual port will be reported as a sensor by Brooklyn. - -It's also worth indicating an alternate, more formal syntax. -Not all configuration on entities is supported at the top level of the service specification -(only those which are defined as "flags" in the underlying blueprint, -e.g. the `@SetFromFlag("war")` in the `WebAppServiceConstants` parent of `JBoss7Server`). -All configuration has a formal qualified name, and this can be supplied even where flags or config keys are not -explicitly defined, by placing it into a `brooklyn.config` section: - -{% highlight yaml %} -{% readj example_yaml/appserver-configured-in-config.yaml %} -{% endhighlight %} - -If you explored the `hello-world-sql` application we just deployed, -you'll have noticed it tries to access a database. -And it fails, because we have not set one up. Let's do that now: - -{% highlight yaml %} -{% readj example_yaml/appserver-w-db.yaml %} -{% endhighlight %} - -Here there are a few things going on: - -* We've added a second service, which will be the database; - you'll note the database has been configured to run a custom setup script -* We've injected the URL of the second service into the appserver as a Java system property - (so our app knows where to find the database) - -**Caution: Be careful if you write your YAML in an editor which attempts to put "smart-quotes" in. -All quote characters must be plain ASCII, not fancy left-double-quotes and right-double-quotes!** - -There are as many ways to do dependency injection as there are developers, -it sometimes seems; our aim in Brooklyn is not to say this has to be done one way, -but to support the various mechanisms people might need to do, for whatever reasons. -(We each have our opinions about what works well, of course; -the one thing we do want to call out is that being able to dynamically update -the injection is useful in a modern agile application -- so we are definitively **not** -recommending this Java system property approach ... but it is an easy one to demo!) - -The way the dependency injection works is again by using the `$brooklyn:` DSL, -this time referring to the `component("db")` (looked up by the `id` field on our DB component), -and then to a sensor emitted by that component. -All the database entities emit a `database.url` sensor when they are up and running; -the `attributeWhenReady` DSL method will store a pointer to that sensor (a Java Future under the covers) -in the Java system properties map which the JBoss entity reads at launch time, blocking if needed. - -This means that the deployment occurs in parallel, and if the database comes up first, -there is no blocking; but if the JBoss entity completes its installation and -downloading the WAR, it will wait for the database before it launches. -At that point the URL is injected, first passing it through `formatString` -to include the credentials for the database (which are defined in the database creation script). - - - -### An Aside: Substitutability - -Don't like JBoss? Is there something about Maria? -One of the modular principles we follow in Brooklyn is substitutability: -in many cases, the config keys, sensors, and effectors are defined -in superclasses and are portable across multiple implementations. - -Here's an example deploying the same application but with different flavors of the components: - -{% highlight yaml %} -{% readj example_yaml/appserver-w-db-other-flavor.yaml %} -{% endhighlight %} - -We've also brought in the `provisioning.properties` from the VM example earlier -so our database has 8GB RAM. -Any of those properties, including `imageId` and `user`, can be defined on a per-entity basis. http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/mysql-in-catalog-w700.png ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/mysql-in-catalog-w700.png b/docs/guide/yaml/mysql-in-catalog-w700.png deleted file mode 100644 index f370249..0000000 Binary files a/docs/guide/yaml/mysql-in-catalog-w700.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/mysql-in-catalog.png ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/mysql-in-catalog.png b/docs/guide/yaml/mysql-in-catalog.png deleted file mode 100644 index 685455d..0000000 Binary files a/docs/guide/yaml/mysql-in-catalog.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/guide/yaml/setting-locations.md ---------------------------------------------------------------------- diff --git a/docs/guide/yaml/setting-locations.md b/docs/guide/yaml/setting-locations.md index d279460..ab92369 100644 --- a/docs/guide/yaml/setting-locations.md +++ b/docs/guide/yaml/setting-locations.md @@ -1,10 +1,12 @@ --- title: Setting Locations -layout: guide-normal +layout: website-normal toc: ../guide_toc.json categories: [use, guide, defining-applications] --- +{% include fields.md %} + Brooklyn supports a very wide range of target locations -- localhost is mainly a convenience for testing. With deep integration to [Apache jclouds](http://jclouds.org), most well-known clouds and cloud platforms are supported. The following example is for Amazon EC2: @@ -32,13 +34,12 @@ depending on the blueprint): {% readj example_yaml/simple-appserver-with-location-byon.yaml %} {% endhighlight %} -You'll also note in this example that we've used JSON-style notation in the second `location` block. +Note in this example that we've used JSON-style notation in the second `location` block. YAML supports this, and sometimes that makes more readable plans. -(Although in this case a simple `location: localhost` is equivalent and even more succinct, but this is a tutorial.) - -For more information see the Locations section of the [YAML reference](yaml-reference.html) -and in the [Operations]({{ site.path.guide }}/ops/locations) section of the User Guide. -Another good reference is the [template brooklyn.properties]({{ brooklyn_properties_url_path }}), -which if you install in `~/.brooklyn/brooklyn.properties` and edit with your credentials, -allows you to refer to clouds simply as `location: jclouds:aws-ec2:eu-west-1` or -set up "named locations" you can use as `location: named:my_cloudstack`. +(Although in this case a simple `location: localhost` is equivalent and even more succinct, +but this is a tutorial.) + +For more information see the [Operations: Locations]({{ site.path.guide }}/ops/locations) section of the User Guide. +This includes support for defining locations externally in a [brooklyn.properties]({{ brooklyn_properties_url_path }}) file, +after which you can deploy to clouds or bring-your-own-nodes +simply as `location: jclouds:aws-ec2:eu-west-1` or `location: named:my_cloudstack`. http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/_archive_warning.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/_archive_warning.scss b/docs/style/css/_archive_warning.scss new file mode 100644 index 0000000..5803458 --- /dev/null +++ b/docs/style/css/_archive_warning.scss @@ -0,0 +1,31 @@ +/* ARCHIVE PAGE WARNING + ----------------------------------------------------------------------- */ + +#page_notes { + display: none; + background-color: #4D9D3A; + border: 3px solid orange; + -moz-border-radius: 8px; + border-radius: 8px; + padding: 0.3em; + padding-left: 0.75em; + margin-top: 24px; + margin-bottom: -24px; + + div.warning { + background-color: #F8CB9C; + border: 1px solid #FFAB7C; + padding-left: 0.75em; + -moz-border-radius: 8px; + border-radius: 8px; + } + .warning_banner_image img { + width: 64px; padding-top: 8px; padding-right: 12px; + float: left; + } + p { line-height: 100%; color: white; } + p.warning_banner_buttons {padding-right: 24px; } + p.warning_banner_buttons a, #page_notes p.warning_banner_buttons a:visited { + color: orange; font-weight: bold; padding-right: 1em; text-decoration: none; } + p.warning_banner_buttons a:hover { color: #FFC31E; font-weight: bold; } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/_basic.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/_basic.scss b/docs/style/css/_basic.scss new file mode 100644 index 0000000..d8c9235 --- /dev/null +++ b/docs/style/css/_basic.scss @@ -0,0 +1,62 @@ +/* BASIC STYLES + ----------------------------------------------------------------------- */ +body { + margin: 0px; + padding: 60px 0px 20px 0px; + font-family: $fonts; + font-weight: 300; + font-size: 17px; + background-color: white; + color: $text_color; +} +h1, h2, h3, h4, h5, h6 { font-family: $header_fonts; } +input, select, textarea {} +p, li, label, td, th,input, select, textarea {} +p, input, label, li {} +p { margin: 0.75em 0; line-height: 1.4em;} +form {padding: 0; margin: 0;} +img {border: 0;} + +a {color: $a_color;} +a:hover {text-decoration: none; color: $a_hover_color;} + +.dropdown-menu > li > a { + font-weight: 300; +} +.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger { + text-shadow: none; + font-weight: 300; +} +.btn-default { + color: $gray_66; +} +.panel-heading { + h4 { + padding-bottom: 0px; + margin-bottom: 0px; + padding-top: 8px; + margin-top: 0px; + } +} +.panel-body { + margin: 0px; + font-size: 95%; + color: $gray_66; + padding: 15px; + background-color: $white_fa; + border-radius: 5px; + p:first-child { + margin-top: 0px; + } + p:last-child { + margin-bottom: 0px; + } + > ul, > ol { + margin-left: -1em; + } +} +.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { + // extend bootstrap with a bottom border on table items; + // these get collapsed so not sure why bootstrap does weirdness where there's no bottom border + border-bottom: 1px solid $white_dd; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/_blueprint_tour.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/_blueprint_tour.scss b/docs/style/css/_blueprint_tour.scss new file mode 100644 index 0000000..5fe50fe --- /dev/null +++ b/docs/style/css/_blueprint_tour.scss @@ -0,0 +1,181 @@ +/* YAML EXPLAINED + ----------------------------------------------------------------------- */ + +$explained_code_bg_color: $gray_66; +$explained_code_fg_color: $white_dd; +$explained_code_highlight_bg_color: $vibrant_bg_green; +$explained_code_highlight_fg_color: $white_fa; +$explained_text_highlight_fg_color: $text_color; +$explained_text_highlight_bg_color: $white_fa; + +$code_width: 57%; +$annotation_width: 41%; + +div.annotated_blueprint { + margin-top: 60px; + div.code_scroller { + background-color: $code_bg_color; + border: 0.4em solid $explained_code_bg_color; + border-left: 0; + border-right: 0; + border-radius: 3px; + width: $code_width; + margin-right: 0px; + margin-left: auto; + background-color: $explained_code_bg_color; + color: $explained_code_fg_color; + overflow-x: scroll; + div { + overflow-x: visible !important; + overflow-y: visible !important; + } + div.code_viewer { + width: auto; + height: 100%; + div.block { + @include flex(); + -webkit-align-items: center; + align-items: center; + z-index: -10; + } + div.block > div:last-child { + @include pre(); + border: 0; + border-radius: 0; + padding: 0px 0.6em; + background-color: $explained_code_bg_color; + color: $explained_code_fg_color; + min-width: 100%; + margin-top: 3px; + margin-bottom: 3px; + } + div.block > div.annotations_wrapper1 { + font-family: $fonts; + div.annotations_wrapper2 { + // seems we have to use abs positioning because other techniques + // (translation, negative margins, etc) don't show up outside the scroll-x + position: absolute; + @include transform('translateX(-100%) translateY(-50%)'); + width: $annotation_width; + + @include flex(); + -webkit-align-items: center; + align-items: center; + div.annotations { + // positioning and sizing + height: auto; + width: 100%; + padding: 8px 8px; + padding-bottom: 11px; + color: $explained_text_highlight_fg_color; + + div.short { + font-size: 125%; + text-align: right; + } + div.long { + display: none; + + font-size: 85%; + p { margin: 8px 0 8px 0; } + p:first-child { margin-top: 0; } + p:last-child { margin-bottom: 0; } + } + } + div.connector { + height: 7px; + width: 48px; + } + } + } + div.block:hover > div:last-child { + background-color: $explained_code_highlight_bg_color; + color: $explained_code_highlight_fg_color; + // TODO the bg color doesn't apply to regions which are only visible after a scroll-right :( + // to fix this i think we can us JS to set width of div.block to the width of this, the code last-child + } + div.block:hover { + z-index: 30 !important; + div.annotations_wrapper1 { + z-index: 30 !important; + } + div.annotations { + background-color: $explained_text_highlight_bg_color; + border: 4px solid $explained_code_highlight_bg_color; + border-radius: 8px; + text-align: center; + box-shadow: 2px 10px 20px $gray_aa; + div.short { + font-size: 100% !important; + text-align: center !important; + color: $text_color; + margin-bottom: 8px; + font-weight: normal; + z-index: 10; + } + div.long { display: inherit !important; } + } + div.connector { + border-style: solid; + width: 16px !important; + border-width: 5px 0px 5px 6px; + border-style: solid; + border-color: transparent transparent transparent $explained_code_highlight_bg_color; + } + } + // highlighting of key code segments + div.block > div:last-child .ann_highlight { + font-weight: bold; + color: #e8f0e0; + } + div.block:hover > div:last-child .ann_highlight { + color: #f8fff8; + } + } + } + div.code_viewer:hover { + div.annotations div.short { + color: $gray_aa; + } + } + + // have an initial notice + div.code_scroller { + div.initial_notice { + height: 0; + width: 0; + overflow-x: visible; + overflow-y: visible; + } + div.initial_notice > div { + z-index: 10; + background-color: transparentize($gray_aa, 0.1); + position: relative; + width: 0; + height: 0; + @include flex(); + -webkit-align-items: top; + align-items: top; + } + div.initial_notice > div > div { + padding-top: 24px; + font-size: 125%; + font-weight: bold; + text-align: center; + width: 100%; + .ann_light { + padding-top: 12px; + font-weight: 300; + } + .ann_play { + display: block; + padding-top: 24px; + padding-bottom: 24px; + font-size: 600%; + } + } + } + div.code_scroller:hover div.initial_notice { + display: none; + } +} http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/_code_blocks.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/_code_blocks.scss b/docs/style/css/_code_blocks.scss new file mode 100644 index 0000000..dd39dd8 --- /dev/null +++ b/docs/style/css/_code_blocks.scss @@ -0,0 +1,98 @@ +/* CODE RENDERING + ----------------------------------------------------------------------- */ +@mixin nowrap() { + white-space: pre; + word-wrap: normal; + overflow-y: scroll; +} + +@mixin code() { + font-family: Consolas, Lucida Console, Monaco, monospace; + @include nowrap(); + font-size: 14px; + /* override color and bg-color on 'code' from bootstrap, and a touch more padding on top since font-size is smaller */ + color: $text_color; + background-color: $code_bg_color; +} + +@mixin pre() { + @include code(); + padding: 0.4em 0.8em; + overflow-x: scroll; + /* override border and line-height on 'pre' from bootstrap */ + border: none; + border-radius: 2px; + line-height: 1.4; + font-size: 13px; +} + +pre { + @include pre(); + code { + /* override settings on 'pre code' from bootstrap */ + @include pre(); + line-height: 1; + /** and no padding since pre already has some */ + padding: 0px; + } +} +code { + @include code(); + padding: 4px 4px 2px 4px; + border-radius: 3px; +} +a code { + color: inherit; +} + +.nowrap { @include nowrap(); } + +.highlight { background-color:$code_bg_color; } /* clipboard icon should have the same background color as the code */ + +.highlight .clipboard_button { display: none; } +.highlight:hover .clipboard_button { display: inherit; } +.clipboard_button.zeroclipboard-is-hover { display: inherit; } + +.clipboard_container { float: right; padding: 8px; } +.clipboard_button:before { + // fa-copy + content: "\f0c5"; +} +.clipboard_button { + font-size: 18px; + color: $vibrant_fg_green; + @include transform('translateY(-2px)'); +} +.clipboard_button:hover, .clipboard_button.zeroclipboard-is-hover { + color: $a_hover_color; + cursor: pointer; cursor: hand; +} +.clipboard_button.zeroclipboard-is-active .on-active { + display: inherit; +} +.clipboard_button .on-active { + // z-index often doesn't help here (diff stacking context to the side menu)... but it shouldn't hurt! + z-index: 10; + font-family: $fonts; + display: none; + margin-top: -20px; + height: 0; + width: 0; + overflow-x: visible; + overflow-y: visible; + position: relative; + top: -30px; +} +.clipboard_button .on-active > div { + background-color: $white_dd; + border: 1px solid $gray_aa; + font-size: 75%; + font-weight: normal; + left: -50%; + color: $blackish; + width: auto; + display: inline-block; + @include nowrap(); + padding: 3px 7px; + @include transform('translateX(-50%)'); +} http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/_feature_list.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/_feature_list.scss b/docs/style/css/_feature_list.scss new file mode 100644 index 0000000..32d3913 --- /dev/null +++ b/docs/style/css/_feature_list.scss @@ -0,0 +1,60 @@ + +#content_container .feature-list { + h3 { + border: 1px solid $white_dd; + margin-top: 48px; + padding: 20px 12px 12px 12px; + margin-bottom: 0; + background-color: $white_f5; + border-top-right-radius: 5px; + border-top-left-radius: 5px; + +// from bootstrap for panel +background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); +background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); +filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); +background-repeat: repeat-x; + } +} + +#content_container .feature-item { + padding-bottom: 24px; + margin-bottom: 12px; + font-size: 90%; + p { + margin-top: 6px; + margin-bottom: 0; + } + p:first-child { + margin-top: 0px; + } + img { + max-width: 200px; + border: 1px solid $white_dd; + border-radius: 2px; + } + div.feature-title { + width: 27%; + float: left; + font-weight: 500; + } + div.feature-body { + width: 70%; + margin-left: 30%; + } + div.feature-image { + text-align: center; + margin-top: 8px; + margin-bottom: 8px; + } + + + border: 1px solid $white_dd; + margin-top: -1px; + margin-bottom: 0; + font-size: 90%; + padding: 12px; + padding-top: 8px; + background-color: $white_fa; + +} http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/_footer.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/_footer.scss b/docs/style/css/_footer.scss new file mode 100644 index 0000000..4034de4 --- /dev/null +++ b/docs/style/css/_footer.scss @@ -0,0 +1,36 @@ +/* FOOTER + ----------------------------------------------------------------------- */ + +/* sticky footer */ +html { + position: relative; + min-height: 100%; +} + +@media (min-width: 1200px) { + .slightlyNarrowContainer { + width: 970px; + } +} + +div#footer { + position: absolute; + bottom: 0; + width: 100%; + padding-top: 1em; + padding-bottom: 1em; + background-color: $white_f5; + text-align: center; + font-size: 80%; +} +.octicon-footer { + color: $footer_icon_gray; + font-size: 130%; + position: relative; + top: 2px; + padding-left: 6px; +} +a:hover .octicon-footer { + color: $brooklyn_green; +} + http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/_landing.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/_landing.scss b/docs/style/css/_landing.scss new file mode 100644 index 0000000..baeff39 --- /dev/null +++ b/docs/style/css/_landing.scss @@ -0,0 +1,26 @@ + +/* LANDING PAGE + ----------------------------------------------------------------------- */ + +.jumbotron { + margin-top: 18px; +} + +#apachebrooklynbanner { + background-image: url("../img/apache-brooklyn-logo-817px-wide.png"); + background-repeat: no-repeat; + background-position: center; + width: 817px; + height: 99px; + margin-bottom: 50px; +} + +div.feather.landing { + overflow: visible; + max-height: 10px; + img { + width: 200px; + margin-left: 40px; + margin-top: 0px; + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/_main_container.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/_main_container.scss b/docs/style/css/_main_container.scss new file mode 100644 index 0000000..0ce2fcc --- /dev/null +++ b/docs/style/css/_main_container.scss @@ -0,0 +1,84 @@ + +#content_container { + padding-bottom: 48px; + img { + max-width: 100%; + } +} + + +/* HEADER LINKS + ----------------------------------------------------------------------- */ + +#content_container h1 { + max-width: 95%; + font-variant: normal; + margin-top: -16px; + padding-bottom: 6px; + margin-top: 64px; + margin-bottom: 24px; + border-bottom: 1px dotted $gray_aa; + font-weight: 300; + font-size: 36px; + text-transform: uppercase; +} +h4, h5, h6 { + margin-top: 20px; + margin-bottom: 8px; +} +h5 { + font-size: 18px; + font-weight: 300; +} +h6 { + font-size: 16px; +} + +/* headings get a tooltip showing the permalink URL, a la github jekyll */ +/* install subset of font-awesome */ +@font-face { + font-family: 'FontAwesome'; + src: url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.eot'); + src: url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('#{$style_dir}/deps/font-awesome-4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); + font-weight: normal; + font-style: normal; +} +.fa { + display: inline-block; + font-family: FontAwesome; + font-style: normal; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.fa-link:before { + content: "\f0c1"; +} +.fa-play-circle-o:before { + content: "\f01d"; +} +/* + * This code is courtesy Ben Balter, modified by Parker Moore for jekyllrb.com + * http://ben.balter.com/2014/03/13/pages-anchor-links/ + */ +.header-link { + position: relative; + left: 0.5em; + opacity: 0; + font-size: 0.8em; + +/* not using -- but this is cool! + -webkit-transition: opacity 0.2s ease-in-out 0.1s; + -moz-transition: opacity 0.2s ease-in-out 0.1s; + -ms-transition: opacity 0.2s ease-in-out 0.1s; +*/ +} +h2:hover .header-link, +h3:hover .header-link, +h4:hover .header-link, +h5:hover .header-link, +h6:hover .header-link { + opacity: 1; +} +a.header-literal-anchor { display: inline !important; } http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/_menu.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/_menu.scss b/docs/style/css/_menu.scss new file mode 100644 index 0000000..b63386e --- /dev/null +++ b/docs/style/css/_menu.scss @@ -0,0 +1,201 @@ +/* WEBSITE MENUS + ----------------------------------------------------------------------- */ + +/* top menu bar */ +.navbar-brand { + margin-top: -4px; + margin-left: -30px !important; +} + +@mixin icon($name) { + .icon-#{$name} { + width: 32px; + height: 32px; + background: url('#{$style_dir}/img/'+$name+'-256-black.png'); + background-size: 32px 32px; + } + .icon-#{$name}:hover { + background: url('#{$style_dir}/img/'+$name+'-256-green.png'); + background-size: 32px 32px; + } +} + +.navbar { + @include icon('github'); + @include icon('twitter'); + @include icon('irc'); +} + +.navbar .tooltip .tooltip-inner { + position: relative; + right: 40%; + // include calc for those browsers which support it + right: calc(50% - 25px); + max-width: 300px; +} + +/* special container with sidebar where if sidebar is squeezed + (under "responsiveness") the text keeps at least its "auto" size, + squashing the main container instead */ +.container-and-sidebars { + width: 100%; + @include flex(); +} +.container-between-sidebars { + -webkit-box-flex: 1 100%; + -webkit-flex: 1 100%; + -webkit-flex-flex: 1 100%; + flex: 1 100%; + flex: 10 1 100%; + display: inline-block; + width: auto; + margin-left: auto; + margin-right: auto; +} +.container-sidebar { + -webkit-box-flex: 0 auto; + -webkit-flex: 0 auto; + -webkit-flex-flex: 0 auto; + flex: 0 auto; + flex: 0 0 auto; +} +.container-sidebar-right { + @extend .container-sidebar; + text-align: left; + padding-right: 10px; +} +.container-sidebar-left { + @extend .container-sidebar; + text-align: right; + padding-left: 10px; +} + +@media (min-width: 768px) { + .container-sidebar { min-width: calc((100% - 750px)/2); } +} +@media (min-width: 992px) { + .container-sidebar { min-width: calc((100% - 970px)/2); } +} +@media (min-width: 1200px) { + .container-sidebar { min-width: calc((100% - 1170px)/2); } +} + + +.navbar-feather { + padding-top: 12px; + margin-right: -6px; +} +.navbar-sidebar-right-icons { + padding-top: 10px; + margin-left: -6px; + white-space: nowrap; + a { + display: inline-block; + width: 32px; + height: 32px; + } +} +.navbar-icon-shift { margin-right: -2px; } + +.navbar div.dropdown_section_header hr { + margin: 4px 12px; + border-color: $white_dd; +} + +.navbar div.dropdown_new_section hr { + margin: 6px 0px; + border-color: $white_dd; +} + +/* pop-up top-menu */ +.navbar-default .navbar-nav > li > a:hover, +.navbar-default .navbar-nav > li > a:focus, +.navbar-default .navbar-nav > .active > a:hover, +.navbar-default .navbar-nav > .active > a:focus { + background-color: $white_f5; + color: $brooklyn_green; +} +.top-menu { + font-size: 14px; + font-weight: 400; + .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { + background-color: $white_f5; + background-image: none; + color: $brooklyn_green; + } + ul.nav li.dropdown:hover > ul.dropdown-menu { + display: block; + } +} + +/* side menu */ +.side-menu { + font-family: Avenir, $fonts; + font-size: 14px; + font-weight: 400; + position: fixed; + h4.with_following { + margin-bottom: 0; + } + h4.with_preceding { + margin-top: 0; + } + h4.with_following a { + border-bottom-right-radius: 0 !important ; + border-bottom-left-radius: 0 !important ; + border-bottom: 0; + } + h4.with_preceding a { + border-top-right-radius: 0; + border-top-left-radius: 0; + border-top: 0; + } + a, a.breadcrumb.breadcrumb0 { padding-left: 15px; padding-top: 8px; padding-bottom: 6px; } + a.breadcrumb.breadcrumb1 { padding-left: 30px; } + a.breadcrumb.breadcrumb2 { padding-left: 45px; } + a.breadcrumb.breadcrumb3 { padding-left: 60px; } + /* further crumbs all get the same */ + a.breadcrumb { padding-left: 70px; } + + div.sub-item { + background-color: $bootstrap_theme_green_gradient_lower; + border-left: 1px solid $bootstrap_blue_border; + } + div.sub-item:last-child { + border-bottom: 1px solid $white_dd; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + } + div.sub-item:last-child a.sub-item:last-child { + border-bottom-right-radius: 4px !important; + } + a.with-sub-item { + /* border-bottom: 1px solid $white_dd; */ + border-bottom: 0; + } + a.sub-item { + border-radius: 0 !important; + border-bottom: 0; + margin-left: 12px; + padding-left: 10px; + padding-top: 8px; + padding-bottom: 8px; + } + a.sub-item.list-group-item.active { + background-color: $white_f5; + // the below is needed to achieve the above, since bg-image is already set + background-image: -webkit-linear-gradient(top, $white_f5 0%, $white_f5 100%); + background-image: linear-gradient(to bottom, $white_f5 0%, $white_f5 100%); + + border-color: $white_dd; + color: $text_color; + text-shadow: none; + // not sure why the bottom border is visible at all, and stays on hover, but vanishes on 'active'; + // but this sorts it out (taking 1 away from padding) + margin-bottom: 0; + padding-bottom: 7px; + } + a.sub-item.list-group-item.active:hover { + color: $a_hover_color; + } +} http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/_search.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/_search.scss b/docs/style/css/_search.scss new file mode 100644 index 0000000..21ef97f --- /dev/null +++ b/docs/style/css/_search.scss @@ -0,0 +1,29 @@ +/* SEARCH + ----------------------------------------------------------------------- */ + +div.search_right { + float: right; + @include transform('translateY(-12px)'); + padding-right: 5%; + padding-bottom: 18px; + font-size: 75%; + .searchform { + width: 240px; + margin: 0; + padding: 5px 5px 0 0; + overflow: hidden; + text-align: right; + } + .searchinput { + width: 227px; + background: #ffffff; + border: 1px solid #b1b7c2; + -moz-border-radius: 2px; + border-radius: 2px; + color: #c8ccd5; + padding: 3px; + } + .searchinput:focus { + color: $blackish; + } +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/_tooltips.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/_tooltips.scss b/docs/style/css/_tooltips.scss new file mode 100644 index 0000000..11dee6a --- /dev/null +++ b/docs/style/css/_tooltips.scss @@ -0,0 +1,14 @@ +/* TOOLTIPS + ----------------------------------------------------------------------- */ + +.tooltip .tooltip-inner { + color: $text_color; + background-color: $white_dd; + font-weight: 500; +} +.tooltip.top .tooltip-arrow { + border-top-color: $white_dd; +} +.tooltip.bottom .tooltip-arrow { + border-bottom-color: $white_dd; +} http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/_util.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/_util.scss b/docs/style/css/_util.scss new file mode 100644 index 0000000..b6d4b44 --- /dev/null +++ b/docs/style/css/_util.scss @@ -0,0 +1,27 @@ +/* GENERAL UTILS + ----------------------------------------------------------------------- */ + +@mixin flex() { + display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ + display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ + display: -ms-flexbox; /* TWEENER - IE 10 */ + display: -webkit-flex; /* NEW - Chrome */ + display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ +} + +@mixin transform($tfn) { + -webkit-transform: #{$tfn}; + -moz-transform: #{$tfn}; + -o-transform: #{$tfn}; + transform: #{$tfn}; +} + +@mixin flip() { + filter: FlipH; + @include transform('scaleX(-1)'); + -ms-filter: "FlipH"; +} + +.flip { + @include flip; +} http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/base.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/base.scss b/docs/style/css/base.scss deleted file mode 100644 index a585100..0000000 --- a/docs/style/css/base.scss +++ /dev/null @@ -1,307 +0,0 @@ ---- ---- - -{% include base-scss.scss %} - -/* BASIC STYLES - ----------------------------------------------------------------------- */ -body { - margin: 0px; - padding: 10px 0px 20px 0px; - font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 300; - font-size: 17px; - background-color: #ffffff; - color: $text_color; -} -h1, h2, h3, h4, h5, h6 {} -input, select, textarea {} -p, li, label, td, th,input, select, textarea {} -p, input, label, li {} -p { margin: 0.75em 0; line-height: 1.4em;} -form {padding: 0; margin: 0;} -img {border: 0;} - -a {color: $a_color;} -a:hover {text-decoration: none; color: $a_hover_color;} - -/* Offset link anchors so they are not hidden by the header */ -a[id]:empty, a[name]:empty { - padding-top: 60px; - margin-top: -60px; - display: block; -} -.dropdown-menu > li > a { - font-weight: 300; -} - - -/* WEBSITE MENUS - ----------------------------------------------------------------------- */ - -/* top menu bar */ -.navbar-brand { - margin-top: -4px; - margin-left: -30px !important; -} - -@mixin icon($name) { - .icon-#{$name} { - width: 32px; - height: 32px; - background: url('{{ site.path.style }}/img/'+$name+'-256-black.png'); - background-size: 32px 32px; - } - .icon-#{$name}:hover { - background: url('{{ site.path.style }}/img/'+$name+'-256-green.png'); - background-size: 32px 32px; - } -} - -.navbar { - @include icon('github'); - @include icon('twitter'); - @include icon('irc'); -} - -/* special container with sidebar where if sidebar is squeezed - (under "responsiveness") the text keeps at least its "auto" size, - squashing the main container instead */ -.container-and-sidebars { - width: 100%; - display: flex; -} -.container-between-sidebars { - flex: 10 1 100%; - display: inline-block; - width: auto; - margin-left: auto; - margin-right: auto; -} -.container-sidebar { - flex: 0 0 auto; -} -.container-sidebar-right { - @extend .container-sidebar; - text-align: left; - padding-right: 10px; -} -.container-sidebar-left { - @extend .container-sidebar; - text-align: right; - padding-left: 10px; -} - -@media (min-width: 768px) { - .container-sidebar { min-width: calc((100% - 750px)/2); } -} -@media (min-width: 992px) { - .container-sidebar { min-width: calc((100% - 970px)/2); } -} -@media (min-width: 1200px) { - .container-sidebar { min-width: calc((100% - 1170px)/2); } -} - - -.navbar-feather { - padding-top: 12px; - margin-right: -6px; -} -.navbar-sidebar-right-icons { - padding-top: 10px; - margin-left: -6px; - white-space: nowrap; - a { - display: inline-block; - width: 32px; - height: 32px; - } -} -.navbar-icon-shift { margin-right: -2px; } - -.navbar div.dropdown_section_header hr { - margin: 4px 12px; - border-color: #ddd; -} - -.navbar div.dropdown_new_section hr { - margin: 6px 0px; - border-color: #ddd; -} - -/* pop-up top-menu */ -.navbar-default .navbar-nav > li > a:hover, -.navbar-default .navbar-nav > li > a:focus, -.navbar-default .navbar-nav > .active > a:hover, -.navbar-default .navbar-nav > .active > a:focus { - background-color: #f5f5f5; - color: $brooklyn_green; -} -.top-menu { - font-size: 14px; - font-weight: 400; - .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { - background-color: #f5f5f5; - background-image: none; - color: $brooklyn_green; - } - ul.nav li.dropdown:hover > ul.dropdown-menu { - display: block; - } -} - -/* side menu */ -.side-menu { - font-size: 14px; - font-weight: 400; - h4.with_following { - margin-bottom: 0; - } - h4.with_preceding { - margin-top: 0; - } - h4.with_following a { - border-bottom-right-radius: 0 !important ; - border-bottom-left-radius: 0 !important ; - border-bottom: 0; - } - h4.with_preceding a { - border-top-right-radius: 0; - border-top-left-radius: 0; - border-top: 0; - } - a, a.breadcrumb.breadcrumb0 { padding-left: 15px; } - a.breadcrumb.breadcrumb1 { padding-left: 30px; } - a.breadcrumb.breadcrumb2 { padding-left: 45px; } - a.breadcrumb.breadcrumb3 { padding-left: 60px; } - /* further crumbs all get the same */ - a.breadcrumb { padding-left: 70px; } - - div.sub-item { - background-color: #48a648; - border-left: 1px solid #428bca; - /* - border-bottom: 1px solid #428bca; - border-top: 1px solid #428bca; - border-right: 1px solid #428bca; - */ - /* - padding-bottom: 6px; - padding-right: 6px; - */ - } - div.sub-item:last-child { - border-bottom: 1px solid #ddd; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - } - div.sub-item:last-child a.sub-item:last-child { - border-bottom-right-radius: 4px !important; - } - a.with-sub-item { - /* border-bottom: 1px solid #ddd; */ - border-bottom: 0; - } - a.sub-item { - border-radius: 0 !important; - border-bottom: 0; - margin-left: 12px; - padding-left: 10px; - padding-top: 8px; - padding-bottom: 8px; - } -} - - -/* FOOTER - ----------------------------------------------------------------------- */ - -/* sticky footer */ -html { - position: relative; - min-height: 100%; -} - -@media (min-width: 1200px) { - .slightlyNarrowContainer { - width: 970px; - } -} - -#footer { - position: absolute; - bottom: 0; - width: 100%; - /* Set the fixed height of the footer here */ - padding-top: 1em; - padding-bottom: 1em; - background-color: #f5f5f5; - text-align: center; -} - - -/* CODE RENDERING - ----------------------------------------------------------------------- */ -@mixin nowrap() { - white-space: pre; - word-wrap: normal; - overflow-y: scroll; -} - -pre { - font-family: Consolas, Lucida Console, Monaco, monospace; - @include nowrap(); - background-color:$code_bg_color; - padding: 0.4em 0.8em; - overflow-x: scroll; - font-size: 85%; - /* override border and line-height on 'pre' from bootstrap */ - border: none; - border-radius: 2px; - line-height: 1; - code { - /* override settings on 'pre code' from bootstrap */ - font-size: 85%; - line-height: 1; - @include nowrap(); - /** and no padding since pre already has some */ - padding: 0px; - } -} -code { - font-family: Consolas, Lucida Console, Monaco, monospace; - font-size: 85%; - /* override color and bg-color on 'code' from bootstrap, and a touch more padding on top since font-size is smaller */ - color: black; - background-color:$code_bg_color; - padding: 4px 4px 2px 4px; - border-radius: 3px; -} -.highlight { background-color:$code_bg_color; } /* clipboard icon should have the same background color as the code */ - -.nowrap { @include nowrap(); } - -/* LANDING PAGE - ----------------------------------------------------------------------- */ - -#apachebrooklynbanner { - background-image: url("../img/apache-brooklyn-logo-817px-wide.png"); - background-repeat: no-repeat; - background-position: center; - width: 817px; - height: 99px; - margin-bottom: 50px; -} - -@mixin flip() { - transform: scaleX(-1); - filter: FlipH; - -webkit-transform: scaleX(-1); - -moz-transform: scaleX(-1); - -o-transform: scaleX(-1); - -ms-filter: "FlipH"; -} - -.flip { - @include flip; -} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/guide-toc.css ---------------------------------------------------------------------- diff --git a/docs/style/css/guide-toc.css b/docs/style/css/guide-toc.css deleted file mode 100644 index be38a11..0000000 --- a/docs/style/css/guide-toc.css +++ /dev/null @@ -1,88 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. -*/ - - -#sidebar_toc { padding-top: 6px; } -#sidebar_toc a { text-decoration: none; } - -#sidebar_toc div.toc-1 { padding: 8px; margin: 4px 0px 0px 0px; } -#sidebar_toc div.toc-1-item {text-transform: uppercase; font-size: 12px; color: #111111; margin: 15px 0 5px 0;} -#sidebar_toc div.toc-1-item.toc-1-header { margin: 0px 0px 2px 0px; } -#sidebar_toc div.toc-1-item:hover { color: #003800; } - -#sidebar_toc div.toc-2-item { color: #282; padding-top: 3px; } -#sidebar_toc div.toc-2-item:hover { color: #010; } - -#sidebar_toc div.toc-1.toc-active { background: #C6D0D8; border-radius: 5px; } -#sidebar_toc div.toc-1.toc-active div.toc-1-item { color: #222; } -#sidebar_toc div.toc-2.toc-active div.toc-2-item { font-weight: bold; } -#sidebar_toc div.toc-3.toc-active div.toc-3-item { font-weight: bold; } - -/* level 3 menu is displayed in the list, indented, if parent is active */ -#sidebar_toc div.toc-2.toc-active div.toc-2-children { margin: 2px 0px 3px 0px; } -#sidebar_toc div.toc-2.toc-active div.toc-3-item { - padding: 1px 0px 1px 12px; -} -#sidebar_toc div.toc-2.toc-active div.toc-3-item:hover { color: #060; } - -/* otherwise level 3 menu is popup */ -#sidebar_toc div.toc-2:not(.toc-active) div.toc-3-item { color: #262; background: #C6D0D8; - text-align: right; padding: 2px 6px 2px 6px; - border-width: 1px; border-style: solid; border-radius: 0px; border-color: #464; -} -#sidebar_toc div.toc-2:not(.toc-active) div.toc-3-item:hover { color: #030; border-color: #353; background: #e8eded; } - -#sidebar_toc div.toc-2:not(.toc-active) div.toc-2-children-popup { - display: none; -} -#sidebar_toc div.toc-2:not(.toc-active):hover div.toc-2-children-popup { - display: block; - position: relative; - height: 0px; -/* right: -180px; to make appear at right */ - left: -158px; - width: 180px; - top: -17px; -} -#sidebar_toc div.toc-2:not(.toc-active) div.toc-2-children { - display: block; - width: 160px; - padding: 0px 10px 0px 10px; -} - -/* old -.ui-accordion { font-size: 90% } -.ui-accordion .left-menu-body { - padding: 0; - overflow:hidden; -} -.ui-accordion .toc1 { margin: 14px 0px 0px 0px; } - -#sidebar_toc .toc1 { background: #f8f8f8; } -#sidebar_toc .toc2 { background: #f0f0f0; } -#sidebar_toc .toc3 { background: #e8e8e8; padding: 0px 0px 0px 20px; } - -#sidebar_toc .ui-accordion-header-active { background: #d8d8d8; } - -#sidebar_toc .toc-active { background: #68aa70; } -#sidebar_toc .toc-active a { color: #103010; } - -#sidebar_toc .ui-state-hover { background: #c8d0c8; } -*/ - http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/guide.css ---------------------------------------------------------------------- diff --git a/docs/style/css/guide.css b/docs/style/css/guide.css deleted file mode 100644 index 6cfa2d0..0000000 --- a/docs/style/css/guide.css +++ /dev/null @@ -1,119 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. -*/ -/* -Brooklyn minisite -*/ - -/*ACCESSIBILITY*/ -#shortcuts {display: block; position: absolute; top: -100px; z-index: 0} -#shortcuts a {padding: 0 0.5em; left: 0; z-index: 0} -#shortcuts a:focus, #shortcuts a:active {display: inline; z-index: 2; background-color: #ffff00; color: #000000; text-decoration: none; position: absolute; top: 100px;} - -/* STRUCTURE */ -#container {width: 980px; padding: 0; margin: 0 auto;} -#contentcontainer {clear: both; width: 980px; overflow: hidden;} -#maincontent {width: 710px; float: left; padding: 10px 0px 25px 10px; background-color: #ffffff;} -#sidebar {width: 155px; float: right; background: #ffffff url(../img/bridge.png) no-repeat 0 12px; padding: 112px 5px 20px 0;} - -/* HEADER */ -#header {padding: 0;} -#identity {float: left; margin: 0; padding: 30px 0 15px 10px;} -#identity a {text-decoration: none; display: block; margin: 0; color: #4d9d3a; font-size: 2.5em; padding: 0; background: transparent url(../img/brooklyn.gif) no-repeat 0 0; width: 206px; height: 44px; text-indent: -1000px; overflow: hidden;} -.searchform {float: right; width: 160px; margin: 0; padding: 5px 5px 0 0; overflow: hidden; text-align: right;} -.searchinput { - width: 147px; - padding: 3px; - color: #c8ccd5; - background: #ffffff; - border: 1px solid #b1b7c2; - -moz-border-radius: 5px; border-radius: 5px; - font: -webkit-small-control; -} -.searchinput:focus {color: #333333;} - -/*MENUS*/ -#header #quicklinks {float: right; list-style: none; margin: 0; padding: 0 10px 0 0;} -#header #quicklinks li {margin: 0; padding: 0 5px 0 7px; text-transform: uppercase; font-size: 10px; float: left; background: #ffffff url(../img/divider-quicklinks.gif) no-repeat left center;} -#header #quicklinks li:first-child {background-image: none;} -#header #quicklinks a {text-decoration: none; color: #4f8243;} -#menubar {clear: both; width: 978px; height: 36px; background-color: #e8eded; border: 1px solid #d5dade; -moz-border-radius: 8px; border-radius: 8px;} -#mainmenu {list-style: none; margin: 0; padding: 4px 0 0 2px; width: 765px; display: block; float: left; font-size: 15px;} -#mainmenu li {float: left; position: relative; margin: 0; padding: 0; } -#mainmenu>li {border: 1px solid transparent; border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-bottom: 0;} -#mainmenu a {display: block; text-decoration: none; color: #508243;} -#mainmenu>li>a {padding: 0 8px 5px 8px; line-height: 25px;} -#mainmenu>li:hover {background-color: #ffffff; border: 1px solid #dbe0e4; border-bottom: 0;} -#mainmenu .current a {color: #838a8b;} -#mainmenu ul {display: none; position: absolute; top: 30px; left: -1px; float: left; background-color: #f5f5f5; border: 1px solid #dbe0e4; border-top: 0; list-style: none; margin: 0; padding: 5px; width: 185px;} -#mainmenu ul ul {left: 100%; margin-left: 6px; top: -1px; border-top: 1px solid #dbe0e4;} -#mainmenu ul li {width: 183px; padding: 0; border: 1px solid transparent;} -#mainmenu ul li:hover {border: 1px solid #dbe0e4; background-color: #ffffff;} -#mainmenu ul a {font-size: 14px; padding: 7px;} -#mainmenu li:hover > ul, #mainmenu li.sfHover > ul {display: block;} - -/* MAIN CONTENT */ -#breadcrumb {font-size: 12px; margin: 0 0 2em 0; color: #636363;} -#breadcrumb a {color: #636363; text-decoration: none;} -#breadcrumb a:hover {color: #636363; text-decoration: underline;} -#breadcrumb span {color: #9e9e9e;} -#maincontent ul {margin: 0.75em 0; padding: 0 0 0 25px;} -#maincontent li {line-height: 1.5em; margin: 0 0 0.25em 0; padding: 0;} -table {width: 100%; border: 1px solid #dbe0e4; border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px;} -th, td {text-align: center; padding: 5px;} -th {background-color: #f2f3f5; font-weight: bold; color: #121212; border-right: 1px solid #dbe0e4;} -td {border-top: 1px solid #dbe0e4; border-right: 1px solid #dbe0e4; padding: 5px;} -th:last-child, td:last-child {border-right: 0;} - -/* PAGE ELEMENTS */ -div.warning{ - background-color: #F8CB9C; - border: 1px solid #FFAB7C; - padding-left: 0.75em; - -moz-border-radius: 8px; - border-radius: 8px; -} -#page_notes{ - display: none; - background-color: #4D9D3A; - border: 3px solid orange; - -moz-border-radius: 8px; - border-radius: 8px; - padding: 0.3em; - padding-left: 0.75em; - margin-top: -0.5em; - margin-bottom: 1em; -} -#page_notes .warning_banner_image img { - width: 64px; padding-top: 8px; padding-right: 12px; - float: left; -} -#page_notes p { line-height: 100%; color: white; } -#page_notes p.warning_banner_buttons {padding-right: 24px; } -#page_notes p.warning_banner_buttons a, #page_notes p.warning_banner_buttons a:visited { - color: orange; font-weight: bold; padding-right: 1em; text-decoration: none; } -#page_notes p.warning_banner_buttons a:hover { color: #FFC31E; font-weight: bold; } - - -/* SIDEBAR */ -#sidebar {font-size: 13px;} -#sidebar h2 {text-transform: uppercase; font-size: 12px; color: #111111; margin: 15px 0 5px 0;} -#sidebar ul {list-style: none; margin: 0; padding: 0;} -#sidebar li {margin: 0 0 5px; padding: 0;} -#sidebar li a {text-decoration: none;} -#sidebar li a:hover {text-decoration: underline;} http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/javadoc.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/javadoc.scss b/docs/style/css/javadoc.scss new file mode 100644 index 0000000..204c8a9 --- /dev/null +++ b/docs/style/css/javadoc.scss @@ -0,0 +1,119 @@ +--- +--- + +{% include base-scss.scss %} + +@import 'util'; +@import 'basic'; +@import 'tooltips'; +@import 'code_blocks'; + +body { + padding: 0; + font-size: 100%; +} + +.title { color: $blackish; } + +a, a:link, a:visited { color: $a_color; } +a:hover, a:link:hover, a:visited:hover { color: $a_hover_color; } + +.indexContainer, td { + a, a:link, a:visited { color: darken($a_color, 20%); } +} + + +.topNav, .bottomNav, .bar { + background-image: -webkit-linear-gradient(top, darken($bootstrap_theme_green_gradient_upper, 10%) 0%, darken($bootstrap_theme_green_gradient_lower, 10%) 100%); + background-image: linear-gradient(to bottom, darken($bootstrap_theme_green_gradient_upper, 10%) 0%, darken($bootstrap_theme_green_gradient_lower, 10%) 100%); + a:hover, a:link:hover, a:visited:hover { color: lighten($a_hover_color, 10%); } +} + +.topNav { + height: inherit; + padding-bottom: 6px; +} +.topNav .aboutLanguage .brooklyn-header { + font-family: $header_fonts; + font-weight: bold; + font-size: 140%; + img { margin-top: 8px; } +} +.bar .brooklyn-header .img { + display: none; +} +.brooklyn-header .img { + background-image: url('feather.png'); + background-size: contain; + width: 50px; + height: 15px; + margin-left: 8px; + margin-top: 8px; + display: inline-block; +} + +.bottomNav .aboutLanguage { + margin-top: 0; +} + +.subNav div { + padding: 0; +} + +// sub-nav items seem to need extra indent +ul.subNavList li:first-child { + padding-left: 6px; +} +ul.subNavList li { + padding-top: 1px; + padding-bottom: 1px; +} + +// there is so much code we don't want special treatment for it +code { + font-size: 100%; + background-color: inherit; + padding: 0; + word-wrap: normal; + whitespace: inherit; +} + +// tabs +.overviewSummary caption span, .packageSummary caption span, .contentContainer ul.blockList li.blockList caption span, .summary caption span, .classUseContainer caption span, .constantValuesContainer caption span { + padding-top: 5px; + padding-bottom: 3px; +} +.overviewSummary .tabEnd, .packageSummary .tabEnd, .contentContainer ul.blockList li.blockList .tabEnd, .summary .tabEnd, .classUseContainer .tabEnd, .constantValuesContainer .tabEnd { + width: 0; +} + +// package +.subTitle { + margin-bottom: -6px; + font-family: $header_fonts; + font-weight: normal; + font-style: italic; + font-size: 125%; +} +.subTitle .block { + margin-top: 6px; + margin-bottom: 24px; + font-style: normal; + + p { + font-family: $fonts; + font-style: normal; + font-weight: 300; + font-size: 90%; + } +} +.footer .subTitle .block { + margin-top: 18px; + font-weight: bold; + p { + font-weight: 300; + } +} +.header .subTitle .block { + font-weight: 300; +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/css/website.scss ---------------------------------------------------------------------- diff --git a/docs/style/css/website.scss b/docs/style/css/website.scss new file mode 100644 index 0000000..0698d46 --- /dev/null +++ b/docs/style/css/website.scss @@ -0,0 +1,20 @@ +--- +--- + +{% include base-scss.scss %} + +$style_dir: {{ site.path.style }}; + +@import 'util'; +@import 'basic'; +@import 'tooltips'; +@import 'code_blocks'; +@import 'menu'; +@import 'search'; +@import 'footer'; +@import 'main_container'; + +@import 'archive_warning'; +@import 'landing'; +@import 'blueprint_tour'; +@import 'feature_list'; http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/8560033d/docs/style/deps/font-awesome-4.2.0/_LICENSE ---------------------------------------------------------------------- diff --git a/docs/style/deps/font-awesome-4.2.0/_LICENSE b/docs/style/deps/font-awesome-4.2.0/_LICENSE new file mode 100644 index 0000000..f912922 --- /dev/null +++ b/docs/style/deps/font-awesome-4.2.0/_LICENSE @@ -0,0 +1 @@ +License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
