mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-01-10 18:58:40 +00:00
bump
This commit is contained in:
Dennis Eichhorn
parent
bda4fd3a78
commit
85ef1f8ccb
12
.github/FUNDING.yml
vendored
12
.github/FUNDING.yml
vendored
|
|
@ -1,12 +0,0 @@
|
|||
# These are supported funding model platforms
|
||||
|
||||
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
|
||||
patreon: # orange_management
|
||||
open_collective: # Replace with a single Open Collective username
|
||||
ko_fi: # Replace with a single Ko-fi username
|
||||
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
|
||||
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
|
||||
liberapay: # Replace with a single Liberapay username
|
||||
issuehunt: # Replace with a single IssueHunt username
|
||||
otechie: # Replace with a single Otechie username
|
||||
custom: ['https://paypal.me/orangemgmt']
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
# Contributor Covenant Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment include:
|
||||
|
||||
* Using welcoming and inclusive language
|
||||
* Being respectful of differing viewpoints and experiences
|
||||
* Gracefully accepting constructive criticism
|
||||
* Focusing on what is best for the community
|
||||
* Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
* The use of sexualized language or imagery and unwelcome sexual attention or advances
|
||||
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
* Public or private harassment
|
||||
* Publishing others' private information, such as a physical or electronic address, without explicit permission
|
||||
* Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at spl1nes.com@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
|
||||
|
||||
[homepage]: http://contributor-covenant.org
|
||||
[version]: http://contributor-covenant.org/version/1/4/
|
||||
196
CONTRIBUTING.md
196
CONTRIBUTING.md
|
|
@ -1,196 +0,0 @@
|
|||
## Development environment
|
||||
|
||||
The setup and configuration of the development environment is in the hands of every developer themselves. However, it is recommended to follow the setup instructions in the [Developer-Guide](https://github.com/Karaka-Management/Developer-Guide/blob/develop/general/setup.md).
|
||||
|
||||
## Code of conduct
|
||||
|
||||
Every organization member and contributor to the organization must follow the [Code of Conduct](../Policies%20&%20Guidelines/Code%20of%20Conduct.md).
|
||||
|
||||
## Becoming a contributor
|
||||
|
||||
For public repositories you can immediately start by creating forks and pull requests. For private repositories which are necessary to setup the complete developer environment, feel free to request access. Please not that we may not immediately give you access to private repositories and instead will give you smaller tasks regarding public repositories. Please contact info@jingga.app for more details. (**R1**)
|
||||
|
||||
For all contributions our [Contributor License Agreement "CLA"](https://github.com/Karaka-Management/Organization-Guide/blob/master/Processes/HR/Hiring/Individual%20Contributor%20License%20Agreement.md) comes into effect. (**R2**)
|
||||
|
||||
## Code changes
|
||||
|
||||
### Topics / Tasks / Todos
|
||||
|
||||
Generally, the development philosophy is result orientated. This means that anyone can propose tasks, pick up existing tasks or right away implement their code changes. However, implementing code changes without consulting with a senior developer in advance has a much higher risk of code changes not getting admitted. The easiest way to discuss a code change idea in advance are the github [issues](https://github.com/Karaka-Management/Karaka/issues) or [discussions](https://github.com/Karaka-Management/Karaka/discussions).
|
||||
|
||||
Developers are encouraged to pick open tasks with high priorities according to their own skill level. Senior developers may directly assign tasks to developers based on their importance. New developers may find it easier to start with a task that has a low priority as they often also have a lower difficulty.
|
||||
|
||||
Open tasks can be found in the project overview: [Todos](https://github.com/orgs/Karaka-Management/projects/10)
|
||||
|
||||
Tasks currently in development are prefixed in the priority column with an asterisk `*` and a name tag in the task description of the developer who is working on the task.
|
||||
|
||||
The open tasks are reviewed once a month by a senior developer. The senior developer updates the project overview if necessary and requests feedback regarding development status of important tasks under development. During this process important tasks may also get directly assigned to developers. This review is performed on a judgmental bases of the senior basis.
|
||||
|
||||
### Quality
|
||||
|
||||
#### Code style
|
||||
|
||||
Code changes must follow the [style guidelines](https://github.com/Karaka-Management/Developer-Guide/tree/develop/standards) (**R3**). Additionally, the automatic code style inspection tools must return no errors, failures or warnings. Developers should test their changes with inspection tools and configurations mentioned in the [inspection documentation](https://github.com/Karaka-Management/Developer-Guide/blob/develop/quality/inspections.md) in advance before submitting them for review. (**R4**)
|
||||
|
||||
In rare cases errors, failures or warnings during the automatic inspection are acceptable. Reasons can be for example special cases which are difficult automatize or must be individually configured in the inspection settings. If this is the case for a code change and if inspection configuration changes are necessary are decided by the senior developer performing the code review. (**R5**)
|
||||
|
||||
Automated checks which are run during the review process (**R4**):
|
||||
|
||||
```sh
|
||||
php ./vendor/bin/phpcs ./ --standard="Build/Config/phpcs.xml"
|
||||
php ./vendor/bin/php-cs-fixer fix ./ --config=Build/Config/.php-cs-fixer.php --allow-risky=yes
|
||||
php ./vendor/bin/phpcbf --standard=Build/Config/phpcs.xml ./
|
||||
php ./vendor/bin/rector process --dry-run --config Build/Config/rector.php ./
|
||||
npx eslint ./ -c ./Build/Config/.eslintrc.json
|
||||
```
|
||||
|
||||
#### Tests
|
||||
|
||||
Code changes must follow the inspection guidelines (i.e. code coverage) mentioned in the [inspection documentation](https://github.com/Karaka-Management/Developer-Guide/blob/develop/quality/inspections.md) (**R6**). Developers should test their changes with inspection tools and configurations mentioned in the [inspection documentation](https://github.com/Karaka-Management/Developer-Guide/blob/develop/quality/inspections.md) in advance before submitting them for review. (**R7**)
|
||||
|
||||
In rare cases it might be not possible to follow the inspection guidelines. In such cases the senior developer performing the code review may decide if the code change still gets accepted. (**R8**)
|
||||
|
||||
Automated tests which are run during the review process (**R7**):
|
||||
|
||||
```sh
|
||||
php ./vendor/bin/phpunit -c tests/PHPUnit/phpunit_default.xml
|
||||
php ./vendor/bin/phpstan analyse --no-progress -l 9 -c Build/Config/phpstan.neon ./
|
||||
npx jasmine-node ./
|
||||
./cOMS/tests/test.sh
|
||||
```
|
||||
|
||||
Additional inspections which are run but might be ignored during the review depending on the use case are mentioned in the [inspection documentation](https://github.com/Karaka-Management/Developer-Guide/blob/develop/quality/inspections.md) as other checks. (**R7**)
|
||||
|
||||
#### Performance
|
||||
|
||||
Developers should occasionaly check performance statistics. At this point no target metrics are defined.
|
||||
|
||||
Since the primary application is a web based application a similar tool as the Google lighthouse tool can be used to inspect the application for best practicies which can significantly improve the application performance. The sitespeed.io tool shows potential performance improvements and slow pages. With the php trace and profiler enabled in the `php.ini` file the VM automatically generates profiling and trace reports for every web request. These can be found in the webgrind logs directory and inspected in webgrind and dropped into the trace visualizer for a flame chart visualization. With mysqldumpslow you can inspect slow sql queries which may need optimization.
|
||||
|
||||
1. Automatic trace and benchmark generation with every web request in `/var/www/html/webgrind/Logs`
|
||||
2. Webgrind view `http://vm_ip:82`
|
||||
3. Trace visualization `http://vm_ip:81`
|
||||
1. Download the latest trace from `http://vm_ip:82/Logs`
|
||||
2. Drag and drop that downloaded `*.xt` file in the trace visualizer
|
||||
4. `sitespeed.io ./Build/Helper/Scripts/sitespeedDemoUrls.txt -b chrome --outputFolder /var/www/html/sitespeed`
|
||||
5. Slow query inspection.
|
||||
|
||||
```sh
|
||||
mysqldumpslow -t 10 /var/log/mysql/mysql-slow.log
|
||||
mysqldumpslow -t 10 -s l /var/log/mysql/mysql-slow.log
|
||||
```
|
||||
|
||||
#### Code review
|
||||
|
||||
In addition to the automatic code review performed by the various inspection tools such as (phpcs, phpstan, phpunit, eslint and custom scripts) a senior developer must check the proposed code change before it is merged with the respective `develop` branch. Only upon the approval by the reviewer a code change requests gets merged as no other developers have permission in the software to make such code merges.
|
||||
|
||||
In case a code change request is not approved the reviewer states the reason for the decision, this may include some tips and requests which will allow the contributor to make improvements so that the code change may get approved.
|
||||
|
||||
If the code reviewer only finds minor issues with the proposed code change the reviewer may make small changes to the proposed code change and inform the contributor to speed up the implementation process. Code reviewers are encouraged to do this with new contributors to avoid long iteration processes and to not discourage new developers. However, communication is key and severe issues with code change requests or if the contributor already made multiple code change requests in the past the reviewer should not implement the improvements by himself and rather decline the code change requests with his reasoning. (**R5**+**R8**)
|
||||
|
||||
#### Demo
|
||||
|
||||
Some code changes may also require changes or extensions in the demo setup scripts. The demo setup script try to simulate a real world use case by generating and modifying mostly random data. This is also a good way to setup and “manually” test the code changes in a larger picture. The demo setup script can be found in the [demoSetup](https://github.com/Karaka-Management/demoSetup) repository. The demo setup script takes a long time due to the large amount of user input simulated data which is generated. Therefore it is recommended to run this only sporadically. (**R9**)
|
||||
|
||||
```sh
|
||||
sudo -u www-data php -dxdebug.remote_enable=1 -dxdebug.start_with_request=yes -dxdebug.mode=coverage,develop,debug demoSetup/setup.php
|
||||
```
|
||||
|
||||
#### Documentation
|
||||
|
||||
Occasionally new code or code changes also require new documentation or documentation changes. Developers should make sure that the new code is also reflected in the existing documentation ([Developer-Guide](), [User-Guide]() and/or module documentation) or if additional documentation is necessary.
|
||||
|
||||
#### Improvements, features, bugs
|
||||
|
||||
If a developer (or employee in general) has an idea for an improvement, feature or finds a potential bug it should be reported at https://github.com/Karaka-Management/Karaka/issues. A senior developer has to check these issues and decide how to proceed with them. The decision how to proceed with the issue must be explained by the senior developer as a response in the issue. Possible steps are:
|
||||
|
||||
* Accept the issue and put the task into the [Todos](https://github.com/orgs/Karaka-Management/projects/10)
|
||||
* Dismiss the issue with an explanation
|
||||
|
||||
### Release flow
|
||||
|
||||
In case SCSS/CSS or JS files got changed they must get re-built locally before comitting the code change:
|
||||
|
||||
```sh
|
||||
npx esbuild Web/Backend/js/backend.js --bundle --outfile=Install/Application/Backend/js/backend.min.js --minify
|
||||
scss cssOMS/styles.scss > cssOMS/styles.css
|
||||
```
|
||||
|
||||
For JS you may also use the shorthand command `npm run build`.
|
||||
|
||||
Code changes must be performed in a new branch. A new branch can be created with:
|
||||
|
||||
```sh
|
||||
git checkout -b new-branch-name
|
||||
```
|
||||
|
||||
The name of the branch can be chosen freely however it is recommended to follow the following branch naming conventions:
|
||||
|
||||
* `feature-*` for feature implementations
|
||||
* `hotfix-*` for security related fixes/improvements
|
||||
* `bug-*` for bug fixes
|
||||
* `security-*` for security related fixes/improvements
|
||||
* `general-*` for general improvements (i.e. documentation, code style & performance improvements)
|
||||
|
||||
```mermaid
|
||||
%%{init: { 'gitGraph': {'mainBranchName': 'master'}} }%%
|
||||
gitGraph
|
||||
commit
|
||||
branch hotfix-xxx
|
||||
commit
|
||||
checkout master
|
||||
branch develop
|
||||
checkout master
|
||||
merge hotfix-xxx
|
||||
checkout develop
|
||||
branch bug-xxx
|
||||
commit
|
||||
commit
|
||||
checkout hotfix-xxx
|
||||
commit
|
||||
checkout master
|
||||
merge hotfix-xxx
|
||||
checkout develop
|
||||
merge bug-xxx
|
||||
commit
|
||||
checkout develop
|
||||
branch feature-xxx
|
||||
commit
|
||||
commit
|
||||
commit
|
||||
checkout develop
|
||||
merge feature-xxx
|
||||
checkout master
|
||||
merge develop
|
||||
checkout develop
|
||||
branch general-xxx
|
||||
commit
|
||||
checkout develop
|
||||
merge general-xxx
|
||||
branch security-xxx
|
||||
commit
|
||||
commit
|
||||
checkout develop
|
||||
merge security-xxx
|
||||
checkout master
|
||||
merge develop
|
||||
|
||||
```
|
||||
|
||||
The senior developer who performs the code review merges the change request into the `develop` branch after their successful code review. Unsuccessful reviews lead to change requests by the original developer, other developers who can make the requested changes, changes by the senior developer who performed the review, or dismissal of the changed code. (**R10**)
|
||||
|
||||
## Approved dependencies
|
||||
|
||||
### Customer dependencies
|
||||
|
||||
Developers may only rely on the dependencies defined in [Approved Customer Software]() when developing a solution. If new software should be added to this list or a different version is required developers should make a request with their team leader/head of department who forwards this requests if appropriate to the CTO and explain the reasoning for the different dependency needs. The CTO can decide if the dependency will be accepted. (**R11**)
|
||||
|
||||
### Developer dependencies
|
||||
|
||||
Developers may only rely on the dependencies defined in [IT Equipment & Software](). If new software should be added to this list or a different version is required developers should make a request with their team leader/head of department who forwards this requests if appropriate to the CTO and explain the reasoning for the different dependency needs. The CTO can decide if the dependency will be accepted. Changing the package managers such as `composer.json` or `package.json` is not allowed by anyone else than the CTO. (**R12**)
|
||||
|
||||
## Other related documents
|
||||
|
||||
* [Confidentiality Policy](../Policies%20&%20Guidelines/Confidentiality%20Policy.md)
|
||||
* [Organization Activity Policy](../Policies%20&%20Guidelines/Organization%20Activity%20Policy.md)
|
||||
* [Tutorials](./Development/Tutorials)
|
||||
|
|
@ -6,15 +6,15 @@
|
|||
display: none;
|
||||
|
||||
&:checked + label {
|
||||
background: var(--button-colored-background);
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--btn-c-bg);
|
||||
color: var(--txt-on-bg-c-2);
|
||||
|
||||
+ section {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--button-colored-background-hover);
|
||||
background: var(--btn-c-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -32,11 +32,11 @@
|
|||
cursor: pointer;
|
||||
color: #000;
|
||||
font-size: 1rem;
|
||||
background: var(--box-border);
|
||||
background: var(--bborder);
|
||||
|
||||
&:hover {
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--button-colored-background-hover);
|
||||
color: var(--txt-on-bg-c-2);
|
||||
background: var(--btn-c-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,9 +55,9 @@
|
|||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
border-bottom: 1px solid var(--bborder);
|
||||
cursor: pointer;
|
||||
color: var(--link-color);
|
||||
color: var(--link-c);
|
||||
user-select: none;
|
||||
|
||||
.expand {
|
||||
|
|
|
|||
47
alert.scss
47
alert.scss
|
|
@ -1,16 +1,51 @@
|
|||
.log-msg {
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
@each $tuple in
|
||||
'ok' #aaffad #81e27d #459442,
|
||||
'warning' #f8ffa8 #d6d949 #94972f,
|
||||
'error' #ff7d79 #ee5649 #a5302a,
|
||||
'info' #b6d2ff #85b0ee #4865a5 {
|
||||
.log-msg-status-#{nth($tuple, 1)} {
|
||||
.log-lvl-#{nth($tuple, 1)} {
|
||||
background: #{nth($tuple, 2)};
|
||||
border: 1px solid #{nth($tuple, 3)};
|
||||
color: #{nth($tuple, 4)};
|
||||
}
|
||||
}
|
||||
|
||||
#dim {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.5;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
#app-message-container {
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
right: 10px;
|
||||
top: 85px;
|
||||
padding: 0;
|
||||
|
||||
.log-msg {
|
||||
z-index: 11;
|
||||
margin: 0 auto;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.log-msg {
|
||||
position: relative;
|
||||
max-width: 250px;
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
.nobreak, .nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.centerText {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rightText {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.floatLeft {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.floatRight {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pAlignTable {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vCenterTable {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.h-overflow {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.overflowfix {
|
||||
overflow: auto;
|
||||
}
|
||||
58
animate.css
vendored
Normal file
58
animate.css
vendored
Normal file
File diff suppressed because one or more lines are too long
204
animate.scss
vendored
204
animate.scss
vendored
|
|
@ -1,5 +1,3 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
/*!
|
||||
* animate.css -http://daneden.me/animate
|
||||
* Version - 3.5.1
|
||||
|
|
@ -29,27 +27,32 @@
|
|||
.animated.flipOutY,
|
||||
.animated.bounceIn,
|
||||
.animated.bounceOut {
|
||||
animation-duration: .75s;
|
||||
animation-duration: 0.75s;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
from, 20%, 53%, 80%, to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
transform: translate3d(0,0,0);
|
||||
from,
|
||||
20%,
|
||||
53%,
|
||||
80%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
40%, 43% {
|
||||
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
||||
40%,
|
||||
43% {
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
transform: translate3d(0, -30px, 0);
|
||||
}
|
||||
|
||||
70% {
|
||||
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
transform: translate3d(0, -15px, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: translate3d(0,-4px,0);
|
||||
transform: translate3d(0, -4px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -59,11 +62,14 @@
|
|||
}
|
||||
|
||||
@keyframes flash {
|
||||
from, 50%, to {
|
||||
from,
|
||||
50%,
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25%, 75% {
|
||||
25%,
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -138,11 +144,11 @@
|
|||
}
|
||||
|
||||
65% {
|
||||
transform: scale3d(.95, 1.05, 1);
|
||||
transform: scale3d(0.95, 1.05, 1);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale3d(1.05, .95, 1);
|
||||
transform: scale3d(1.05, 0.95, 1);
|
||||
}
|
||||
|
||||
to {
|
||||
|
|
@ -155,15 +161,23 @@
|
|||
}
|
||||
|
||||
@keyframes shake {
|
||||
from, to {
|
||||
from,
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
20%, 40%, 60%, 80% {
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -235,15 +249,21 @@
|
|||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
10%, 20% {
|
||||
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
|
||||
10%,
|
||||
20% {
|
||||
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
30%, 50%, 70%, 90% {
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||
}
|
||||
|
||||
40%, 60%, 80% {
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
|
|
@ -292,7 +312,9 @@
|
|||
}
|
||||
|
||||
@keyframes jello {
|
||||
from, 11.1%, to {
|
||||
from,
|
||||
11.1%,
|
||||
to {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
|
|
@ -331,13 +353,18 @@
|
|||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
from, 20%, 40%, 60%, 80%, to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
from,
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(.3, .3, .3);
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
20% {
|
||||
|
|
@ -345,7 +372,7 @@
|
|||
}
|
||||
|
||||
40% {
|
||||
transform: scale3d(.9, .9, .9);
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
|
||||
60% {
|
||||
|
|
@ -354,7 +381,7 @@
|
|||
}
|
||||
|
||||
80% {
|
||||
transform: scale3d(.97, .97, .97);
|
||||
transform: scale3d(0.97, 0.97, 0.97);
|
||||
}
|
||||
|
||||
to {
|
||||
|
|
@ -368,8 +395,12 @@
|
|||
}
|
||||
|
||||
@keyframes bounceInDown {
|
||||
from, 60%, 75%, 90%, to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
0% {
|
||||
|
|
@ -400,8 +431,12 @@
|
|||
}
|
||||
|
||||
@keyframes bounceInLeft {
|
||||
from, 60%, 75%, 90%, to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
0% {
|
||||
|
|
@ -432,8 +467,12 @@
|
|||
}
|
||||
|
||||
@keyframes bounceInRight {
|
||||
from, 60%, 75%, 90%, to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
from {
|
||||
|
|
@ -464,8 +503,12 @@
|
|||
}
|
||||
|
||||
@keyframes bounceInUp {
|
||||
from, 60%, 75%, 90%, to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
from {
|
||||
|
|
@ -497,17 +540,18 @@
|
|||
|
||||
@keyframes bounceOut {
|
||||
20% {
|
||||
transform: scale3d(.9, .9, .9);
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
|
||||
50%, 55% {
|
||||
50%,
|
||||
55% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(.3, .3, .3);
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -520,7 +564,8 @@
|
|||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
|
||||
40%, 45% {
|
||||
40%,
|
||||
45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
|
|
@ -572,7 +617,8 @@
|
|||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
||||
40%, 45% {
|
||||
40%,
|
||||
45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
|
|
@ -870,17 +916,19 @@
|
|||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
||||
transform: perspective(400px) translate3d(0, 0, 150px)
|
||||
rotate3d(0, 1, 0, -190deg);
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
||||
transform: perspective(400px) translate3d(0, 0, 150px)
|
||||
rotate3d(0, 1, 0, -170deg);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(400px) scale3d(.95, .95, .95);
|
||||
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
|
|
@ -1223,13 +1271,15 @@
|
|||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
20%, 60% {
|
||||
20%,
|
||||
60% {
|
||||
transform: rotate3d(0, 0, 1, 80deg);
|
||||
transform-origin: top left;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
40%, 80% {
|
||||
40%,
|
||||
80% {
|
||||
transform: rotate3d(0, 0, 1, 60deg);
|
||||
transform-origin: top left;
|
||||
animation-timing-function: ease-in-out;
|
||||
|
|
@ -1284,7 +1334,7 @@
|
|||
@keyframes zoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(.3, .3, .3);
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
|
|
@ -1299,14 +1349,14 @@
|
|||
@keyframes zoomInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
|
||||
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1317,14 +1367,14 @@
|
|||
@keyframes zoomInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1335,14 +1385,14 @@
|
|||
@keyframes zoomInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1353,14 +1403,14 @@
|
|||
@keyframes zoomInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
|
||||
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1375,7 +1425,7 @@
|
|||
|
||||
50% {
|
||||
opacity: 0;
|
||||
transform: scale3d(.3, .3, .3);
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
to {
|
||||
|
|
@ -1390,15 +1440,15 @@
|
|||
@keyframes zoomOutDown {
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
|
||||
transform-origin: center bottom;
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1409,12 +1459,12 @@
|
|||
@keyframes zoomOutLeft {
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(.1) translate3d(-2000px, 0, 0);
|
||||
transform: scale(0.1) translate3d(-2000px, 0, 0);
|
||||
transform-origin: left center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1426,12 +1476,12 @@
|
|||
@keyframes zoomOutRight {
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(.1) translate3d(2000px, 0, 0);
|
||||
transform: scale(0.1) translate3d(2000px, 0, 0);
|
||||
transform-origin: right center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1443,15 +1493,15 @@
|
|||
@keyframes zoomOutUp {
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
|
||||
transform-origin: center bottom;
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1549,7 +1599,6 @@
|
|||
animation-name: slideOutLeft;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
|
@ -1628,7 +1677,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.greenCircleFade, .greenCircleFade td {
|
||||
.greenCircleFade,
|
||||
.greenCircleFade td {
|
||||
animation-name: greenCircleFade;
|
||||
}
|
||||
|
||||
|
|
|
|||
62
article.scss
62
article.scss
|
|
@ -53,57 +53,9 @@ article {
|
|||
font-size: 1rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1rem 0 1rem 0;
|
||||
border: 1px solid #ddd;
|
||||
border-left: 3px solid #25acff;
|
||||
background: #f4f4f4;
|
||||
line-height: 1.2rem;
|
||||
font-size: .8rem;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: #fff;
|
||||
background: #25acff;
|
||||
border: 1px solid #0480ce;
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
margin: 1.5rem;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-family);
|
||||
font-size: 0.8rem;
|
||||
color: #23222d;
|
||||
background: #f4f4f4;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
border-bottom: 1px dotted var(--link-color);
|
||||
color: var(--link-c);
|
||||
border-bottom: 1px dotted var(--link-c);
|
||||
|
||||
&:hover {
|
||||
border-bottom: none;
|
||||
|
|
@ -153,23 +105,23 @@ article {
|
|||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border: 1px solid var(--box-border);
|
||||
border: 1px solid var(--bborder);
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1rem;
|
||||
min-width: 90%;
|
||||
|
||||
th, td {
|
||||
padding: 5px;
|
||||
border: 1px solid var(--box-border);
|
||||
border: 1px solid var(--bborder);
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--table-head-background);
|
||||
color: var(--table-head-color);
|
||||
background: var(--thead-bg);
|
||||
color: var(--thead-c);
|
||||
}
|
||||
|
||||
tr:nth-child(2n) td {
|
||||
background: var(--table-row-background);
|
||||
background: var(--trow-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
pre {
|
||||
border: 1px solid var(--box-border);
|
||||
background: #ccc;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border: 1px solid var(--box-border);
|
||||
background: #ccc;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -6,14 +6,12 @@
|
|||
|
||||
li {
|
||||
background: #fff;
|
||||
border-left: 1px solid var(--box-border);
|
||||
border-top: 1px solid var(--box-border);
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
border-left: 1px solid var(--bborder);
|
||||
border-top: 1px solid var(--bborder);
|
||||
border-bottom: 1px solid var(--bborder);
|
||||
padding: 0 10px 0 20px;
|
||||
height: 2.5rem;
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
|
@ -37,35 +35,35 @@
|
|||
}
|
||||
|
||||
&:before {
|
||||
border-left-color: var(--box-border);
|
||||
border-left-color: var(--bborder);
|
||||
margin-left: 1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&.active:after, &:hover:after {
|
||||
color: var(--text-on-background-color-2);
|
||||
color: var(--txt-on-bg-c-2);
|
||||
}
|
||||
|
||||
&.active:after {
|
||||
border-left: 14px solid var(--button-colored-background);
|
||||
border-left: 14px solid var(--btn-c-bg);
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
border-left: 14px solid var(--button-colored-background-hover);
|
||||
border-left: 14px solid var(--btn-c-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
cursor: default;
|
||||
background: var(--button-colored-background);
|
||||
background: var(--btn-c-bg);
|
||||
}
|
||||
|
||||
.active, li:hover {
|
||||
color: var(--text-on-background-color-2);
|
||||
color: var(--txt-on-bg-c-2);
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background: var(--button-colored-background-hover);
|
||||
background: var(--btn-c-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,15 +84,15 @@
|
|||
}
|
||||
|
||||
&.active:not(:last-child):after, &:hover:not(:last-child):after {
|
||||
color: var(--text-on-background-color-2);
|
||||
color: var(--txt-on-bg-c-2);
|
||||
}
|
||||
|
||||
&.active:not(:last-child):after {
|
||||
border-left: 14px solid var(--button-colored-background);
|
||||
border-left: 14px solid var(--btn-c-bg);
|
||||
}
|
||||
|
||||
&:hover:not(:last-child):after {
|
||||
border-left: 14px solid var(--button-colored-background-hover);
|
||||
border-left: 14px solid var(--btn-c-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
28
button.scss
28
button.scss
|
|
@ -1,19 +1,18 @@
|
|||
.btn, .link {
|
||||
.btn, .link, [data-href] {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
button, input[type="submit"], input[type="reset"], input[type="button"], label.button, a.button {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
min-width: 70px;
|
||||
background: var(--button-colored-background);
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--btn-c-bg);
|
||||
color: var(--txt-on-bg-c-2);
|
||||
padding: 0 1rem 0 1rem;
|
||||
flex-grow: 0;
|
||||
height: 30px;
|
||||
//border: none;
|
||||
border: 1px solid var(--box-border);
|
||||
border: 1px solid var(--bborder);
|
||||
box-shadow: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -29,17 +28,8 @@ button, input[type="submit"], input[type="reset"], input[type="button"], label.b
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--button-colored-background-hover);
|
||||
color: var(--text-on-background-color-2);
|
||||
}
|
||||
}
|
||||
|
||||
button.save, .button.save, input[type="submit"].save {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
background: var(--button-colored-background);
|
||||
|
||||
&:hover, &:focus {
|
||||
background: var(--button-colored-background);
|
||||
background: var(--btn-c-bg-hover);
|
||||
color: var(--txt-on-bg-c-2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -62,10 +52,10 @@ button.cancel, .button.cancel, input[type="submit"].cancel {
|
|||
|
||||
button.close, .button.close, input[type="submit"].close, input[type="reset"].close {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
background: #fffc3e;
|
||||
background: #ffde5b;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: #fffd7b;
|
||||
background: #ffe682;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,7 +70,7 @@ button.disabled, .button.disabled, input[type="submit"].disabled {
|
|||
}
|
||||
|
||||
.link.default {
|
||||
color: var(--button-colored-background);
|
||||
color: var(--btn-c-bg);
|
||||
}
|
||||
|
||||
.link.save {
|
||||
|
|
|
|||
|
|
@ -32,8 +32,6 @@ input, select, textarea, .textarea, button {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
|
|||
28
colors.scss
28
colors.scss
|
|
@ -1,34 +1,34 @@
|
|||
.highlight-1 {
|
||||
background: var(--color-red);
|
||||
.hl-1 {
|
||||
background: var(--color-red) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.highlight-2 {
|
||||
background: var(--color-green);
|
||||
.hl-2 {
|
||||
background: var(--color-green) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.highlight-3 {
|
||||
background: var(--color-blue);
|
||||
.hl-3 {
|
||||
background: var(--color-blue) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.highlight-4 {
|
||||
background: var(--color-yellow);
|
||||
.hl-4 {
|
||||
background: var(--color-yellow) !important;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.highlight-5 {
|
||||
background: var(--color-purple);
|
||||
.hl-5 {
|
||||
background: var(--color-purple) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.highlight-6 {
|
||||
background: var(--color-pink);
|
||||
.hl-6 {
|
||||
background: var(--color-pink) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.highlight-7 {
|
||||
background: var(--color-orange);
|
||||
.hl-7 {
|
||||
background: var(--color-orange) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
#cookie_consent_checkbox {
|
||||
#cookie_cc {
|
||||
display: none;
|
||||
|
||||
&:checked #cookieConsentForm {
|
||||
&:checked #cookieCF {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(:checked) + #cookieConsentForm {
|
||||
&:not(:checked) + #cookieCF {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
#cookieConsentForm {
|
||||
#cookieCF {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -25,16 +25,16 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
#cookieConsentForm_simple label, .button, input[type=submit],
|
||||
#cookieConsentForm_cutomize label, .button, input[type=submit]
|
||||
#cookieCF_simple label, .button, input[type=submit],
|
||||
#cookieCF_c label, .button, input[type=submit]
|
||||
{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background: none;
|
||||
border: 2px solid var(--button-background);
|
||||
color: var(--button-background) !important;
|
||||
border: 2px solid var(--btn-bg);
|
||||
color: var(--btn-bg) !important;
|
||||
}
|
||||
|
||||
.consent_element {
|
||||
|
|
@ -43,25 +43,25 @@
|
|||
|
||||
form {
|
||||
background : #fff;
|
||||
border: 1px solid var(--box-border);
|
||||
border: 1px solid var(--bborder);
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
#cookieConsentForm_defaultbuttons,
|
||||
#cookieConsentForm_customizedbuttons {
|
||||
#cookieCF_db,
|
||||
#cookieCF_cb {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#cookieConsentForm_simple + div, #cookieConsentForm_cutomize + div {
|
||||
#cookieCF_simple + div, #cookieCF_c + div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#cookieConsentForm_simple:checked + div, #cookieConsentForm_cutomize:checked + div {
|
||||
#cookieCF_simple:checked + div, #cookieCF_c:checked + div {
|
||||
display: block;
|
||||
}
|
||||
107
default.scss
107
default.scss
|
|
@ -2,23 +2,73 @@
|
|||
clear: both;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--font-family);
|
||||
p {
|
||||
margin: 0 0 10px 0;
|
||||
line-height: 1.4em;
|
||||
|
||||
span {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
+p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: #fff;
|
||||
background: #25acff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
margin: 1.5rem;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: var(--ff);
|
||||
font-size: .8rem;
|
||||
background: #f4f4f4;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
code {
|
||||
border-radius: 3px;
|
||||
padding: .2rem .4rem .2rem .4rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 1rem 0 1rem 0;
|
||||
line-height: 1.2rem;
|
||||
border: 1px solid #ddd;
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
counter-reset: line;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
white-space:pre-wrap;
|
||||
white-space: pre-wrap;
|
||||
border-left: 3px solid #25acff;
|
||||
|
||||
span {
|
||||
code {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
|
||||
&:before {
|
||||
counter-increment: line;
|
||||
content: counter(line);
|
||||
display: inline-block;
|
||||
border-right: 1px solid #ddd;
|
||||
padding: 0 .5em;
|
||||
|
|
@ -29,10 +79,15 @@ pre {
|
|||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
iframe {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border:none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -48,6 +103,33 @@ iframe {
|
|||
outline: 0;
|
||||
}
|
||||
|
||||
.p,
|
||||
.max, .min, .close, .cancel, .filter, .ok, .search, .abort, .sort {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nobreak, .nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pAlignTable {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vCenterTable {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.overflowfix {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.rp {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -102,15 +184,6 @@ iframe {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.n-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.p,
|
||||
.max, .min, .close, .cancel, .filter, .ok, .search, .abort, .sort {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vC {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ form {
|
|||
|
||||
label {
|
||||
font-size: .9rem;
|
||||
color: rgba(0, 0, 0, 80);
|
||||
color: rgba(0, 0, 0, 1.0);
|
||||
}
|
||||
|
||||
i+i {
|
||||
|
|
|
|||
|
|
@ -257,7 +257,7 @@
|
|||
// is >= sm
|
||||
@media only screen and (min-width: 48em) {
|
||||
.sm-hidden {
|
||||
display: block;
|
||||
display: revert;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -453,7 +453,7 @@
|
|||
}
|
||||
|
||||
.md-hidden {
|
||||
display: block;
|
||||
display: revert;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -639,7 +639,7 @@
|
|||
// is >= lg
|
||||
@media only screen and (min-width: 75em) {
|
||||
.lg-hidden {
|
||||
display: block;
|
||||
display: revert;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
|
|||
27
icon.scss
27
icon.scss
|
|
@ -1,27 +0,0 @@
|
|||
|
||||
|
||||
.infoIcon {
|
||||
width: var(--badge-size);
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
font-size: .55rem;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: -.55rem;
|
||||
top: -.45rem;
|
||||
width: .9rem;
|
||||
height: var(--badge-size);
|
||||
line-height: var(--badge-size);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
padding: .15rem;
|
||||
|
||||
color: var(--badge-color);
|
||||
background: var(--badge-background);
|
||||
}
|
||||
}
|
||||
|
||||
10
image.scss
10
image.scss
|
|
@ -1,16 +1,14 @@
|
|||
|
||||
|
||||
img {
|
||||
&.frame-1 {
|
||||
padding: 1rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--box-border);
|
||||
border: 1px solid var(--bborder);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.frame-2 {
|
||||
border: 1px solid var(--box-border);
|
||||
border: 1px solid var(--bborder);
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
|
@ -22,11 +20,11 @@ img {
|
|||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid var(--box-border);;
|
||||
border: 1px solid var(--bborder);;
|
||||
}
|
||||
}
|
||||
|
||||
.image-comparison {
|
||||
.img-comp {
|
||||
margin-left: 3rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
|
|
|||
189
input.scss
189
input.scss
|
|
@ -1,26 +1,20 @@
|
|||
input, select, textarea, .textarea, option {
|
||||
font-family: var(--font-family);
|
||||
font-family: var(--ff);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
input[type=checkbox] ~ .checked-visibility {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked ~ .checked-visibility {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[type=checkbox] ~ .checked-visibility-alt {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[type=checkbox] ~ .checked-visibility,
|
||||
input[type=checkbox]:checked ~ .checked-visibility-alt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked ~ .checked-visibility,
|
||||
input[type=checkbox] ~ .checked-visibility-alt {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input, select, textarea, .textarea {
|
||||
border: 1px solid var(--input-border);
|
||||
border: 1px solid var(--iborder);
|
||||
|
||||
&.undecorated {
|
||||
padding: 0;
|
||||
|
|
@ -54,19 +48,19 @@ input[type="date"],
|
|||
input[type="number"],
|
||||
input[type="datetime-local"] {
|
||||
box-sizing: border-box;
|
||||
color: var(--input-color);
|
||||
background: var(--input-background);
|
||||
color: var(--ipt-c);
|
||||
background: var(--ipt-bg);
|
||||
width: 100%;
|
||||
//min-width: 70px;
|
||||
max-width: 100%;
|
||||
font-size: .9rem;
|
||||
border: 1px solid var(--input-border);
|
||||
border: 1px solid var(--iborder);
|
||||
transition: background 0.3s, border 0.3s;
|
||||
|
||||
&:focus, .active, &:active {
|
||||
border-color: var(--input-background-active);
|
||||
border: 1px solid var(--input-border-active);
|
||||
color: var(--input-color-active);
|
||||
border-color: var(--ipt-bg-active);
|
||||
border: 1px solid var(--iborder-active);
|
||||
color: var(--ipt-c-active);
|
||||
}
|
||||
|
||||
&:disabled, &:readonly {
|
||||
|
|
@ -93,43 +87,43 @@ input[type="datetime-local"] {
|
|||
.inputWithIcon {
|
||||
position: relative;
|
||||
|
||||
.frontIcon, .endIcon {
|
||||
color: var(--input-icon-color);
|
||||
.frontIco, .endIco {
|
||||
color: var(--ipt-ico-c);
|
||||
font-size: 1rem;
|
||||
position: absolute;
|
||||
padding: .5rem;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.frontIcon {
|
||||
.frontIco {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.endIcon {
|
||||
.endIco {
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.frontIcon + input[type="text"], .frontIcon + input[type="password"] {
|
||||
.frontIco + input[type="text"], .frontIco + input[type="password"] {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
input[type=text]:active, input[type=text]:focus,
|
||||
input[type=password]:active, input[type=password]:focus {
|
||||
border: 1px solid var(--input-border-active);
|
||||
color: var(--text-on-background-color);
|
||||
border: 1px solid var(--iborder-active);
|
||||
color: var(--txt-on-bg-c);
|
||||
}
|
||||
|
||||
input[type=text]:active~.frontIcon, input[type=text]:focus~.frontIcon,
|
||||
input[type=password]:active~.frontIcon, input[type=password]:focus~.frontIcon,
|
||||
input[type=text]:active~.endIcon, input[type=text]:focus~.endIcon,
|
||||
input[type=password]:active~.endIcon, input[type=password]:focus~.endIcon {
|
||||
color: var(--input-icon-color-active);
|
||||
input[type=text]:active~.frontIco, input[type=text]:focus~.frontIco,
|
||||
input[type=password]:active~.frontIco, input[type=password]:focus~.frontIco,
|
||||
input[type=text]:active~.endIco, input[type=text]:focus~.endIco,
|
||||
input[type=password]:active~.endIco, input[type=password]:focus~.endIco {
|
||||
color: var(--ipt-ico-c-active);
|
||||
}
|
||||
|
||||
input[type=text]~.endIcon, input[type=text]~.endIcon,
|
||||
input[type=password]~.endIcon, input[type=password]~.endIcon {
|
||||
input[type=text]~.endIco, input[type=text]~.endIco,
|
||||
input[type=password]~.endIco, input[type=password]~.endIco {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -138,23 +132,15 @@ input[type="datetime-local"] {
|
|||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
|
||||
.textWrapper+input[type=submit], .textWrapper+input[type=button], .textWrapper+button {
|
||||
.txtWrap+input[type=submit], .txtWrap+input[type=button], .txtWrap+button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.textWrapper {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
i+input {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.frontIcon, .endIcon {
|
||||
color: var(--input-icon-color);
|
||||
.frontIco, .endIco {
|
||||
color: var(--ipt-ico-c);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 200;
|
||||
position: absolute;
|
||||
|
|
@ -162,36 +148,44 @@ input[type="datetime-local"] {
|
|||
padding: .25rem .6rem .6rem .4rem;
|
||||
}
|
||||
|
||||
.frontIcon {
|
||||
.frontIco {
|
||||
left: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.endIcon {
|
||||
.endIco {
|
||||
right: 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.txtWrap {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
i+input {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
input[type=text]:active, input[type=text]:focus,
|
||||
input[type=password]:active, input[type=password]:focus {
|
||||
border: 1px solid var(--input-border-active);
|
||||
border: 1px solid var(--iborder-active);
|
||||
}
|
||||
|
||||
input[type=text]:active~.frontIcon, input[type=text]:focus~.frontIcon,
|
||||
input[type=password]:active~.frontIcon, input[type=password]:focus~.frontIcon,
|
||||
input[type=text]:active~.endIcon, input[type=text]:focus~.endIcon,
|
||||
input[type=password]:active~.endIcon, input[type=password]:focus~.endIcon {
|
||||
color: var(--input-icon-color-active);
|
||||
input[type=text]:active~.frontIco, input[type=text]:focus~.frontIco,
|
||||
input[type=password]:active~.frontIco, input[type=password]:focus~.frontIco,
|
||||
input[type=text]:active~.endIco, input[type=text]:focus~.endIco,
|
||||
input[type=password]:active~.endIco, input[type=password]:focus~.endIco {
|
||||
color: var(--ipt-ico-c-active);
|
||||
}
|
||||
|
||||
input[type=text]~.endIcon, input[type=text]~.endIcon,
|
||||
input[type=password]~.endIcon, input[type=password]~.endIcon {
|
||||
input[type=text]~.endIco, input[type=text]~.endIco,
|
||||
input[type=password]~.endIco, input[type=password]~.endIco {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.advancedInput, .clickPopup {
|
||||
.advIpt, .clickPopup {
|
||||
//position: relative;
|
||||
/* position: relative; uncomment! otherwise the drop down inside would not be able to overflow and add a scroll bar to the container which is not desired in this case! */
|
||||
}
|
||||
|
|
@ -201,7 +195,7 @@ input[type="datetime-local"] {
|
|||
display: none;
|
||||
}
|
||||
|
||||
label + input {
|
||||
label + input, input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -229,7 +223,6 @@ input[type="datetime-local"] {
|
|||
align-items: center;
|
||||
margin: .5rem 0 .5rem 0;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -242,8 +235,6 @@ input[type="datetime-local"] {
|
|||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
|
||||
&:checked + ul {
|
||||
.expand {
|
||||
transition: all .3s ease;
|
||||
|
|
@ -315,17 +306,17 @@ option {
|
|||
}
|
||||
|
||||
input[type="file"] {
|
||||
border: 1px solid var(--input-border-active);
|
||||
border: 1px solid var(--iborder-active);
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
color: var(--input-color);
|
||||
color: var(--ipt-c);
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
font-family: 'FontAwesome', serif;
|
||||
color: var(--input-icon-color);
|
||||
color: var(--ipt-ico-c);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
|
|
@ -371,7 +362,7 @@ label.radio, label.checkbox {
|
|||
cursor: pointer;
|
||||
|
||||
&:checked ~ .checkmark {
|
||||
background-color: var(--button-colored-background);
|
||||
background-color: var(--btn-c-bg);
|
||||
}
|
||||
|
||||
&:required ~ .checkmark, &:disabled ~ .checkmark, &:readonly ~ .checkmark {
|
||||
|
|
@ -389,7 +380,7 @@ label.radio, label.checkbox {
|
|||
width: 15px;
|
||||
margin-right: 5px;
|
||||
background-color: #eee;
|
||||
border: 1px solid var(--input-border-active);
|
||||
border: 1px solid var(--iborder-active);
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
|
|
@ -439,7 +430,7 @@ input[type="range"] {
|
|||
width: 100%;
|
||||
min-width: 150px;
|
||||
height: 5px;
|
||||
background: var(--button-colored-background);
|
||||
background: var(--btn-c-bg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -453,13 +444,13 @@ input[type="range"] {
|
|||
button {
|
||||
box-sizing: border-box;
|
||||
// display: inline-block; If I add this, icons in a button are no longer centered
|
||||
background: var(--button-colored-background);
|
||||
background: var(--btn-c-bg);
|
||||
height: 30px;
|
||||
font-size: 1rem;
|
||||
min-width: 40px;
|
||||
border-left: solid 1px var(--input-border);
|
||||
border-top: solid 1px var(--input-border);
|
||||
border-bottom: solid 1px var(--input-border);
|
||||
border-left: solid 1px var(--iborder);
|
||||
border-top: solid 1px var(--iborder);
|
||||
border-bottom: solid 1px var(--iborder);
|
||||
border-right: none;
|
||||
padding: 0;
|
||||
|
||||
|
|
@ -469,7 +460,7 @@ input[type="range"] {
|
|||
flex-shrink: 0;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: var(--button-colored-background-hover);
|
||||
background: var(--btn-c-bg-hover);
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
|
|
@ -526,34 +517,6 @@ select.plain {
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.dropdown-closed {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked+label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
display: none;
|
||||
z-index: 2;
|
||||
|
||||
label {
|
||||
padding: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
& > input {
|
||||
display: none;
|
||||
|
||||
|
|
@ -574,3 +537,31 @@ select.plain {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-closed {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked+label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
display: none;
|
||||
z-index: 2;
|
||||
|
||||
label {
|
||||
padding: .5rem;
|
||||
}
|
||||
}
|
||||
14
layout.scss
14
layout.scss
|
|
@ -3,16 +3,17 @@
|
|||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
|
||||
.ipt-first {
|
||||
width: 100%;
|
||||
.ipt-start, .ipt-second, .ipt-first {
|
||||
display: table-cell;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.ipt-first {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ipt-second {
|
||||
padding-left: .75rem;
|
||||
display: table-cell;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -95,6 +96,11 @@ div.sticky, section.sticky {
|
|||
.form-group, .flex-line {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group .input-control+.input-control {
|
||||
margin-top: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@each $tuple in
|
||||
|
|
|
|||
|
|
@ -2,13 +2,9 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
[data-href] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.portlet-body a:not(.button), a.content, a .content {
|
||||
color: var(--link-color);
|
||||
border-bottom: 1px dotted var(--link-color);
|
||||
color: var(--link-c);
|
||||
border-bottom: 1px dotted var(--link-c);
|
||||
|
||||
&:hover {
|
||||
border-bottom: 1px dotted transparent ;
|
||||
|
|
|
|||
24
list.scss
24
list.scss
|
|
@ -1,7 +1,8 @@
|
|||
ul.boxed {
|
||||
ul {
|
||||
&.boxed {
|
||||
background: #fff;
|
||||
padding: 5px;
|
||||
border: 1px solid var(--box-border);
|
||||
border: 1px solid var(--bborder);
|
||||
|
||||
li {
|
||||
margin: 5px 0 5px 0;
|
||||
|
|
@ -14,19 +15,23 @@ ul.boxed {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.h-list li {
|
||||
&.h-list li {
|
||||
display: inline-block;
|
||||
margin: 5px 10px 5px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.foldable {
|
||||
&.foldable {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
input[type="checkbox"] {
|
||||
ul {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
input[type="checkbox"], .nested {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -42,10 +47,6 @@ ul.foldable {
|
|||
}
|
||||
}
|
||||
|
||||
.nested {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
&~.nested {
|
||||
display: block;
|
||||
|
|
@ -59,4 +60,5 @@ ul.foldable {
|
|||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
.context-menu {
|
||||
.ctx-menu {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
|
|
@ -8,9 +8,9 @@
|
|||
padding: .5rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
background: var(--table-row-background-hover);
|
||||
&:hover {
|
||||
background: var(--trow-bg-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
165
nav.scss
165
nav.scss
|
|
@ -1,141 +1,3 @@
|
|||
|
||||
|
||||
body > nav {
|
||||
width: 250px;
|
||||
overflow-y: auto;
|
||||
font-size: 0.8em;
|
||||
background: var(--nav-category-background);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#nav-side-outer {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
scrollbar-color: var(--button-colored-background) var(--nav-category-background);
|
||||
scrollbar-width: thin;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--button-colored-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--nav-category-background);
|
||||
}
|
||||
}
|
||||
|
||||
#nav-side-inner {
|
||||
flex: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid #4b5055;
|
||||
|
||||
span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked + ul {
|
||||
.expand {
|
||||
transition: all .3s ease;
|
||||
display: inherit;
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
|
||||
> li:nth-child(n+2) {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input + ul {
|
||||
.expand {
|
||||
transition: all .3s ease;
|
||||
transform: rotateZ(0deg);
|
||||
}
|
||||
|
||||
> li:nth-child(n+2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .3rem .5rem .3rem .5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> li {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: .5rem .75rem .5rem .75rem;
|
||||
border-left: 3px solid transparent;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: var(--nav-sub-background-hover);
|
||||
border-left: 3px solid var(--nav-sub-background-highlight);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&:not(:first-child) {
|
||||
background: var(--nav-sub-background);
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover, &.active, &:focus {
|
||||
background: var(--nav-category-background-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
li:first-child {
|
||||
border-bottom: 1px solid #212628;
|
||||
}
|
||||
|
||||
li:first-child {
|
||||
border-top: 1px solid #4b5055;
|
||||
}
|
||||
}
|
||||
|
||||
> li:first-child {
|
||||
li:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
flex-grow: 0;
|
||||
|
||||
&+span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-trigger {
|
||||
position: absolute;
|
||||
|
||||
&:checked + nav {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-top {
|
||||
user-select: none;
|
||||
margin-top: 1rem;
|
||||
|
|
@ -144,7 +6,7 @@ body > nav {
|
|||
> li {
|
||||
> a {
|
||||
//box-shadow: 0 0 3px 1px rgba(90, 71, 114, 0.3);
|
||||
border: 1px solid var(--box-border);
|
||||
border: 1px solid var(--bborder);
|
||||
margin-right: .5rem;
|
||||
display: inline-block;
|
||||
padding: 10px 10px;
|
||||
|
|
@ -160,7 +22,7 @@ body > nav {
|
|||
|
||||
&:hover, &.active, &:focus {
|
||||
background: var(--nav-content-hover);
|
||||
color: var(--text-on-background-color-2);
|
||||
color: var(--txt-on-bg-c-2);
|
||||
|
||||
> ul {
|
||||
display: block;
|
||||
|
|
@ -195,27 +57,32 @@ body > nav {
|
|||
}
|
||||
}
|
||||
|
||||
#nav-trigger {
|
||||
.nav-trigger {
|
||||
position: absolute;
|
||||
display: none;
|
||||
|
||||
&:checked + nav {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
#nav-trigger:not(:checked) + nav {
|
||||
@media only screen and (max-width: 62em) {
|
||||
.nav-trigger:not(:checked) + nav {
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
#nav-trigger:checked + nav {
|
||||
.nav-trigger:checked + nav {
|
||||
width: auto;
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
#nav-trigger:checked + nav {
|
||||
width: 100%;
|
||||
@media only screen and (max-width: 48em) {
|
||||
.nav-trigger:checked + nav {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
#nav-trigger:checked ~ main {
|
||||
display: none;
|
||||
.nav-trigger:checked ~ main {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +1,13 @@
|
|||
|
||||
|
||||
.pagination {
|
||||
li {
|
||||
li, a {
|
||||
display: inline-block;
|
||||
|
||||
&+li {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
li+li {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
background: #ccc;
|
||||
padding: 5px 10px 5px 10px;
|
||||
|
|
|
|||
103
portlet.scss
103
portlet.scss
|
|
@ -1,16 +1,25 @@
|
|||
.portlet {
|
||||
border: 1px solid var(--box-border);
|
||||
border: 1px solid var(--bborder);
|
||||
box-sizing: border-box;
|
||||
margin-top: 1rem;
|
||||
|
||||
.portlet-head {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ebedf2;
|
||||
padding: .7rem 1rem .7rem 1rem;
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&> span {
|
||||
.portlet-head, .portlet-foot {
|
||||
padding: .7rem 1rem .7rem 1rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hl-1, .hl-2, .hl-3, .hl-4, .hl-5, .hl-6, .hl-7 {
|
||||
.portlet-body, .portlet-head {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.portlet-head {
|
||||
font-weight: 300;
|
||||
|
||||
> span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -22,74 +31,21 @@
|
|||
form {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.portlet-foot {
|
||||
background: #fff;
|
||||
.portlet-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.portlet-body > h2, .portlet-separator, .portlet-head {
|
||||
border-bottom: 1px solid #ebedf2;
|
||||
}
|
||||
|
||||
.portlet-foot {
|
||||
border-top: 1px solid #ebedf2;
|
||||
padding: .7rem 1rem .7rem 1rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: .5rem;
|
||||
}
|
||||
|
||||
.portlet-body > h2 {
|
||||
border-bottom: 1px solid #ebedf2;
|
||||
}
|
||||
|
||||
.portlet-separator {
|
||||
border-bottom: 1px solid #ebedf2;
|
||||
}
|
||||
|
||||
&.highlight-1 {
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-red);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-2 {
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-green);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-3 {
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-blue);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-4 {
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-yellow);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-5 {
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-purple);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-6 {
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-pink);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-7 {
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-orange);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plain-portlet {
|
||||
|
|
@ -97,8 +53,3 @@
|
|||
margin-top: 1rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.portlet-body {
|
||||
background: #fff;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
|
|||
2
print.css
Normal file
2
print.css
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
body,main{background:none !important}body,#content,main{overflow:revert !important;height:auto}main>header,#nav-side-outer,body>nav,.nav-top{display:none !important}h1,h2,h3,h4,h5,ul{page-break-after:avoid}img{break-before:auto;break-after:auto;break-inside:avoid;display:block}code,ul,blockquote{break-inside:avoid}ul li{page-break-before:avoid;page-break-after:avoid}p{widows:4;orphans:3}.pH{display:none}.portlet{border:none !important}table,figure{page-break-inside:auto}.pagebreak{page-break-after:always;display:block}
|
||||
/*# sourceMappingURL=print.css.map */
|
||||
54
print.scss
Normal file
54
print.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
body, main {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
body, #content, main {
|
||||
overflow: revert !important;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
main > header, #nav-side-outer, body > nav, .nav-top {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, ul {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
break-before: auto;
|
||||
break-after: auto;
|
||||
break-inside: avoid;
|
||||
display: block;
|
||||
}
|
||||
|
||||
code, ul, blockquote {
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
ul li {
|
||||
page-break-before: avoid;
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
p {
|
||||
widows: 4;
|
||||
orphans: 3;
|
||||
}
|
||||
|
||||
.pH {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.portlet {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
table, figure {
|
||||
page-break-inside: auto;
|
||||
}
|
||||
|
||||
.pagebreak {
|
||||
page-break-after: always;
|
||||
display: block;
|
||||
}
|
||||
130
progress.scss
130
progress.scss
|
|
@ -7,43 +7,36 @@
|
|||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
background-color: rgb(43,194,83);
|
||||
background-color: #459442;
|
||||
background-image: linear-gradient(
|
||||
to left top,
|
||||
color-stop(0, rgb(43,194,83)),
|
||||
color-stop(1, rgb(84,240,84)));
|
||||
color-stop(0, #459442),
|
||||
color-stop(1, #81e27d));
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.orange > span {
|
||||
background-color: #f1a165;
|
||||
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
|
||||
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
|
||||
background-image: linear-gradient(#f1a165, #f36d0a);
|
||||
}
|
||||
|
||||
&.blue > span {
|
||||
background-color: #96c2f1;
|
||||
background-image: -moz-linear-gradient(top, #96c2f1, #4394f3);
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #96c2f1),color-stop(1, #4394f3));
|
||||
background-image: -webkit-linear-gradient(#96c2f1, #4394f3);
|
||||
background-color: #85b0ee;
|
||||
background-image: linear-gradient(#85b0ee, #4865a5);
|
||||
}
|
||||
|
||||
&.red > span {
|
||||
background-color: #f0a3a3;
|
||||
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
|
||||
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
|
||||
background-color: #ee5649;
|
||||
background-image: linear-gradient(#ee5649, #a5302a);
|
||||
}
|
||||
}
|
||||
|
||||
.meter > span:after, .animate > span > span {
|
||||
> span:after, .animate > span > span {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
background-image:
|
||||
-webkit-gradient(linear, 0 0, 100% 100%,
|
||||
linear-gradient(linear, 0 0, 100% 100%,
|
||||
color-stop(.25, rgba(255, 255, 255, .2)),
|
||||
color-stop(.25, transparent), color-stop(.5, transparent),
|
||||
color-stop(.5, rgba(255, 255, 255, .2)),
|
||||
|
|
@ -51,7 +44,7 @@
|
|||
color-stop(.75, transparent), to(transparent)
|
||||
);
|
||||
background-image:
|
||||
-moz-linear-gradient(
|
||||
linear-gradient(
|
||||
-45deg,
|
||||
rgba(255, 255, 255, .2) 25%,
|
||||
transparent 25%,
|
||||
|
|
@ -62,17 +55,15 @@
|
|||
transparent
|
||||
);
|
||||
z-index: 1;
|
||||
-webkit-background-size: 50px 50px;
|
||||
-moz-background-size: 50px 50px;
|
||||
-webkit-animation: move 4s linear infinite;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.animate > span:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@-webkit-keyframes move {
|
||||
@keyframes move {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
|
@ -82,101 +73,10 @@
|
|||
}
|
||||
|
||||
.noanimation > span > span, .noanimation > span:after {
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.nostripes > span > span, .nostripes > span:after {
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
list-style: none;
|
||||
margin: 0 0 30px 120px;
|
||||
padding-left: 30px;
|
||||
border-left: 3px solid #eaeaea;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
margin-top: -18px;
|
||||
top: 50%;
|
||||
left: -150px;
|
||||
font-size: 0.95em;
|
||||
line-height: 20px;
|
||||
position: absolute;
|
||||
padding: 5px 10px 5px 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.timeline-circle {
|
||||
margin-top: -10px;
|
||||
top: 50%;
|
||||
left: -40px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: tomato;
|
||||
border: 3px solid #eaeaea;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.timeline-circle-start {
|
||||
margin-top: 0;
|
||||
top: 0;
|
||||
left: -45px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #fff;
|
||||
border: 3px solid #eaeaea;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.timeline-circle-end {
|
||||
margin-top: 0;
|
||||
top: 100%;
|
||||
left: -45px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #fff;
|
||||
border: 3px solid #eaeaea;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
padding: 50px 20px 0;
|
||||
border-radius: 0.5em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-content p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.timeline label {
|
||||
font-size: 1.3em;
|
||||
position: absolute;
|
||||
z-index: 90;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.timeline-radio {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline-break {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
19
section.scss
19
section.scss
|
|
@ -29,12 +29,6 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
section.box {
|
||||
background: #fff;
|
||||
//box-shadow: 0 0 3px 1px rgba(90, 71, 114, 0.3);
|
||||
border: 1px solid var(--box-border);
|
||||
}
|
||||
|
||||
section {
|
||||
header {
|
||||
> h1 {
|
||||
|
|
@ -50,15 +44,14 @@ section {
|
|||
font-size: 1.2em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
&.box {
|
||||
background: #fff;
|
||||
//box-shadow: 0 0 3px 1px rgba(90, 71, 114, 0.3);
|
||||
border: 1px solid var(--bborder);
|
||||
}
|
||||
}
|
||||
|
||||
.pagebreak {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.pagebreak {
|
||||
page-break-after: always;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
100% { left: -400%; }
|
||||
}
|
||||
|
||||
div.slider-1 {
|
||||
.slider-1 {
|
||||
overflow: hidden;
|
||||
|
||||
figure {
|
||||
|
|
|
|||
50
spinner.scss
50
spinner.scss
|
|
@ -2,29 +2,20 @@
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #333;
|
||||
|
||||
margin: 50px auto;
|
||||
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
|
||||
animation: sk-rotateplane 1.2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-rotateplane {
|
||||
0% { -webkit-transform: perspective(120px) }
|
||||
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
|
||||
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
|
||||
@keyframes sk-rotateplane {
|
||||
0% { transform: perspective(120px); }
|
||||
50% { transform: perspective(120px) rotateY(180deg); }
|
||||
100% { transform: perspective(120px) rotateY(180deg) rotateX(180deg); }
|
||||
}
|
||||
|
||||
@keyframes sk-rotateplane {
|
||||
0% {
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
|
||||
} 50% {
|
||||
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
|
||||
} 100% {
|
||||
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||
}
|
||||
0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
|
||||
50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
|
||||
100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
|
||||
}
|
||||
|
||||
.spinner-2 {
|
||||
|
|
@ -36,34 +27,26 @@
|
|||
background-color: #333;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.bounce1 {
|
||||
-webkit-animation-delay: -0.32s;
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.bounce2 {
|
||||
-webkit-animation-delay: -0.16s;
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% { -webkit-transform: scale(0) }
|
||||
40% { -webkit-transform: scale(1.0) }
|
||||
@keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% { transform: scale(0); }
|
||||
40% { transform: scale(1.0); }
|
||||
}
|
||||
|
||||
@keyframes sk-bouncedelay {
|
||||
0%, 80%, 100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
} 40% {
|
||||
-webkit-transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
}
|
||||
0%, 80%, 100% { transform: scale(0); }
|
||||
40% { transform: scale(1.0); }
|
||||
}
|
||||
|
||||
.spinner-3 {
|
||||
|
|
@ -73,24 +56,21 @@
|
|||
background-color: #333;
|
||||
|
||||
border-radius: 100%;
|
||||
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
|
||||
animation: sk-scaleout 1.0s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sk-scaleout {
|
||||
0% { -webkit-transform: scale(0) }
|
||||
@keyframes sk-scaleout {
|
||||
0% { transform: scale(0) }
|
||||
100% {
|
||||
-webkit-transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-scaleout {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
} 100% {
|
||||
-webkit-transform: scale(1.0);
|
||||
transform: scale(1.0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
4017
styles.css
4017
styles.css
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,9 @@
|
|||
@import "clean", "default", "alignment", "visibility", "animate", "grid";
|
||||
@import "colors", "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "pagination", "progress", "section", "tab", "table", "tag", "tree";
|
||||
@import "media";
|
||||
@charset "UTF-8";
|
||||
|
||||
// @todo cleanup the vars file and implement more vars.
|
||||
// Additionally, create a default vars file in the "framework" which is used if the app doesn't define var values.
|
||||
@import "clean", "default", "grid";
|
||||
@import "colors", "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "image", "input", "accordion", "alert", "slider", "breadcrumb", "button", "link", "list", "nav", "pagination", "progress", "section", "tab", "table", "tag";
|
||||
@import "portlet", "menu";
|
||||
@import "editor", "cookie_consent";
|
||||
@import "develop";
|
||||
55
tab.scss
55
tab.scss
|
|
@ -1,5 +1,10 @@
|
|||
.tabview {
|
||||
.tab-links {
|
||||
&.right > .box {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-links {
|
||||
color: #000;
|
||||
padding: 5px 0 0 0;
|
||||
|
||||
|
|
@ -7,21 +12,21 @@
|
|||
font-size: 0.9em;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--button-colored-background);
|
||||
border: 1px solid var(--btn-c-bg);
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--button-colored-background-hover);
|
||||
border: 1px solid var(--button-colored-background-hover);
|
||||
color: var(--txt-on-bg-c-2);
|
||||
background: var(--btn-c-bg-hover);
|
||||
border: 1px solid var(--btn-c-bg-hover);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.active label:hover, .active label:focus {
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--button-colored-background-hover);
|
||||
border: 1px solid var(--button-colored-background-hover);
|
||||
color: var(--txt-on-bg-c-2);
|
||||
background: var(--btn-c-bg-hover);
|
||||
border: 1px solid var(--btn-c-bg-hover);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -34,17 +39,13 @@
|
|||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
.tab-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
> input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> input + div {
|
||||
> input, > input + div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -53,15 +54,10 @@
|
|||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab {
|
||||
.tab {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&.right > .box {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-1 {
|
||||
|
|
@ -76,8 +72,8 @@
|
|||
}
|
||||
|
||||
.active, .active label {
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--button-colored-background);
|
||||
color: var(--txt-on-bg-c-2);
|
||||
background: var(--btn-c-bg);
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -91,9 +87,8 @@
|
|||
|
||||
.tab-content {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid var(--button-colored-background);
|
||||
border: 1px solid var(--btn-c-bg);
|
||||
background: #fff;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -110,7 +105,7 @@
|
|||
}
|
||||
|
||||
.active label {
|
||||
border: 1px solid var(--box-border);
|
||||
border: 1px solid var(--bborder);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -139,8 +134,8 @@
|
|||
}
|
||||
|
||||
.active a, .active label {
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--button-colored-background)
|
||||
color: var(--txt-on-bg-c-2);
|
||||
background: var(--btn-c-bg)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -157,7 +152,7 @@
|
|||
}
|
||||
|
||||
.active label {
|
||||
border: 1px solid var(--box-border);
|
||||
border: 1px solid var(--bborder);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
170
table.scss
170
table.scss
|
|
@ -1,5 +1,23 @@
|
|||
.order-up, .order-down, .remove-form, .update-form, .save-form, .form-action {
|
||||
color: var(--button-colored-background);
|
||||
color: var(--btn-c-bg);
|
||||
}
|
||||
|
||||
thead {
|
||||
input[type=radio] {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
label, span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
& > a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
@ -7,12 +25,9 @@ table {
|
|||
table-layout: fixed;
|
||||
}
|
||||
|
||||
input[type=radio]:checked + i {
|
||||
color: var(--button-colored-background);
|
||||
}
|
||||
|
||||
input[type=radio]:checked + i,
|
||||
input[type=checkbox]:checked + label i {
|
||||
color: var(--button-colored-background);
|
||||
color: var(--btn-c-bg);
|
||||
}
|
||||
|
||||
.order-up, .order-down {
|
||||
|
|
@ -28,35 +43,27 @@ table {
|
|||
display: none;
|
||||
}
|
||||
|
||||
&.default.sticky {
|
||||
position: relative;
|
||||
|
||||
thead {
|
||||
th, td {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
||||
& > * {
|
||||
vertical-align : middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.default {
|
||||
//border-radius: 4px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
font-size: 0.9em;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
//overflow-x: auto;
|
||||
|
||||
.disabled, .empty {
|
||||
color: #d8d8d8;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
caption {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
background: var(--table-caption-background);
|
||||
border-bottom: 1px solid var(--bborder);
|
||||
background: var(--tcaption-bg);
|
||||
padding: .5rem;
|
||||
|
||||
//border-top-left-radius: 4px;
|
||||
|
|
@ -67,7 +74,9 @@ table {
|
|||
i {
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
|
||||
tr, caption {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -84,41 +93,7 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td, th {
|
||||
border-bottom: 1px solid #ebedf2;
|
||||
}
|
||||
|
||||
tr {
|
||||
&:last-child td, &:last-child th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background: var(--table-row-background);
|
||||
}
|
||||
|
||||
&:nth-of-type(2n+1) {
|
||||
background: var(--table-row-background-alt);
|
||||
}
|
||||
|
||||
&:hover td, &:focus td {
|
||||
background: var(--table-row-background-hover);
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
outline: none;
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 5px var(--box-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody, tfoot {
|
||||
tr {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -137,14 +112,42 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
background: var(--table-head-background);
|
||||
color: var(--table-head-color);
|
||||
tbody {
|
||||
td, th {
|
||||
border-bottom: 1px solid #ebedf2;
|
||||
}
|
||||
|
||||
tr {
|
||||
height: 2.5rem;
|
||||
&:last-child td, &:last-child th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
background: var(--trow-bg);
|
||||
}
|
||||
|
||||
&:nth-of-type(2n+1) {
|
||||
background: var(--trow-bg-alt);
|
||||
}
|
||||
|
||||
&:hover td, &:focus td {
|
||||
background: var(--trow-bg-hover);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
outline: none;
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 5px var(--bborder);
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
background: var(--thead-bg);
|
||||
color: var(--thead-c);
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #ebedf2;
|
||||
}
|
||||
|
|
@ -153,18 +156,21 @@ table {
|
|||
display: none;
|
||||
|
||||
&:checked + label {
|
||||
color: var(--box-highlight);;
|
||||
color: var(--box-hl);;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: #d8d8d8;
|
||||
}
|
||||
&.sticky thead {
|
||||
th, td {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: #d8d8d8;
|
||||
& > * {
|
||||
vertical-align : middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -180,28 +186,6 @@ table {
|
|||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
input[type=radio] {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
label, span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
& > a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
.fixed-#{$i} td:nth-child(#{$i}) {
|
||||
overflow: hidden;
|
||||
|
|
@ -211,7 +195,7 @@ thead {
|
|||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
table.table {
|
||||
table.popupTable {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
|
|
|
|||
40
tag.scss
40
tag.scss
|
|
@ -1,30 +1,40 @@
|
|||
span {
|
||||
&.tag {
|
||||
span.tag {
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px 4px 6px;
|
||||
font-size: .8rem;
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--button-colored-background);
|
||||
color: var(--txt-on-bg-c-2);
|
||||
background: var(--btn-c-bg);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
|
||||
i {
|
||||
color: var(--text-on-background-color-2);
|
||||
color: var(--txt-on-bg-c-2);
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $tuple in
|
||||
'ok' #aaffad #81e27d #459442,
|
||||
'warning' #f8ffa8 #d6d949 #94972f,
|
||||
'error' #ff7d79 #ee5649 #a5302a,
|
||||
'info' #b6d2ff #85b0ee #4865a5 {
|
||||
.tag.#{nth($tuple, 1)} {
|
||||
background: #{nth($tuple, 2)};
|
||||
border: 1px solid #{nth($tuple, 3)};
|
||||
color: #{nth($tuple, 4)};
|
||||
.infoIcon {
|
||||
width: 1rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
font-size: .55rem;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: -.55rem;
|
||||
top: -.35rem;
|
||||
width: 1rem;
|
||||
height: .8rem;
|
||||
line-height: .8rem;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
padding: .1rem .15rem .15rem .15rem;
|
||||
color: var(--badge-c);
|
||||
background: var(--badge-bg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<div class="log-msg log-msg-status-ok"><i class="g-icon">check</i>This is ok</div>
|
||||
<div class="log-msg log-msg-status-info"><i class="g-icon">notifications</i>This is a info</div>
|
||||
<div class="log-msg log-msg-status-warning"><i class="g-icon">warning</i>This is a warning</div>
|
||||
<div class="log-msg log-msg-status-error"><i class="g-icon">close</i>This is an error</div>
|
||||
<div class="log-msg log-lvl-ok"><i class="g-icon">check</i>This is ok</div>
|
||||
<div class="log-msg log-lvl-info"><i class="g-icon">notifications</i>This is a info</div>
|
||||
<div class="log-msg log-lvl-warning"><i class="g-icon">warning</i>This is a warning</div>
|
||||
<div class="log-msg log-lvl-error"><i class="g-icon">close</i>This is an error</div>
|
||||
|
||||
<div class="log-msg log-msg-status-ok">
|
||||
<div class="log-msg log-lvl-ok">
|
||||
<h1 class="log-msg-title">This is a Title</h1><i class="close g-icon">close</i>
|
||||
<div class="log-msg-content">This is a message</div>
|
||||
</div>
|
||||
|
|
@ -21,8 +21,18 @@
|
|||
Nulla facilisi. Nunc eu lobortis tellus.</p>
|
||||
<blockquote>This is a blockquote</blockquote>
|
||||
|
||||
<h2>Image</h2>
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="200">
|
||||
|
||||
<h2>Enlarge (click)</h2>
|
||||
<p>
|
||||
<img tabindex="0" width="150px" src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
||||
<img tabindex="0" width="150px" src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" alt="">
|
||||
<img tabindex="0" width="150px" src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" alt="">
|
||||
<img tabindex="0" width="150px" src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" alt="">
|
||||
<img tabindex="0" width="150px" src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
||||
</p>
|
||||
|
||||
<h2>Ordered List</h2>
|
||||
<ol>
|
||||
<li>one</li>
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
ul.foldable {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul.foldable input[type=checkbox] {
|
||||
display: none;
|
||||
}
|
||||
ul.foldable .caret {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
ul.foldable .caret::before {
|
||||
content: "\25B6";
|
||||
color: black;
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
ul.foldable .nested {
|
||||
display: none;
|
||||
}
|
||||
ul.foldable input[type=checkbox]:checked ~ .nested {
|
||||
display: block;
|
||||
}
|
||||
ul.foldable input[type=checkbox]:checked ~ .caret::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
ul.foldable ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul class="foldable">
|
||||
<li><input id="l1-1" type="checkbox" checked>
|
||||
Beverages
|
||||
<ul class="nested">
|
||||
<li>Water</li>
|
||||
<li>Coffee</li>
|
||||
<li><input id="l2-1" type="checkbox">
|
||||
<label class="caret" for="l2-1">Tea</label>
|
||||
<ul class="nested">
|
||||
<li>Black Tea</li>
|
||||
<li>White Tea</li>
|
||||
<li><input id="l3-1" type="checkbox">
|
||||
<label class="caret" for="l3-1">Green Tea</label>
|
||||
<ul class="nested">
|
||||
<li>Sencha</li>
|
||||
<li>Gyokuro</li>
|
||||
<li>Matcha</li>
|
||||
<li>Pi Lo Chun</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -243,7 +243,7 @@
|
|||
]
|
||||
}
|
||||
]' formaction=""><i class="g-icon">book</i></button>
|
||||
<div class="advancedInput wf-100" id="input5">
|
||||
<div class="advIpt wf-100" id="input5">
|
||||
<input autocomplete="off" spellcheck="false" class="input" type="text" id="input5"
|
||||
data-emptyAfter="true"
|
||||
data-autocomplete="off"
|
||||
|
|
@ -304,7 +304,7 @@
|
|||
]
|
||||
}
|
||||
]' formaction=""><i class="g-icon">book</i></button>
|
||||
<div class="advancedInput wf-100" id="input6">
|
||||
<div class="advIpt wf-100" id="input6">
|
||||
<input autocomplete="off" spellcheck="false" class="input" type="text" id="input6"
|
||||
data-emptyAfter="true"
|
||||
data-autocomplete="off"
|
||||
|
|
@ -365,7 +365,7 @@
|
|||
]
|
||||
}
|
||||
]' formaction=""><i class="g-icon">book</i></button>
|
||||
<div class="advancedInput wf-100" id="input7">
|
||||
<div class="advIpt wf-100" id="input7">
|
||||
<input autocomplete="off" spellcheck="false" class="input" type="text" id="input7"
|
||||
data-emptyAfter="true"
|
||||
data-autocomplete="off"
|
||||
|
|
@ -447,7 +447,7 @@
|
|||
]
|
||||
}
|
||||
]' formaction=""><i class="g-icon">book</i></button>
|
||||
<div class="advancedInput wf-100" id="input11">
|
||||
<div class="advIpt wf-100" id="input11">
|
||||
<input autocomplete="off" spellcheck="false" class="input" type="text" id="input11"
|
||||
data-emptyAfter="true"
|
||||
data-autocomplete="off"
|
||||
|
|
@ -518,7 +518,7 @@
|
|||
]
|
||||
}
|
||||
]' formaction=""><i class="g-icon">book</i></button>
|
||||
<div class="advancedInput wf-100" id="input12">
|
||||
<div class="advIpt wf-100" id="input12">
|
||||
<input autocomplete="off" spellcheck="false" class="input" type="text" id="input12"
|
||||
data-emptyAfter="true"
|
||||
data-autocomplete="off"
|
||||
|
|
@ -589,7 +589,7 @@
|
|||
]
|
||||
}
|
||||
]' formaction=""><i class="g-icon">book</i></button>
|
||||
<div class="advancedInput wf-100" id="input13">
|
||||
<div class="advIpt wf-100" id="input13">
|
||||
<input autocomplete="off" spellcheck="false" class="input" type="text" id="input13"
|
||||
data-emptyAfter="true"
|
||||
data-autocomplete="off"
|
||||
|
|
|
|||
23
tests/app/gallery.php
Normal file
23
tests/app/gallery.php
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<div class="gallery">
|
||||
<div class="active-image">
|
||||
<input id="i86" type="radio" name="gallery_1" checked=""> <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg">
|
||||
<input id="i87" type="radio" name="gallery_1"> <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg">
|
||||
<input id="i88" type="radio" name="gallery_1"> <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg">
|
||||
<input id="i89" type="radio" name="gallery_1"> <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg">
|
||||
</div>
|
||||
<div class="thumbs">
|
||||
<label for="i86"><img class="preview" src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"></label>
|
||||
<label for="i87"><img class="preview" src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"></label>
|
||||
<label for="i88"><img class="preview" src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"></label>
|
||||
<label for="i89"><img class="preview" src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"></label>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template id="table-context-menu-tpl">
|
||||
<div id="table-context-menu" class="context-menu">
|
||||
<template id="table-ctx-menu-tpl">
|
||||
<div id="table-ctx-menu" class="ctx-menu">
|
||||
<ul>
|
||||
<li class="context-line">
|
||||
<label class="checkbox" for="itable1-visibile-">
|
||||
|
|
|
|||
|
|
@ -6,11 +6,12 @@
|
|||
<base href="/cssOMS/tests/app/">
|
||||
<title>Style Test</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../tree.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../timeline.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../Install/Application/Backend/Themes/Default/css/backend-small.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../Resources/fonts/fontawesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../Resources/fonts/linearicons/css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../Resources/fonts/lineicons/css/lineicons.css">
|
||||
<script src="../../../jsOMS/Utils/oLib.js"></script>
|
||||
<script src="load.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -74,7 +75,9 @@
|
|||
<li><a href="?page=tabs">Tabs</a></li>
|
||||
<li><a href="?page=breadcrumbs">Breadcrumbs</a></li>
|
||||
<li><a href="?page=progress">Progress</a></li>
|
||||
<li><a href="?page=timeline">Timeline</a></li>
|
||||
<li><a href="?page=drag">Drag</a></li>
|
||||
<li><a href="?page=tree">Tree</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
|
|
@ -88,6 +91,7 @@
|
|||
</li>
|
||||
<li><a href="?page=images">Images</a></li>
|
||||
<li><a href="?page=sliders">Sliders</a></li>
|
||||
<li><a href="?page=gallery">Gallery</a></li>
|
||||
<li><a href="?page=lazyload">Lazyload</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -195,10 +199,10 @@
|
|||
<form id="s-bar" method="GET" action="">
|
||||
<label class="ham-trigger" for="nav-trigger"><i class="g-icon p">menu</i></label>
|
||||
<span role="search" class="inputWrapper">
|
||||
<span class="textWrapper">
|
||||
<i class="frontIcon g-icon" aria-hidden="true">search</i>
|
||||
<span class="txtWrap">
|
||||
<i class="frontIco g-icon" aria-hidden="true">search</i>
|
||||
<input id="iSearchBox" name="search" type="text" autofocus="autofocus">
|
||||
<i class="endIcon g-icon" aria-hidden="true">close</i>
|
||||
<i class="endIco g-icon" aria-hidden="true">close</i>
|
||||
</span>
|
||||
<input type="submit" id="iSearchButton" name="searchButton" value="Search">
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="portlet">
|
||||
<div class="portlet-body">
|
||||
<ul class="foldable">
|
||||
<li><input id="l1-1" type="checkbox" checked>
|
||||
Beverages
|
||||
<ul class="nested">
|
||||
<li>Water</li>
|
||||
<li>Coffee</li>
|
||||
<li><input id="l2-1" type="checkbox">
|
||||
<label class="caret" for="l2-1">Tea</label>
|
||||
<ul class="nested">
|
||||
<li>Black Tea</li>
|
||||
<li>White Tea</li>
|
||||
<li><input id="l3-1" type="checkbox">
|
||||
<label class="caret" for="l3-1">Green Tea</label>
|
||||
<ul class="nested">
|
||||
<li>Sencha</li>
|
||||
<li>Gyokuro</li>
|
||||
<li>Matcha</li>
|
||||
<li>Pi Lo Chun</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import { jsOMS } from '../../../jsOMS/Utils/oLib.js';
|
||||
import { AssetManager } from '../../../jsOMS/Asset/AssetManager.js';
|
||||
import { Logger } from '../../../jsOMS/Log/Logger.js';
|
||||
import { CacheManager } from '../../../jsOMS/DataStorage/CacheManager.js';
|
||||
|
|
|
|||
|
|
@ -1,53 +1,53 @@
|
|||
<div><!-- The parent element is display: flex; therefore we need to trick the content this way in order to allow floating! -->
|
||||
<section class="box wf-100 floatLeft">
|
||||
<section class="box wf-100 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="box wf-50 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="box wf-50 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="box wf-33 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="box wf-33 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="box wf-33 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="box wf-25 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="box wf-25 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="box wf-25 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="box wf-25 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-75 floatLeft">
|
||||
<section class="box wf-75 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="box wf-25 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-66 floatLeft">
|
||||
<section class="box wf-66 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="box wf-33 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="box wf-50 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="box wf-25 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="box wf-25 lf">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
</div>
|
||||
70
tests/app/timeline.php
Normal file
70
tests/app/timeline.php
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<ul class="timeline1">
|
||||
<li class="work">
|
||||
<input class="timeline1-radio" id="work6" name="works" type="radio" checked>
|
||||
<div>
|
||||
<label for="work6">Head of Finance & Authorized Officer (Schütz Dental GmbH / GDF)</label>
|
||||
<span class="timeline1-date">Aug. 2018</span>
|
||||
<span class="timeline1-circle-start"></span>
|
||||
<span class="timeline1-circle"></span>
|
||||
</div>
|
||||
<div class="timeline1-content">
|
||||
<p>Continuation of most of the head of controlling tasks/responsibilities.</p>
|
||||
<p>Key additional tasks included representing the financial interests in the executive committee, managing various contracts as authorized officer (Prokurist), investor relations, managing the finance department of 9 people, managing insurances, risk management, the responsibility for the annual and monthly statements (German GAAP & IFRS), J-SOX responsible, project management for various large projects.</p>
|
||||
<p>Further tasks were fleet management, sales manager negotiations (sales prices, margins, payment terms/credit management), doubtful accounts and finances in general which includes representing the company regarding all financial aspects in audits, meetings with various key partners (i.e. banks, customers, suppliers, tax authorities, ...).</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="work">
|
||||
<input class="timeline1-radio" id="work4" name="works" type="radio">
|
||||
<div>
|
||||
<label for="work4">Head of Controlling (Schütz Dental GmbH and GDF)</label>
|
||||
<span class="timeline1-date">Oct. 2015</span>
|
||||
<span class="timeline1-circle"></span>
|
||||
</div>
|
||||
<div class="timeline1-content">
|
||||
<p>Responsible for creating the monthly internal reporting according to German GAAP (HGB), the monthly reporting for the japanese stock market shareholder according to IFRS (implementation and actual reporting) directly for the HQ, sales reports, sales price calculations for promotions and products with critical margins, budget / actual comparisons, expense and sales forecsts, annual budgeting, J-SOX (implementation, controlling and performing the audits), managing the annual stock taking, process and workflow optimizations as well as managing critical IT implementations. Additionally, responsible for one junior controller.</p>
|
||||
<p>During the monthly closing I performed the stock evaluation, cut-off-test, created various reportings with respect to income statement, balance, consolidation, product segments, R&D and production. Key projects include the implementation of a automatic profit center evaluation in order to support sales cost accounting reports, I changed the manual stock evaluation to a automatic stock evaluation. Furthermore, I introduced a improved fixed asset management including QR codes for all of our tangible assets. Last but not least I assisted in creating UDI labels (HIBCC) for our medical devices for the US and EU market.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="work">
|
||||
<input class="timeline1-radio" id="work3" name="works" type="radio">
|
||||
<div>
|
||||
<label for="work3">Controller (Schütz Dental GmbH and GDF)</label>
|
||||
<span class="timeline1-date">Jan. 2015</span>
|
||||
<span class="timeline1-circle"></span>
|
||||
</div>
|
||||
<div class="timeline1-content">
|
||||
<p>Sales analysis for sales managers, sales reps and management. Assting annual budgeting process as well as the stock taking. In the finance department I assisted in creating the monthly reporting as well as doing accounts receivable and accounts payable accounting.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="work">
|
||||
<input class="timeline1-radio" id="work2" name="works" type="radio">
|
||||
<div>
|
||||
<label for="work2">Training (Schütz Dental GmbH)</label>
|
||||
<span class="timeline1-date">Jul. 2013</span>
|
||||
<span class="timeline1-circle"></span>
|
||||
</div>
|
||||
<div class="timeline1-content">
|
||||
<p>My training consisted of various positions in sales, purchasing, accounting and marketing.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="work">
|
||||
<input class="timeline1-radio" id="work1" name="works" type="radio">
|
||||
<div>
|
||||
<label for="work1">Sales Clerk (part-time)</label>
|
||||
<span class="timeline1-date">2006</span>
|
||||
<span class="timeline1-circle"></span>
|
||||
<span class="timeline1-circle-end"></span>
|
||||
</div>
|
||||
<div class="timeline1-content">
|
||||
<p>During my A-Level I became a part-time salesman in a furnitor shop and gained my first experiance with customers and selling products to them.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
123
tests/app/tree.php
Normal file
123
tests/app/tree.php
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<ul class="tree wf-100">
|
||||
<li><span>
|
||||
<section class="box">Jingga</section>
|
||||
</span>
|
||||
<ul>
|
||||
<li><span>
|
||||
<section class="box">Lima</section>
|
||||
<ul class="tree">
|
||||
<li><span>
|
||||
<section class="box">Management</section>
|
||||
</span>
|
||||
<ul>
|
||||
<li><span>
|
||||
<section class="box">R&D</section>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">Sales Domestic</section>
|
||||
</span>
|
||||
<ul>
|
||||
<li><span>
|
||||
<section class="box">Sales Reps.</section>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">Domestic Back-Office</section>
|
||||
</span>
|
||||
<ul>
|
||||
<li><span>
|
||||
<section class="box">Precious Alloys/IMPLA</section>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">Domestic Invoicing</section>
|
||||
</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><span>
|
||||
<section class="box">Sales Export</section>
|
||||
</span>
|
||||
<ul>
|
||||
<li><span>
|
||||
<section class="box">Area Managers</section>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">Export Back-Office</section>
|
||||
</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><span>
|
||||
<section class="box">Service</section>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">Support</section>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">Purchasing</section>
|
||||
</span>
|
||||
<ul>
|
||||
<li><span>
|
||||
<section class="box">Warehouse</section>
|
||||
</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><span>
|
||||
<section class="box">Secretariat</section>
|
||||
</span>
|
||||
<ul>
|
||||
<li><span>
|
||||
<section class="box">Registration</section>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">Reception</section>
|
||||
</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><span>
|
||||
<section class="box">Production</section>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">HR</section>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">QA</section>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">QM</section>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">Finance</section>
|
||||
</span>
|
||||
<ul>
|
||||
<li><span>
|
||||
<section class="box">Accounts Receivable</section>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">Accounts Payable</section>
|
||||
</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><span>
|
||||
<section class="box">Marketing</section>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">IT</section>
|
||||
</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</span></li>
|
||||
<li><span>
|
||||
<section class="box">Karaka</section>
|
||||
</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
61
text.scss
61
text.scss
|
|
@ -1,22 +1,8 @@
|
|||
p {
|
||||
margin: 0 0 10px 0;
|
||||
line-height: 1.4em;
|
||||
|
||||
span {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
+p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.blurry-text {
|
||||
text-shadow: 0 0 .9rem #000;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
.white-3d {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
|
|
@ -41,22 +27,45 @@ p {
|
|||
background-size: 200% 100%;
|
||||
animation: rainbow-gradient 3.5s linear infinite;
|
||||
backface-visibility: hidden;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
@keyframes rainbow-gradient {
|
||||
0% {
|
||||
background-position: 0;
|
||||
0% { background-position: 0; }
|
||||
100% { background-position: -100%; }
|
||||
0% { background-position: 0; }
|
||||
100% { background-position: -100%; }
|
||||
}
|
||||
|
||||
$speed: 16s;
|
||||
$wordCount: 7;
|
||||
|
||||
.morphing {
|
||||
position: relative;
|
||||
font-size: 120px;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
min-height: 100vh;
|
||||
filter: contrast(25) blur(1px);
|
||||
}
|
||||
|
||||
.word {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: word $speed infinite ease-in-out;
|
||||
|
||||
@for $i from 0 to $wordCount {
|
||||
&:nth-child(#{$i + 1}) {
|
||||
animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;
|
||||
}
|
||||
100% {
|
||||
background-position: -100%;
|
||||
}
|
||||
0% {
|
||||
background-position: 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -100%;
|
||||
|
||||
@keyframes word {
|
||||
0%, 5%, 100% { filter: blur(0px); opacity: 1; }
|
||||
20%, 80% { filter: blur(1em); opacity: 0; }
|
||||
}
|
||||
}
|
||||
*/
|
||||
2
timeline.css
Normal file
2
timeline.css
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
.timeline1{list-style:none;margin:0 0 30px 120px;padding-left:30px;border-left:3px solid #eaeaea}.timeline1 li{margin:0;position:relative}.timeline1 p{margin:0 0 15px}.timeline1-date{margin-top:-18px;top:50%;left:-150px;font-size:0.95em;line-height:20px;position:absolute;padding:5px 10px 5px 10px;border:1px solid #ccc}.timeline1-circle,.timeline1-circle-start,.timeline1-circle-end{border:3px solid #eaeaea;border-radius:50%;display:block;position:absolute}.timeline1-circle{margin-top:-10px;top:50%;left:-40px;width:10px;height:10px;background:tomato}.timeline1-circle-start,.timeline1-circle-end{width:20px;height:20px;background:#fff;left:-45px;margin-top:0}.timeline1-circle-start{top:0}.timeline1-circle-end{top:100%}.timeline1-content{padding:50px 20px 0;border-radius:0.5em;position:relative}.timeline1-content p{text-align:justify}.timeline1 label{font-size:1.3em;position:absolute;z-index:90;top:20px}.timeline1-radio,.timeline1-break{display:none}@media only screen and (max-width: 600px){.timeline1-date{margin:0;font-size:0.95em;position:inherit;padding:0;border:none}.timeline1{margin:0 0 0 .5rem}}
|
||||
/*# sourceMappingURL=timeline.css.map */
|
||||
93
timeline.scss
Normal file
93
timeline.scss
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
.timeline1 {
|
||||
list-style: none;
|
||||
margin: 0 0 30px 120px;
|
||||
padding-left: 30px;
|
||||
border-left: 3px solid #eaeaea;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline1-date {
|
||||
margin-top: -18px;
|
||||
top: 50%;
|
||||
left: -150px;
|
||||
font-size: 0.95em;
|
||||
line-height: 20px;
|
||||
position: absolute;
|
||||
padding: 5px 10px 5px 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.timeline1-circle, .timeline1-circle-start, .timeline1-circle-end {
|
||||
border: 3px solid #eaeaea;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.timeline1-circle {
|
||||
margin-top: -10px;
|
||||
top: 50%;
|
||||
left: -40px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: tomato;
|
||||
}
|
||||
|
||||
.timeline1-circle-start, .timeline1-circle-end {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #fff;
|
||||
left: -45px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.timeline1-circle-start {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.timeline1-circle-end {
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.timeline1-content {
|
||||
padding: 50px 20px 0;
|
||||
border-radius: 0.5em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline1-content p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.timeline1 label {
|
||||
font-size: 1.3em;
|
||||
position: absolute;
|
||||
z-index: 90;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.timeline1-radio, .timeline1-break {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.timeline1-date {
|
||||
margin: 0;
|
||||
font-size: 0.95em;
|
||||
position: inherit;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.timeline1 {
|
||||
margin: 0 0 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
.tooltip {
|
||||
cursor: pointer;
|
||||
color: var(--box-highlight);
|
||||
color: var(--box-hl);
|
||||
font-size: .9rem;
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
|
|
|
|||
2
tree.css
Normal file
2
tree.css
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
.tree,.tree ul,.tree li{list-style:none;padding:0;position:relative}.tree{display:table;text-align:center}.tree .tree{border-top:1px solid #666}.tree .box{margin:0;padding:1rem;border:0}.tree ul{width:100%;display:table}.tree ul:not(.tree) li:before{border:1px solid #666}.tree li{display:table-cell;padding:.5em 0;vertical-align:top}.tree li:before{content:"";left:0;position:absolute;right:0;top:0}.tree li:first-child:before{left:50%}.tree li:last-child:before{right:50%}.tree li>span{text-align:left;border:solid .1em #666;display:inline-block;margin:0 .2em .5em;position:relative}.tree ul:not(.tree):before,.tree span:before{border:solid 1px #666;content:"";height:.45em;left:50%;position:absolute}.tree ul:before{top:-.5rem}.tree span:before{top:-.5rem}.tree>li:before,.tree>li:after,.tree>li>span:before{border:none}
|
||||
/*# sourceMappingURL=tree.css.map */
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user